[JS] 매우 복잡한 javascript에서의 this

 

 

 

 

 

 

 

 

자바스크립트에서의 this는 더욱 더 어렵다. 호출되는 방식, 함수가 속한 객체, 스코프와 실행되는 시점에 따라 다르게 동작한다.

또한, this의 동작 방식은 엄격모드와 비엄격모드에서도 다를 수 있다. 예를 들어, 엄격모드에서는 전역 컨텍스트에서 함수를 호출하면 this는 undefined가 된다. this를 사용할 때는 항상 문맥을 고려하여 사용해야 한다.

 

 

 

 

▶  암시적 바인딩

 

1) 전역 공간에서의 this

• node.js 환경에서의 this : global 객체
• 브라우저 환경에서의 this : window 객체

 

2) 함수에서의 this

• 전역 객체를 참조한다. 즉, 전역 공간에서의 this와 다르지 않다.
• 함수라고 해서 무조건 전역 공간을 가리키는 것은 아님.

 

3) 메서드에서의 this

• 함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용한다.
• 호출되는 대상의 객체를 가리킨다.

 

 

 

---

 

 

 

▶  명시적 바인딩

this가 사용자와 생각하는 것과는 다르게 예상치 못하게 동작을 하기 때문에, this를 좀 더 알아보기 쉽도록 바꿔주는 역할을 해준다.

this를 고정시켜 묶어놓고 사용할 수 있게 하는 함수들을 알아보자.

 

 

 

Function.prototype.call(명시적으로 조작하고 싶은 this의 대상, 원본의 함수가 받을 인자)

const person = {
	name: "지혜",
    sayName: function() {
    	return this.name + ' 입니다';
    },
};

const animal = {
	name: "누렁이",
    sayName: function() {
    	return this.name + ' 입니다';
    },
};

function sayFullName(firstName) {
	return firstName + this.sayName();
}


sayFullName.call(person, '정');		//정지혜 입니다.
sayFullName.call(animal, '핵');		//핵누렁이 입니다.

call의 첫번째 인자로 this가 명시적으로 바뀐다.

 

 

 

 

Function.prototype.apply()

call()과 똑같이 동작한다. 배열을 인자로 받을 수 있다.

 

 

Function.prototype.bind(명시적으로 조작하고 싶은 this의 대상)

const person = {
	name: "지혜",
    sayName: function() {
    	return this.name + ' 입니다';
    },
};

const animal = {
	name: "누렁이",
    sayName: function() {
    	return this.name + ' 입니다';
    },
};

function sayFullName(firstName) {
	return firstName + this.sayName();
}


sayFullNamePerson = sayFullName.bind(person);
sayFullNameAnimal = sayFullName.bind(animal);

console.log(sayFullNamePerson('정'));	//정지혜 입니다
console.log(sayFullNameAnimal('핵'));	//핵누렁이 입니다