JavaScript에서 이것에 대한 완전한 가이드

JavaScript에서 모든 함수에는 this선언 할 때 자동으로 생성 되는 참조 가 있습니다.

자바 스크립트 thisthis자바 또는 C #과 같은 다른 클래스 기반 언어 의 참조 와 매우 유사합니다 (자바 스크립트는 프로토 타입 기반 언어이며 "클래스"개념 없음). 함수를 호출하는 객체를 가리 킵니다 (이 객체는 같은 맥락 ). 자바 스크립트에서는, 그러나, 함수 내부 기준 함수가 호출되는 위치에 따라 다른 개체에 결합 될 수있다 .this

다음은 this자바 스크립트 바인딩에 대한 5 가지 기본 규칙입니다 .

규칙 1

함수가 전역 범위에서 호출되면 this참조는 기본적으로 전역 개체 ( window브라우저 또는 globalNode.js)에 바인딩됩니다 . 예를 들면 :

function foo() { this.a = 2; } foo(); console.log(a); // 2

참고 : 선언하면 foo()엄격 모드에서 위의 기능을, 다음, 전역 범위에서이 함수를 호출 this될 것입니다 undefined및 할당이 this.a = 2발생합니다 Uncaught TypeError예외.

규칙 2

아래 예를 살펴 보겠습니다.

function foo() { this.a = 2; } const obj = { foo: foo }; obj.foo(); console.log(obj.a); // 2

분명히 위의 스 니펫에서 foo()함수는 컨텍스트obj객체이고 this참조가 obj. 따라서 컨텍스트 개체와 함께 함수를 호출하면 this참조가이 개체에 바인딩됩니다.

규칙 3

.call, .apply그리고 .bind명시 적으로 바인딩하기 위해 호출 사이트에서 모두 사용할 수 있습니다 this. 사용 .bind(this)은 많은 React 컴포넌트에서 볼 수있는 것입니다.

const foo = function() { console.log(this.bar) } foo.call({ bar: 1 }) // 1

다음은 각각을 바인딩하는 데 사용되는 간단한 예입니다 this.

  • .call(): fn.call(thisObj, fnParam1, fnParam2)
  • .apply(): fn.apply(thisObj, [fnParam1, fnParam2])
  • .bind(): const newFn = fn.bind(thisObj, fnParam1, fnParam2)

규칙 4

function Point2D(x, y) { this.x = x; this.y = y; } const p1 = new Point2D(1, 2); console.log(p1.x); // 1 console.log(p1.y); // 2

주목해야 할 것은 키워드로 Point2D호출 되는 함수 new이며 this참조는 p1객체에 바인딩됩니다 . 따라서 new키워드 로 함수를 호출 하면 새 객체가 생성되고 this참조가이 객체에 바인딩됩니다.

참고 : new키워드 로 함수를 호출 할 때이를 생성자 함수 라고도 합니다 .

규칙 5

JavaScript this는 현재 컨텍스트를 기반으로 런타임시 의 값을 결정합니다 . 그래서 this때때로 당신이 기대하는 것과 다른 것을 가리킬 수 있습니다.

makeSound()생성자 함수와 new키워드가 있는 규칙 4 (위)의 패턴에 따라 라는 메서드가있는 Cat 클래스의이 예제를 고려하십시오 .

const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.makeSound(); // Fat Daddy says: Mrrooowww

이제 반초 annoy()에 한 번씩 그의 소리를 100 번 반복 하여 고양이에게 사람들에게 길을 줍시다 .

const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; this.annoy = function() { let count = 0, max = 100; const t = setInterval(function() { this.makeSound(); // <-- this line fails with `this.makeSound is not a function` count++; if (count === max) { clearTimeout(t); } }, 500); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.annoy();

setInterval콜백 내에서 전역 범위로 새 컨텍스트를 만들었 기 때문에 작동하지 않으므로 this더 이상 kitty 인스턴스를 가리 키지 않습니다. 웹 브라우저에서는 this대신 makeSound()메서드 가없는 Window 개체를 가리 킵니다 .

작동하는 몇 가지 방법 :

  1. 새 컨텍스트를 만들기 전에 , 또는 this라는 이름의 로컬 변수 me또는 self호출하려는 변수에 할당 하고 콜백 내에서 해당 변수를 사용합니다.
const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; this.annoy = function() { let count = 0, max = 100; const self = this; const t = setInterval(function() { self.makeSound(); count++; if (count === max) { clearTimeout(t); } }, 500); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.annoy();
  1. ES6를 this사용하면 this정의 된 주변 코드의 컨텍스트에 바인딩되는 화살표 함수를 사용하여 지역 변수에 할당하는 것을 피할 수 있습니다 .
const Cat = function(name, sound) { this.name = name; this.sound = sound; this.makeSound = function() { console.log( this.name + ' says: ' + this.sound ); }; this.annoy = function() { let count = 0, max = 100; const t = setInterval(() => { this.makeSound(); count++; if (count === max) { clearTimeout(t); } }, 500); }; } const kitty = new Cat('Fat Daddy', 'Mrrooowww'); kitty.annoy();