바인딩(Binding)이란 함수 호출과 실제 함수를 연결하는 방법이다. 즉 함수를 호출하는 부분에 함수가 위치한 메모리 번지를 연결시켜 주는 것이다. 자바스크립트에서 함수를 호출 할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다. 이에 따라 this에 할당되는 값이 달라지게 되어 많은 개발자들이 혼돈을 겪게 된다. 지금부터 하나씩 알아보자
객체 내부의 함수를 메소드라고 부른다. 메소드 내부 코드에서 사용된 this는 해당 메소드를 호출한 객체로 바인딩 된다.
let myObject = {
name: 'foo',
sayName: () => {
console.log(this.name);
}
}
let otherObject = {
name: 'bar'
}
otherObject.sayName = myObject.sayName;
myObject.sayName(); // foo
otherObject.sayName(); // bar
함수를 호출할 경우는, 해당 함수 내부 코드에서 사용된 this는 전역 객체에 바인딩 된다. 브라우저에서 자바스크립트를 실행하는 경우 전역 객체는 window 객체다.
let test = 'This is test';
console.log(window.test); // 'This is test'
let sayFoo = () => {
console.log(this.test);
}
sayFoo(); // 'This is test'