22장 this

1. this : 메서드에서는 호출한 객체를 가리킴

this 는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수

클래스 기반 언어 this	자바스크립트 this
인스턴스	함수가 호출되는 방식에 따라 동적 결정

• 전역에서, 일반 함수내에서 : window 전역 객체 ---> this 를 일치시킬 방법은?
• 생성자 함수 내부: 인스턴스
• 메서드(객체의 프로퍼티가 함수)에서는 호출한 객체
• Function.prototype.apply/call/bind 메서드에 의한 간접 호출

//1. 전역 window
console.log(this); // window

//2. 생성자 함수 내부: 인스턴스
function Person(name) {
    this.name = name;
    console.log(this);
}
const me =new Person('Lee');

//3. 메서드(객체의 프로퍼티가 함수)에서는 객체
const person = {
    name: 'Lee',
    getName() { // 메서드(객체의 프로퍼티 값이 "함수")
        console.log(this); // 메서드에서 this 는 (메서드를 호출한) 객체
        return this.name; // person.name
    }
};
console.log(person.getName());

//4. 일반함수 내에서 fake
function square(number) {
    console.log(this); // window. 일반함수 square X
    return number * number;
}
square(2);

2. 함수 호출 방식과 this 바인딩

this 바인딩 : 동일한 함수라도, 함수 호출 시점에 함수 호출 방식에 따라 결정된다.

렉시컬 스코프 : 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프 기억.

1) 일반 함수 호출 : (중첩 함수나 콜백 함수의 this 를 메서드의 this 바인딩과 일치시키기)

메서드 내 중첩함수와 콜백 함수의 this 에는 전역 객체가 바인딩된다. -- > 메서드의 this 바인딩(호출한 객체)과 일치시키려면?

• foo 메서드의 this 바인딩 (obj) 를 that 에 할당한다.
• 콜백 함수에 .bind(this)로 직접 바인딩
• 화살표 함수 사용. (화살표 함수에서 this 는 상위 스코프의 this를 가리킨다.)

// 1 메서드의 this를 변수에 할당
var value = 1;

const obj = {
	value: 100,
    foo() {
    const that = this;
        setTimeout(function () {
    		console.log(that.value);
    	}, 100);
	}
};

obj.foo();

// 2. 콜백 함수에 bind(this) 사용
    foo() {
    	setTimeout(function () {
        	console.log(this.value);
        }.bind(this), 100);
    }


// 3. 화살표 함수 사용 (화살표 함수의 내부 this는 상위 스코프의 this)
foo() {
	setTiimeout(() => console.log(this.value), 100);
}

 

2) 메서드 호출: 메서드를 소유한 객체가 아니라, 호출한 객체에 바인딩

3) 생성자 함수 호출

4) Function.prototype.apply/call/bind 메서드에 의한 간접 호출

const Mike = {
	name: "Mike",
};

const tom = {
	name: "Tom",
};

function showThisName() {
	console.log(this.name);
}

function update(birthYear, occupation){
	this.birthYear = birthYear;
    this.occupation = occupation;
}
// 1. call
update.call(mike, 1999, "singer");
console.log(mike);
// 2. apply 는 매개변수를 배열로 받는다.