<script>
function func() {
console.log(this);
}
func();
console.log(this);
</script>
func()의 경우 undefined 출력, console.log(this)의 경우 global의 window객체 출력
암시적 바인딩
<script>
const obj = {
name: 'wtlee',
callName() {
console.log(this.name)
}
}
obj.callName(); // wtlee
</script>
- 암시적 바인딩에서 중요한 것은 메소드가 어디에 정의되어있는가가 아니라, 메소드를 "누가 호출하는가"이다.
<script>
const obj1 = {
name: 'wtlee',
callName() {
console.log(this.name)
}
}
const obj2 = {
name: 'wtlee2',
callName: obj1.callName,
}
obj2.callName() // obj2 객체 호출됨.
</script>
- 위의 예제와는 달리 obj2가 callName()을 호출하고 있다. 따라서 this는 obj2가 된다.
<script>
function sayName(a, b) {
console.log(this.name, a, b);
}
const obj = {
name: 'wtlee',
};
const bound = sayName.bind(obj, 1);
bound(2); // wtlee 1 2
</script>
- bind는 함수를 호출하지 않고 this를 바인딩하여 새로운 함수를 반환한다. 이 때, bind의 두 번째 인자부터는 바인딩된 함수의 인자로 들어간다. 위의 경우 bound는 sayName() 함수를 바인딩한 새로운 함수이다. bound를 호출하면 sayName() 함수가 호출되는데, 이 때 sayName() 함수의 첫 번째 인자는 1이고, 두 번째 인자는 bound를 호출할 때 넣어준 2가 된다.