this 속성은 현재 개체를 나타냅니다. 전역 범위에서 사용되는 경우 현재 페이지 개체 창을 참조하고, 함수에서 사용되는 경우 런타임 시 이 함수가 호출되는 개체를 나타냅니다. 또한 함수에서 this의 특정 포인터를 변경하기 위해 apply와 call이라는 두 가지 전역 메서드를 사용할 수도 있습니다.
우선 전역 범위에서 이를 사용하는 예를 살펴보겠습니다.
함수의 속성은 다음과 같이 함수가 정의될 때가 아니라 런타임에 결정됩니다.
// 전역 함수 정의
function foo() {
console.log(this.fruit)
}
// 전역 함수 정의 window.fruit = "apple "과 동일한 변수;
var Fruit = "apple"
// 이때 foo 함수의 this는 window 객체를 가리킵니다
// 이 호출 방법은 완전히 window.foo();
foo(); // "apple"
// 객체를 사용자 정의하고 객체의 속성 foo를 전역 함수 foo
var pack = {
fruit에 지정합니다. : "orange",
foo : foo
};
// 이때 foo 함수에서는 window.pack 객체를 가리킵니다.
pack.foo() // "orange"
전역 함수 적용 및 호출을 사용하여 함수에서 this 속성의 지정을 다음과 같이 변경할 수 있습니다.
// 전역 함수 정의
function foo() {
console.log(this.fruit)
}
// 전역 변수 정의
var Fruit = "apple" ;
// 개체 사용자 정의
var pack = {
fruit: "orange"
};
// window.foo()와 동일;
foo.apply (window); // "apple"
// foo === pack
foo.apply(pack); // "orange"
참고: 두 함수는 apply 와 call 은 동일한 함수를 가집니다. 유일한 차이점은 두 함수의 매개변수가 다르게 정의된다는 것입니다.
자바스크립트에서는 함수도 객체이기 때문에 다음과 같은 흥미로운 예를 볼 수 있습니다.
// 전역 함수 정의
function foo() {
if (this === window) {
console.log("this is window.") ;
}
}
// foo 함수도 객체이므로 foo의 boo 속성을 함수로 정의할 수 있습니다.
foo.boo = function() {
if ( this === foo) {
console.log("이것은 foo입니다.");
} else if (this === window) {
console.log("이것은 창입니다.") ;
}
};
// window.foo()와 동일
foo(); // 이것은 함수 포인트에서 볼 수 있습니다. 호출 함수의 객체
foo.boo(); // foo입니다.
// 함수에서 this의 포인터를 변경하려면 Apply를 사용하세요.
foo.boo.apply(window); //창입니다.