JavaScript
컨텍스트 (this)

이 단순한 물건들로

var person = {
  name: 'John Doe',
  age: 42,
  gender: 'male',
  bio: function() {
    console.log('My name is ' + this.name);
  }
};
person.bio(); // logs "My name is John Doe"
var bio = person.bio;
bio(); // logs "My name is undefined"

위의 코드에서 person.bio 는 컨텍스트 ( this )를 사용합니다. 함수가 person.bio() 로 호출되면 컨텍스트가 자동으로 전달되므로 "My name is John Doe"가 올바르게 기록됩니다. 함수에 변수를 할당하면 컨텍스트가 손실됩니다.

비 엄격 모드에서 기본 컨텍스트는 전역 개체 ( window )입니다. 엄격 모드에서는 undefined .

중첩 된 함수 / 객체에서 사용하기 위해 저장

하나의 공통적 인 함정은 문맥을 잃어버린 중첩 된 함수 나 객체에서 this 사용하려고 시도하는 것입니다.

document.getElementById('myAJAXButton').onclick = function(){
    makeAJAXRequest(function(result){
      if (result) { // success
        this.className = 'success';
      }
    })
}

여기서 컨텍스트 ( this )는 내부 콜백 함수에서 손실됩니다. 이 문제를 해결하려면, 당신은의 값을 절약 할 수 있습니다 this 변수에 :

document.getElementById('myAJAXButton').onclick = function(){
    var self = this;
    makeAJAXRequest(function(result){
      if (result) { // success
        self.className = 'success';
      }
    })
}

document.getElementById('myAJAXButton').onclick = function(){
    makeAJAXRequest(result => {
      if (result) { // success
        this.className = 'success';
      }
    })
}

바인딩 함수 컨텍스트

var monitor = {
  threshold: 5,
  check: function(value) {
    if (value > this.threshold) {
      this.display("Value is too high!");
    }
  },
  display(message) {
    alert(message);
  }
};

monitor.check(7); // The value of `this` is implied by the method call syntax.


var badCheck = monitor.check;
badCheck(15); // The value of `this` is window object and this.threshold is undefined, so value > this.threshold is false

var check = monitor.check.bind(monitor);
check(15); // This value of `this` was explicitly bound, the function works.

var check8 = monitor.check.bind(monitor, 8);
check8(); // We also bound the argument to `8` here. It can't be re-specified.

견고한 바인딩

• 하드 바인딩 의 목적은 this 대한 참조를 "단단하게"연결하는 this 입니다.
• 장점 : 특정 객체가 손실되지 않도록 보호하고자 할 때 유용합니다.
• 예:

function Person(){
    console.log("I'm " + this.name);
}

var person0 = {name: "Stackoverflow"}
var person1 = {name: "John"};
var person2 = {name: "Doe"};
var person3 = {name: "Ala Eddine JEBALI"};

var origin = Person;
Person = function(){
    origin.call(person0);
}

Person();
//outputs: I'm Stackoverflow

Person.call(person1);
//outputs: I'm Stackoverflow


Person.apply(person2);
//outputs: I'm Stackoverflow


Person.call(person3);
//outputs: I'm Stackoverflow

• 위의 예에서 주목할 수 있듯이 Person 에게 전달하는 객체가 무엇이든 관계없이 항상 person0 객체가 사용됩니다. 단단한 바인딩 입니다.

이 생성자 함수

함수를 생성자 로 사용할 때 새로 만든 객체를 참조하는 특수한 바인딩 this .

function Cat(name) {
  this.name = name;
  this.sound = "Meow";
}

var cat = new Cat("Tom"); // is a Cat object
cat.sound; // Returns "Meow"

var cat2 = Cat("Tom"); // is undefined -- function got executed in global context
window.name; // "Tom"
cat2.name; // error! cannot access property of undefined