자바스크립트 '이것'을 순식간에!

JavaScript의 this는 처음에 이해하기 가장 혼란스러운 개념 중 하나일 수 있습니다. this 를 이해하려면 단 하나의 규칙만 기억하십시오. 네, 단 하나의 규칙입니다. 아래의 두 가지 시나리오를 고려하십시오.

function person() {
    console.log(this === global)
}

person(); //true

var person = {
    getPerson: function() {
        console.log(this === person);
    }
}

person.getPerson(); //true

첫 번째 스니펫에서는 함수가 직접 호출됩니다. 이 경우 항상 컨텍스트(this)가 전역으로 설정됩니다. (브라우저에서는 창입니다).

두 번째 스니펫에서 함수는 객체에서 호출됩니다. 이 경우this는 개체 자체입니다.

따라서 규칙은 "객체를 생성하지 않고 직접 호출되는 경우 this는 전역 컨텍스트와 같고, 함수가 객체를 생성하여 호출되면 this는 호출하는 객체의 컨텍스트와 같습니다."입니다.

이 규칙을 따르면 다른 행동을 매우 쉽게 이해할 수 있습니다. JavaScript에서는 메소드를 호출하는 다른 방법이 있습니다. call 및 apply는 객체와 인수를 명시적으로 지정하여 메서드를 호출하는 데 사용됩니다. 이 두 가지 모두 제공된 개체를 기반으로 컨텍스트를 변경할 수 있습니다. 다시 단수 법칙을 적용합니다. 메서드의 컨텍스트는 메서드를 호출하는 개체에 따라 다릅니다. 아래 스니펫은 이 동작을 보여줍니다. (참고: 호출 및 적용은 인수가 전달되는 방식에 따라 다릅니다)

var person = {
    getPerson: function() {
        console.log(this.name);
    }
}

var jack = {
    name: "jack"
}

person.getPerson.call(jack); //jack, reason: even though the method is called from person object, jack object is given as the argument in call function explicitly, therefore it binds to jack object. 

person.getPerson(); //undefined, reason: person object doesn't have name in it's context

아래 스니펫에서 person.getPerson.call(jack); 및 person.getPerson();는 두 개의 출력을 제공합니다.

var person = {
    name: "nancy",
    getPerson: function() {
        console.log(this.name);
    }
}

var jack = {
    name: "jack"
}

person.getPerson.call(jack); //jack

person.getPerson(); //nancy, reason: as method is called from the object and it has a name in it's context.

위의 모든 시나리오를 고려할 때 처음에 설정한 단일 규칙으로 귀결됩니다.