JS 함수 호출
1.
함수 안의 코드는 함수 정의 때는 실행 안 되고 있다가,
함수 호출 (= 함수 실행 = 함수 시작)하면 실행이 됨.
2.
함수 호출방법에 크게 2종류 존재. 즉, 두 경우 모두 함수 실행 가능.
직접함수호출(call)
간접함수호출(invoke)
3.
아래서는 간접함수호출(invoke) 소개.
함수 방식으로 간접함수호출
<p id="demo"></p>
<script>
function homzzang(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = homzzang(3, 4);
</script>
1.
위 예제의 함수는 겉보기엔 어떤 객체에도 속하지 않지만, JS는 항상 기본 전역 객체가 존재함.
2.
HTML 문서에서는 HTML 페이지 자체가 전역 객체가 됨. 따라서, 위 함수는 HTML 문서에 속함.
3.
브라우저에서 HTML 페이지는 브라우저창이 되며, 위 함수는 자동적으로 window의 함수가 됨.
즉, homzzang() = window.homzzang() 임. (즉, 위 함수는 아래 함수와 동일.)
4.
아래는 JS 함수를 호출하는 일반적인 방법이지만 아주 좋은 방법은 아님.
전역변수, 메서드, 함수는 전역 객체에 이름 충돌 및 버그를 쉽게 야기함.
<p id="demo"></p>
<script>
function homzzang(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = window.homzzang(3, 4);
</script>
this 키워드
1.
JS에서 this 키워드로 불리는 것은 현재 코드를 소유하는 객체를 일컬음.
2.
함수 안에 사용될 때, this 키워드의 값은 함수를 소유하는 객체임.
3.
this는 변수가 아님 명심 !!. this는 키워드임. 따라서, 그 값을 변경 불가.
4.
this 키워드 더 자세히 보기
전역객체
1.
함수가 소유자 객체 없이 호출되면, this 의 값은 전역객체가 됨.
2.
웹브라우저에서 전역객체는 브라우저창 (window)임.
3.
아래 예제는 this 값으로 window 객체를 반환.
<p id="demo"></p>
<script>
var x = homzznag();
function homzznag() {
return this;
}
document.getElementById("demo").innerHTML = x;
</script>
결과보기 : [object Window]
1.
함수를 전역 함수로 호출하면 this 값이 전역객체가 되게 만듦.
2.
window 객체를 변수로 사용하면, 프로그램 충돌 가능성 커짐.
관련글 https://homzzang.com/b/mv-480
메서드 방식으로 간접함수호출
JS에서는 함수를 객체 메서드로 정의 가능.
아래 예제는 2개 속성 (site , host)과 1개 메서드 (plus) 사용해 객체 (mySite) 생성.
<p id="demo"></p>
<script>
var mySite = {
site:"홈짱닷컴",
host: "Homzzang.com",
plus: function() {
return this.site + " " + this.host;
}
}
document.getElementById("demo").innerHTML = mySite.plus();
</script>
결과보기
1.
plus() 메서드는 함수이며, 이 함수는 mySite 객체에 속함.
즉, 객체메서드로써 함수호출하면, this 값이 객체 자체가 됨.
2.
this로 호출된 건 JS코드를 소유하는 객체임. 위의 예 경우 this 값음 mySite임.
plus() 메서드 코드를 변경해 this 값 확인하기. (아래 예제 참고)
<p id="demo"></p>
<script>
var mySite = {
site:"홈짱닷컴",
host: "Homzzang.com",
full: function() {
return this;
}
}
document.getElementById("demo").innerHTML = mySite.full();
</script>
결과보기 : [object Object]
함수생성자 갖고 간접함수호출
1.
new 키워드 붙여 간접함수호출 시, 생성자 호출임.
2.
마치 새 함수를 생성하는 것처럼 보일 수도 있지만,
JS 함수는 객체라서 실제론 새 객체 생성하는 것임.
<p id="demo"></p>
<script>
function mySite(a, b) { // 함수생성자
this.site = a;
this.host = b;
this.plus = a + " " + b;
}
var x = new mySite("홈짱닷컴","Homzzang.com"); // 객체 생성
document.getElementById("demo").innerHTML = x.plus;
</script>
결과보기 : 홈짱닷컴 Homzzang.com
1.
생성자 호출방식은 새 객체를 생성함.
2.
새 객체는 생성자로부터 속성과 메서드를 상속받음.
3.
생성자 안의 this 키워드는 값을 갖지 않은 상태임.
this 값은 간접함수호출 때 생성된 새 객체임.
참고.
var page = {
func1:{
...
},
func2:{
...
}
}
page.func2();
수목원님 님 https://sir.kr/qa/323152
