this 바인딩 정리

 

// this 는 어디서든지 참조 가능하다
// 전역에서 this 는 전역 객체 window 를 가리킨다
console.log(this); // window

function square(number){
    // 일반 함수 내부에서 this 는 전역객체 window를 가리킨다.
    console.log(this) // window;
    return number * number;
}
square(2);
// 전역 함수는 물론이고 중첩함수를 일반 함수로 호출하면 
// 내부의 this에는 전역 객체가 바인딩된다.
// 다만 this 는 객체의 프로퍼티나 메서드를 참조하기 위한 자기참조 변수이므로 
// 객체를 생성하지 않는 일반 함수에서 this 는 의미가 없다.
// strict 모드에서는 undefined가 바인딩된다...

const person = {
    name : 'Lee',
    getName() {
    	// 메서드 내부에서 this 는 메서드를 호출한 객체를 가리킨다.
        console.log(this); // {name : "Lee", getName: f}
        return this.name;
    }
};
console.log(person.getName()); // Lee

function Person(name) {
    this.name = name;
    // 생성자 함수 내부에서 this 는 생성자 함수가 생성할 인스턴스를 가리킨다.
    console.log(this); // Person {name: "Lee"}
}

const me = new Person('Lee');

 

 

// this 바인딩은 함수 호출 방식에 따라 동적으로 결정된다.
const foo = function () {
	console.log(this);
}

// 동일 함수도 다양한 방식으로 호출할 수 있다.

// 1. 일반 함수 호출
// foo 함수를 일반적인 방식으로 호출
// foo 함수 내부의 this 는 전역 객체 window 를 가리킨다.
foo(); // window

// 2. 메서드 호출
// foo 함수를 프로퍼티 값으로 할당하여 호출
// foo 함수 내부의 this 는 메서드를 호출한 객체 obj 를 가리킨다.
const obj = { foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
// foo 함수 new 연산자와 함께 생성자 함수로 호출
// foo 함수 내부의 this 는 생성자 함수가 생성한 인스턴스를 가리킨다.
new foo();

// 4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출
// foo 함수 내부의 this 는 인수에 의해 결정된다.
const bar = { name : 'bar' };

foo.call(bar);
foo.apply(bar);
foo.bind(bar);

 

콜백 함수가 일반 함수로 호출된다면 콜백 함수 내부의 this 에도 전역 객체가 바인딩된다.

어떠한 함수라도 일반 함수로 호출되면 this 에 전역 객체가 바인딩된다.

이처럼 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this 에는 전역 객체가 바인딩된다.

 

var value = 1;

const obj = {
    value : 100,
    foo () {
    	// 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.
        setTimeout(() => console.log(this.value), 100); // 100
    }
};

obj.foo();

 

apply, call, bind 로 this 를 명시적으로 바인딩 하거나,

화살표 함수를 사용해서 this 바인딩을 일치시킬 수 있다.

 

모던자바스크립트딥다이브_349p 

 

function getThisBinding() {
	return this;
{

// this 로 사용할 객체
const thisArg = { a : 1 };

// bind 메서드는 첫번째 인수로 전달한 thisArg 로 this 바인딩이 교체된
// getThisBinding 함수를 새롭게 생성해 반환한다.
console.log(getThisBinding.bind(thisArg)); // getThisBinding

// bind 메서드는 함수를 호출하지는 않으므로 명시적으로 호출해야 한다.
console.log(getThisBinding.bind(thisArg)()); // { a : 1 }

 

 

bind 메서드는 메서드의 this 와 메서드 내부의 중첩 함수 또는 콜백 함수의 this 가 불일치 하는 문제를 해결하기 위해 유용하게 사용된다.

 

const person = {
    name : "Lee",
    foo(callback) {
    	// 1
        setTimeout(callback, 100);
    }
};

person.foo(function () {
    console.log(`Hi my name is ${this.name}`);
    // 일반 함수로 호출된 콜백함수 내부의 this.name은 window.name과 같음
    // 브라우저 환경에서 window.name 은 브라우저창의 이름을 나타나는 빌트인
    // 프로퍼티 이며 기본값은 . 이다.
    // node.js 환경에서 this.name 은 undefined 이다.
});

 

 

따라서 콜백함수 내부의 this를 외부 함수 내부의 this와 일치시켜야 한다. 

이때 bind 메서드를 사용하여 this를 일치시킬 수 있다.

 

const person = {
    name : "Lee",
    foo(callback) {
    	// 1
        setTimeout(callback.bind(this), 100);
    }
};