[JavaScript] this

728x90

this

JavaScript에서 함수의 this 키워드는 다른 언어와는 조금 다르게 동작한다.

strict mode 와 non-strict mode 에서도 일부 차이가 있다.

Syntax

this

Value

non-strict mode 에서는, 항상 객체를 참조한다.

strict mode 에서는, 어떤 값이든 될 수 있다. 값은 이것이 어디 context(함수, 클래스, 또는 전역)에 있는지에 따라 결정된다.

Global Context (전역 문맥)

전역 실행 맥락에서 this 는 엄격 모드 여부에 관계 없이 전역 객체를 참조한다.

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a);	// 37

this.b = "MDN";
console.log(window.b);	// "MDN"
cnosole.log(b);		// "MDN"

Function Context (함수 문맥)

함수 내부에서 this 는 함수를 호출한 방법에 의해 좌우된다.

단순 호출

다음은 엄격 모드가 아니고, this 의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window 인 전역 객체를 참조한다.

function f1() {
	return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

반면 엄격 모드에서, this 의 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로, undefined 로 남아있게 된다.

function f2() {
	"use strict"; // 엄격 모드 참고
    return this;
}

f2() === undefined; // true

this 의 값을 하나의 문맥에서 다른 문맥으로 넘기려면 다음 예시처럼 call() 이나 apply() 를 이용하도록 한다.

예시 1

// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
var obj = {a: 'Custom'};

// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
var a = 'Global';

function whatsThis() {
	return this.a;	// 함수 호출 방식에 따라 값이 달라짐
}

whatsThis();		// this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
whatsThis.call(obj);	// this는 'Custom'. 함수 내에서 obj로 설정한다.
whatsThis.apply(obj);	// this는 'Custom'. 함수 내에서 obj로 설정한다.

예시 2

function add(c, d) {
	return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 첫 번재 인자는 'this'로 사용할 객체이고,
// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
add.call(o, 5, 7);	// 16

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
add.apply(o, [10, 20]);	// 34

비엄격 모드에서 this 로 전달된 값이 객체가 아닌 경우, call 과 apply 는 이를 객체로 변환하기 위한 시도를 한다.

null 과 undefined 값은 전역 객체가 된다. 7 이나 'foo' 와 같은 원시값은 관련된 생성자를 사용해 객체로 변환되며, 따라서 원시 숫자 7 은 new Number(7) 에 의해 객체로 변환되고 문자열 'foo' 는 new String('foo') 에 의해 객체로 변환된다.

function bar() {

console.log(Object.prototype.toString.call(this));
}

bar.call(7);		//[object Number]
bar.call('foo');	//[object String]
bar.call(undefined);	//[object global]

bind 메서드

f.bind(someObject) 를 호출하면 f 와 같은 본문(코드)과 범위를 가졌지만 this는 원본 함수를 가진 새로운 함수를 생성한다.

새 함수의 this 는 호출 방식과 상관없이 영구적으로 bind() 의 첫 번째 매개변수로 고정된다.

function f() {
	return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

출처 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this