티스토리 뷰
공부 시작하며
자바스크립트에서의 자기 자신을 가리킬 수 있는 this는 사용하는 방식에 따라 가리키는 대상이 다릅니다.
그 원리와 어떠한 상황에서 어떻게 동작하는지 알아보기 위해서 공부를 하게 되었습니다.
책 모던 자바스크립트 Deep Dive를 통해서 공부하였습니다.
자기 자신을 참조할 수 있는 객체(object)
다음 원의 반지름과 지름의 정보를 담고 있는 circle 객체가 있습니다,
const circle = {
radius: 5,
getDiameter() {
// 자기 자신인 circle을 참조하고 있습니다.
return 2 * circle.radius;
},
};
console.log(circle.getDiameter());
// 출력 : 10위의 circle 객체에서 지름을 반환하는 getDiameter() 함수는 radius 프로퍼티의 값에 2를 곱해서 지름을 구해야합니다.
이때 getDiameter에서 자기 자신인 circle과 radius 프로퍼티를 재귀적으로 참조할 수 있습니다.
객체 리터럴은 변수 선언문에 할당하기 직전에 평가되어 이미 객체가 생성되어서 위와 같이 자기 자신을 참조할 수 있는 것입니다. 하지만 이와 같이 자기 자신이 속한 객체를 재귀적으로 참조하는 방식은 권장되지 않습니다.
생성자 함수 방식으로 위와 같은 상황을 연출해보면 다음과 같이 생성자 함수를 정의하는 시점에서 인스턴스를 생성하기 이전이므로 참조할 식별자를 알수가 없습니다.
function Circle(radius) {
// 인스턴스가 생성되기 이전에는 참조할 식별자가 무엇인지 알 수 없습니다.
참조할식별자.radius = radius;
}
Circle.prototype.getDiameter = function () {
// 인스턴스가 생성되기 이전에는 참조할 식별자가 무엇인지 알 수 없습니다.
return 2 * 참조할식별자.radius;
};
// 다음과 같이 new로 인스턴스를 생성하기 이전에는 식별자를 가리킬 수가 없습니다.
const circle = new Circle(5);이때와 같은 상황을 위해서 자바스크립트는 this라는 식별자를 제공해주고 있습니다.
this
this 바인딩
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-referencing variable)입니다.
this는 자바스크립트에 엔진에 의해서 암묵적으로 생성이되고, 어디서든 참조가 가능합니다.
그리고 호출 방식에 의해서 this가 가리키는 값이 다르게되며, this 바인딩(this binding)이라고 합니다
위에서 자기 자신을 참조한 circle을 this를 사용해서 바꿔봅니다.
아래와 같은 객체 리터럴의 메서드 내부에서 사용된 this는 메서드를 호출한 객체를 가리킵니다.
const circle = {
radius: 5,
getDiameter() {
// 자기 자신을 참조했던 circle대신 this를 사용합니다.
return 2 * this.radius;
},
};
console.log(circle.getDiameter());
// 출력 : 10위에서 말한 것과 같이 호출 방식에 의해서 this가 가리키는 값은 다음과 같은 상황에서 다를 수 있습니다.
new 생성자를 통해 생성할 함수는 생성할 인스턴스를 가리킵니다.
function Circle(radius) {
// this 는 생성자 함수가 생성할 인스턴스를 가리킵니다.
this.radius = radius;
}
Circle.prototype.getDiameter = function () {
// this 는 생성자 함수가 생성할 인스턴스를 가리킵니다.
return 2 * this.radius;
};
// 다음에 생성된 인스턴스를 가리킵니다.
const circle = new Circle(5);
console.log(circle.getDiameter());
// 출력 : 10
strict mode인 "use strict"를 사용한다면 this를 사용하는데 영향을 줍니다.
strict mode를 사용하면 함수의 호출 방식에 따라서 this에는 undefined가 바인딩됩니다.
일반 함수내에서는 this를 사용할 필요가 없다고 자바스크립트 엔진이 판단하기 때문입니다.
이와 관련된 strict mode 글은 이곳을 참고하시면 됩니다.
함수 호출 방식에 따른 this 바인딩
렉시컬 스코프 vs this 바인딩 시기
렉시컬 스코프는 함수의 정의에 따라서 상위 스코프를 결정하는데, 반면 this 바인딩은 호출된 시점에 결정합니다. 함수가 정의된에 따라 this가 가리키는 값이 결정되는 것이 아닌 함수가 호출된 방식과 시점에 따라 값이 결정된다는 말입니다.
this는 동일한 함수도 다양한 방식으로 호출할 수 있으며, 호출 방식에 따라서 this 바인딩이 달라질 수 있어 주의가 필요합니다. ( 이와 같은 일관성이 없는 상황이 발생할 수 있어 자바스크립트는 strict mode를 통해 함수 내부에 this를 사용하게되면 undefined를 바인딩하는듯? 합니다. )
함수가 호출되는 방식
함수가 호출되는 방식은 다음과 같은 상황이 있을 수 있습니다.
- 일반 함수 호출
- 메서드 호출
- 생성자 함수 호출
- Function.prototype.apply/call/bind 메서드에 의한 간접 호출
다음 예시로 위의 호출 방식과 this를 연관 지은 결과를 확인해봅니다.
1. 일반 함수 호출
일반 함수를 호출 할 때의 this는 window 전역 객체를 가리킵니다.
// 선언된 함수
const foo = function () {
console.dir(this);
// 출력 : WIndow (전역 객체)
};
// 일반 함수 호출
foo();다음과 같은 중첩 함수(nested function)를 통한 일반 함수 호출도 this는 window가 바인딩 됩니다.
this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 이와 같은 일반 함수에서는 this가 의미가 없습니다. 위에서 언급했던 것과 같이 strict mode 가 적용된 일반 함수의 내부 this는 undefined 가 바인딩됩니다.
function foo() {
console.log("foo", this);
// 출력 : window 전역 객체
function bar() {
"use strict";
console.log("bar", this);
// 출력 : undefined
}
bar();
}
foo();
다음과 같이 일반 함수의 호출의 this 모두 window를 가리키게 되며 객체 내부에서 호출된 중첩 함수와 콜백 함수도 예외가 될 수 없습니다.
아래의 예시에서는 전역에 var 변수를 선언해줘서 window에 해당 변수의 이름으로 프로퍼티를 참조할 수 있도록 되어있습니다. 이 때에 객체 안에도 참조할 수 있는 동일한 이름의 프로퍼티가 있지만 중첩 함수 호출과 콜백 함수를 통해서 호출한 this는 전역의 window객체를 바라봅니다.
var value = 1;
const obj = {
value: 1000,
foo() {
// 이 경우 this는 호출된 메서드 obj를 가리킵니다.
console.log(this.value);
// 출력 : 1000
function bar() {
// 객체 내부에서 this를 참조하여도
// 예외없이 전역을 바라보고 전역 var에 의해 선언된 값 value 가 참조되었습니다.
console.log(this.value);
// 출력 : 1
}
bar();
// setTimeout에서도 일반 함수로 호출되면 this는 window 전역 객체를 바라봅니다.
setTimeout(function () {
console.log(this.value);
// 출력 : 1
}, 10);
},
};
obj.foo();
왜 setTimeout 메서드에 전달한 콜백 함수의 this도 전역 window객체를 바라보고 있는걸까요?
이는 setTimeout와 같은 메서드의 콜백 함수는 외부 함수의 로직이 동작하는 것을 도와주기 때문에 외부 함수인 메서드와 콜백 함수의 this가 일치하지 않으면 콜백 함수를 헬퍼 함수로써 동작하는데 어렵게 만들수 있으므로 콜백 함수의 this는 전역 window 객체를 바라봅니다.
일반 함수의 호출을 호출한 메서드의 this 바인딩과 일치 시키는 방법
콜백 함수나 중첩 함수가 this를 호출한 메서드의 this 바인딩과 일치하기 위해서는 다음과 같은 방법이 있습니다.
- this를 변수에 할당해서 사용하는 방법
var value = 1;
const obj = {
value: 1000,
foo() {
console.log(this.value);
// 출력 : 1000
// that 변수에 this를 할당하고 함수의 내부에선 this 대신
// that을 참조하여 this 바인딩을 일치 시켰습니다.
const that = this;
function bar() {
console.log(that.value);
}
bar();
// 출력 : 1000
setTimeout(function () {
console.log(that.value);
// 출력 : 1000
}, 10);
},
};
obj.foo();
- this를 명시적으로 바인딩할 수 있는 Function.prototype.apply/call/bind 메서드를 사용하는 방법
var value = 1;
const obj = {
value: 1000,
foo() {
console.log(this.value);
// 출력 : 1000
function bar() {
console.log(this.value);
}
bar();
// 출력 : 1
// bind를 통해 this를 호출된 메서드의 this와 일치시켰습니다.
bar.bind(this)();
// 출력 : 1000
setTimeout(
function () {
console.log(this.value);
// 출력 : 1000
}.bind(this),
10
);
},
};
obj.foo();
- 화살표 함수를 사용함으로 this 바인딩을 일치시키는 방법
var value = 1;
const obj = {
value: 1000,
foo() {
console.log(this.value);
// 출력 : 1000
// 화살표 함수를 사용하면 상위의 foo의 this 바인딩과 일치시킬 수 있습니다.
setTimeout(() => {
console.log(that.value);
// 출력 : 1000
}, 10);
},
};
obj.foo();
2. 메서드 호출
선언된 함수를 객체의 프로퍼티 값으로 할당한 후 메서드로써 호출하면 this는 호출한 객체를 가리킵니다.
// 선언된 함수
const foo = function () {
console.dir(this);
// 출력 : 선언된 obj 객체를 바라봅니다
};
// 메서드 호출
const obj = { foo };
obj.foo();
- 호출한 객체의 this 바인딩
메서드를 호출할땐 메서드 이름의 앞에 호출한 객체가 바인딩이 됩니다.
this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩이 된다는 말입니다.
const person = {
name: "Kim",
getName() {
return this.name;
},
};
// 아래에서 getName 메서드를 호출한 객체는 person입니다.
console.log(person.getName());
// 출력 : Kim
- 중첩된 객체인 경우의 this 바인딩
그럼 호출한 객체에 바인딩이 된다고 했으면 다음과 같은 상황은 어떨까요?
위에서 언급했던 설명대로 호출한 메서드의 객체에 this가 바인딩이 됩니다.
const person = {
inform: {
name: "Kim",
age: 20,
},
get: {
name() {
console.log(this);
// 출력 : get 객체를 가리키고 있습니다.
// 다음 구절에 나오는 age 메서드를 참조할 수 있게 됩니다.
return this.inform.name;
},
age() {
// ....?
},
},
};
// 아래에서 name 메서드를 호출한 객체는 get 입니다.
console.log(person.get.name());
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')
- 중첩된 화살표 함수와 일반 함수 호출
다음 예시와 같이 객체의 메서드 내부에 화살표 함수와 일반 함수가 중첩 함수로써 실행이 되고 있습니다.
화살표 함수는 상위의 호출한 객체에 this 바인딩이 되고, 일반 함수는 window 전역 객체를 가리킵니다.
const person = {
name: "Kim",
getName() {
(() => {
console.log(this);
// 화살표 함수는 상위의 호출한 객체 person을 가리킵니다.
(() => {
console.log(this);
// 화살표 함수는 상위의 호출한 객체 person을 가리킵니다.
(function () {
console.log(this);
// 일반 함수 호출에 의해서 window 전역 객체를 가리킵니다.
})();
})();
})();
},
};
person.getName();
- 다른 객체의 프로퍼티에 메서드를 할당
프로퍼티의 메서드를 다른 객체의 프로퍼티에 할당하면 할당하기 이전의 this 바인딩의 값을 참조하는 것이 아닌 할당 된 객체가 메서드를 호출하면 호출한 객체에 this 바인딩이 됩니다. getName 프로퍼티에 할당된 함수는 그저 일반 함수일 뿐입니다. 각 일반 함수의 this는 호출할 객체에 따라 this 바인딩이 결정됩니다.
const person = {
name: "Lee",
getName() {
return this.name;
},
};
const anotherPerson = {
name: "Kim",
};
// persone 객체의 getName 메서드를 anotherPerson 객체에 할당
anotherPerson.getName = person.getName;
// anotherPerson 객체의 getName 메서드를 호출하면
// 호출한 객체에 this 바인딩에 의해 Kim이 출력됩니다.
console.log(anotherPerson.getName());
// 출력 : Kim
- 변수에 할당하여 일반 함수로 호출
변수에 객체의 메서드 자체를 할당하고 일반 함수로 호출하면 아래 예제와 같이 person 객체에 의해서 호출된 메서드가 이제는 변수로써 일반 함수로써 호출되어 window 전역 객체를 바라보게 됩니다. 이와 같은 현상을 통해서 다시 한번 this에 바인딩 될 객체는 호출 시점에 동적으로 결정이 된다는 것을 알 수 있습니다.
const person = {
name: "Lee",
getName() {
console.log(this);
// 출력 : window 전역 객체
return this.name;
},
};
const getName = person.getName;
console.log(getName());
// 출력 : 빈 값이 출력이 됩니다.
// 호출한 객체를 가리키는 this 바인딩에 의해서 window 전역 객체를 바라보고
// this.name이 window 전역 객체에 name 프로퍼티를 참조합니다.
// 브라우저 환경에서의 window의 name 프로퍼티는 브라우저 창의 이름을 나타내는 프로퍼티입니다.
const foo = {
bar() {
console.log(getName());
// 위의 경우와 출력되는 결과가 같습니다.
},
};
foo.bar();
- 프로토타입을 통한 this 바인딩
다음 예제는 함수 내부에 this를 통해 프로퍼티를 생성하고, prototype으로 getName 프로퍼티를 할당해주었습니다. 그리고 new 생성자를 통해 생성한 인스턴스를 변수에 할당하고 그 변수에서 메서드를 접근했을때 나오는 결과를 설명합니다.
new 생성자를 통해서 생성된 me 변수에 있는 getName 메서드를 호출하면 getName 메서드는 호출한 me를 가리키며 this는 me의 name을 바라보게 됩니다.
function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name;
};
const me = new Person("Lee");
console.log(me.getName());
// 출력 : Lee
다음과 같이 prototype을 통해 프로퍼티의 값을 할당하는 경우에도 바라보는 객체가 Person.prototype 이므로 호출한 this가 Person.prototype을 바라봐 할당한 name의 값을 참조하게 됩니다.
function Person(name) {
this.name = name;
}
Person.prototype.getName = function () {
return this.name;
};
Person.prototype.name = "Wow";
console.log(Person.prototype.getName());
3. 생성자 함수 호출
생성자 함수로 호출하면 this는 메서드 호출 할 때와 비슷하게 생성된 인스턴스를 가리킵니다.
// 선언된 함수
const foo = function () {
console.dir(this);
// 출력 : 생성자 합수로 생성된 인스턴스를 가리킵니다.
};
// 생성자 함수 호출
new foo();
- 일반 함수의 this, 생성자와 일반 함수로 호출 했을때 차이점
다음의 예제는 함수 내부에 this를 통해 프로퍼티로 값을 할당 했을때 new 를 통한 인스턴스 생성과 일반 함수의 다르게 동작하는 예시를 볼 수 있습니다.
함수를 new 생성자를 통해 인스턴스를 생성하면 this는 생성된 인스턴스를 가리키고, 일반 함수로써 호출하게 되면 함수 내부에서 this를 통해 선언하였던 radius 값이 window 전역 객체에 프로퍼티로 들어간것을 확인할 수 있습니다.
function Circle(radius) {
this.radius = radius;
this.getDiameter = function () {
return 2 * this.radius;
};
}
// 생성자를 호출하는 시점에 this가 바인딩되어 생성된 인스턴스를 바라보게 됩니다.
// 생성된 인스턴스도 객체이므로 circle1을 통해 생성된 객체를 통해
// 메서드를 호출하면 circle1을 가리키게되며 this 바인딩이 됩니다.
const circle1 = new Circle(5);
const circle2 = new Circle(10);
console.log(circle1.getDiameter());
// 출력 : 10
console.log(circle2.getDiameter());
// 출력 : 20
// 생성자 함수로 인스턴스를 할당하지 않은 변수는 객체가 아니므로
// 호출 할때 일반 함수로써 호출이 됩니다.
const circle3 = Circle(15);
// 일반 함수로써 호출이 되어 undefined가 반환됩니다.
console.log(circle3);
// 출력 : undefined
// 일반 함수 호출의 this는 window 전역 객체를 가리킵니다.
console.log(radius);
// 출력 : 15
4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
함수의 apply, call, bind 메서드에 의해서 호출된 this는 인수에 의해서 가리키는 대상이 결정됩니다.
// 선언된 함수
const foo = function () {
console.dir(this);
// 출력 : 각 메서드에 의한 인수에 의해서 결정됩니다.
};
// Function.prototype.apply/call/bind 메서드에 의한 간접 호출
const bar = { name: "this where" };
foo.call(bar); // 이곳에서 호출된 this => bar
const bar2 = { age: 12 };
foo.apply(bar2); // 이곳에서 호출된 this => bar2
const bar3 = { email: "email@email.com" };
foo.bind(bar)(); // 이곳에서 호출된 this => bar3
Function.prototype.apply/call 메서드
Function.prototype에는 apply, call, bind 메서드를 가지고 있습니다.
여기서 apply와 call 메서드는 this로 사용할 객체와 인수 리스트를 인수로 전달 받아서 함수로 호출합니다.
function getThisBinding() {
return this;
}
const thisArg = { a: 1 };
// 일반 함수 호출하여 this는 window 전역 객체를 가리키고 있습니다.
console.log(getThisBinding());
// 출력 : window 전역 객체
// apply 메서드에 넘긴 인자 값이 this 바인딩됩니다.
console.log(getThisBinding.apply(thisArg));
// 출력 : {a: 1}
// call 메서드에 넘긴 인자 값이 this 바인딩됩니다.
console.log(getThisBinding.call(thisArg));
// 출력 : {a: 1}위의 경우에서는 apply와 call에 인수를 전달하지 않고 호출하였습니다.
짧게 apply와 call에 넣을 수 있는 인수에 대해서 알아보겠습니다.
apply/call 의 인수
첫번째 인수는 호출된 함수의 this가 바라보게 될 대상을 넘기고 그 뒤에는 인수를 넘기게 됩니다.
* apply 와 call이 다른점은 apply이 받는 인수는 단일 배열 또는 유사 객체로된 인수를 받는 반면 call은 함수로 전달될 인수 리스트를 받습니다.
// 단일 배열 또는 유사 객체를 받는 apply
Function.prototype.apply(thisArg, [argsArray]);
// 인수 리스트를 받는 call
Function.prototype.call(thisArg, [, arg1[, arg2[, ...]]]);
위의 인수를 전달하여 함수를 호출하면 함수에서는 arguments 객체를 받을 수 있게 됩니다.
function getThisBinding() {
console.log(arguments);
return this;
}
const thisArg = { a: 1 };
console.log(getThisBinding.apply(thisArg, [1, 2, 3, 4]));
// 호출된 함수의 arguments의 값
// 출력 : Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// return을 통해 출력된 값
// 출력 : {a: 1}
console.log(getThisBinding.call(thisArg, 1, 2, 3, 4));
// 호출된 함수의 arguments의 값
// 출력 : Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// return을 통해 출력된 값
// 출력 : {a: 1}
apply 와 call을 사용하는 경우에는 arguments 객체와 같은 유사 배열 객체에 배열 메서드를 사용해야 할때 사용합니다.
arguments 객체는 배열이 아니라서 배열의 메서드를 사용할 수 없습니다.
이때 apply와 call을 사용하면 유사 배열 객체에 배열 메서드를 사용할 수 있습니다.
아래의 함수는 인자를 넘기면 arguments를 통해서 배열로 변환해주는 함수입니다.
일반적인 Array prototype의 slice 메소드를 사용하여 받은 인자를 잘라서 배열로 만들 수 없습니다.
apply 또는 call 메서드를 사용하면 가능합니다.
function convertArgsToArray() {
console.log(arguments);
// 출력 : Arguments(4) [1, 2, 3, 4, callee: ƒ, Symbol(Symbol.iterator): ƒ]
const notWorking = Array.prototype.slice(arguments);
console.log("notWorking: ", notWorking);
// 출력 : []
const arr = Array.prototype.slice.call(arguments);
// apply 를 사용해도 됩니다.
console.log(arr);
// 출력 : [1, 2, 3, 4]
return arr;
}
convertArgsToArray(1, 2, 3, 4);이와 비슷한 DOM 요소를 DOM API를 가져오고 가져온 DOM 유사 리스트를 순환하여 참조할 때에도 사용할 수 있습니다.
아래의 경우에서는 li 태그 이름을 가진 HTML 요소를 불러오고 배열 순환 메서드인 map을 통해 하나하나 조회하려 했지만, TypeError가 발생했습니다.
이 경우에는 call 메서드를 사용하면 해결이 가능한데요. Array.prototype의 메서드인 slice와 call을 사용하면 위에서 다뤘던 예제와 같이 HTMLCollection이였던 유사 배열 객체를 배열 메서드를 활용해서 다룰 수 있습니다.
const liEls = document.getElementsByTagName("li");
console.log("liEls: ", liEls);
// 출력 : HTMLCollection(3) [li, li, li]
liEls.map((item) => {
console.log(item);
// Uncaught TypeError: liEls.map is not a function
});
Array.prototype.slice.call(liEls).map((item) => {
console.log(item);
// 받아온 대로 출력 : <li>...content</li>
});
- Function.prototype.bind 메서드
bind 메서드는 apply와 call 메서드와는 다르게 호출하지 않고 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해서 반환합니다.
아래의 예제에서 호출하지 않고 새롭게 생성하고 반환다는 말이 무슨 뜻인지 살펴봅니다.
bind 메서드에 인자를 넘기면 호출하지 않고 넘긴 인자가 this로 된 함수를 새롭게 생성해서 반환합니다.
그리고 반환된 함수를 실행해야 비로소 호출됩니다.
function getThisBinding() {
return this;
}
const thisArg = { a: 1 };
// apply와 call 과 다르게 bind는 함수를 호출하지 않습니다.
console.log(getThisBinding.bind(thisArg));
/* 출력 :
ƒ getThisBinding() {
return this;
}
*/
// bind 메서드로 새롭게 생성된 함수를 호출하는 모습
console.log(getThisBinding.bind(thisArg)());
// 출력 : {a : 1}
// bind메서드로 새롭게 생성된 함수를 변수에 할당하고 호출하는 모습
const bindedFunction = getThisBinding.bind(thisArg);
console.log(bindedFunction());
// 출력 : {a : 1}
- 중첩 함수또는 콜백 함수를 객체 메서드 this와 일치 시키기
bind 메서드는 객체의 메서드 this와 메서드 내부의 중첩 함수 또는 콜백 함수의 this를 일치 시키기 위해서 사용합니다.
다음 예제는 객체 내부의 메서드에서 setTimeout 메서드를 사용하고 콜백 함수를 인자로 받아서 메서드에 넘겨주어 실행시켜주고있습니다. 이 경우 콜백 함수로써 일반 함수가 호출되기 때문에 this는 전역 객체인 window를 바라보고 있습니다.
const person = {
name: "Lee",
consoleTimeout(callback) {
setTimeout(callback, 100);
},
};
person.consoleTimeout(function () {
// 이 경우 this는 setTimeout의 내부에서 콜백 함수로 호출되어
// this는 window 전역 객체를 바라보게됩니다.
// 브라우저 환경의 window에 name 프로퍼티는
// 브라우저 창의 이름을 나타내며 기본값은 '' 빈 문자열이므로
// my name is 이후의 값은 빈 문자열로 나옵니다.
console.log(`my name is ${this.name}`);
// 출력 : my name is ''
});
다음과 같이 bind 메서드를 사용해서 콜백 함수의 this 바인딩을 호출한 외부 메서드의 this 바인딩과 일치시켜 줄 수 있습니다.
const person = {
name: "Lee",
consoleTimeout(callback) {
// bind 메서드를 사용하면 호출한 외부의 this를 바인딩한
// 새로운 함수를 반환합니다.
setTimeout(callback.bind(this), 100);
},
};
person.consoleTimeout(function () {
console.log(`my name is ${this.name}`);
// 출력 : my name is Lee
});
지금까지 나온 함수 호출 방식에 따른 동적인 this 바인딩을 정리하자면 다음과 같습니다.
- 일반 함수 호출 : 전역 객체
- 메서드 호출 : 메서드를 호출한 객체
- 생성자 함수 호출 : 생성자 함수가 생성할 인스턴스
- Function.prototype.apply/call/bind 메서드에 의한 간접 호출
: 각 apply/call/bind 메서드에 첫번째 인수로 전달한 객체
정리해볼까요?
Q. 자바스크립트에서 this 란 무엇인가요?
A. 말 그대로 해석하면 "이것"인 this는 자신이 속한 객체 또는 인스턴스에서 자기 자신을 참조할 수 있는 자기 참조 변수입니다. 자기 참조는 함수 호출 방식에 의해서 동적으로 this 바인딩이 되며, this 바인딩이란 this가 가리키는 대상이 결정되는 것을 말합니다.
출처
책 : 모던 자바스크립트 Deep Dive
'웹 개발자 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 스코프 scope (0) | 2022.08.26 |
|---|---|
| [자바스크립트] 엄격 모드 strict mode 란? (0) | 2022.08.25 |
| [자바스크립트] var 을 통해 바라보는 let과 const 변수 선언문 (0) | 2022.08.19 |