자바스크립트의 이 키워드

JavaScript에서 가장 혼란스러운 키워드 중 하나는 this 키워드입니다. 모든 기능의 범위에서 자동으로 정의되는 특별한 식별자 키워드이지만, 그것이 정확히 무엇을 가리키는지 노련한 JavaScript 개발자들조차 혼란스럽게 합니다.

this 키워드는 함수 본문과 같은 코드 조각이 실행되어야 하는 컨텍스트를 나타냅니다. 가장 일반적으로 이는 객체 메소드에 사용됩니다. 여기서 이는 메소드가 첨부된 객체를 참조하므로 동일한 메소드를 다른 객체에서 재사용할 수 있습니다.

함수가 선언된 곳이 아닌 함수가 실행된 곳에서 this의 값을 확인할 수 있습니다

자바스크립트에서 이를 식별하기 위해 다양한 규칙을 검토할 것입니다

기본 바인딩

기본 규칙은 함수 호출의 가장 일반적인 경우인 독립 실행형 함수 실행을 적용합니다. 다른 규칙이 적용되지 않는 경우 이 규칙을 기본 포괄 규칙으로 생각하세요.

독립 실행형 함수 호출에서 이 값은 globalObject가 됩니다(브라우저 env에서는 창 객체이고, 노드 env에서는 전역입니다)

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

하지만......

이 값은 코드가 엄격 모드 또는 비엄격 모드에서 실행되는 방식에 따라 다를 수 있습니다

함수가 독립 실행형 함수로 호출될 때 일반적으로 비엄격 모드에서는 전역 객체를 참조하고 엄격 모드에서는 정의되지 않은 경우

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

미묘하지만 중요한 것은 bar()의 내용이 엄격 모드에서 실행되지 않는 경우에만 전역 객체가 기본 바인딩에 적합하다는 것입니다.

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

암시적 바인딩

객체의 메서드(obj.method())로 일반 함수가 호출되면 this는 해당 객체를 가리킵니다.

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

먼저 bar()가 선언된 다음 나중에 참조 속성으로 obj에 추가되는 방식에 주목하세요. foo()가 처음에 obj에 선언되었는지 아니면 나중에 참조로 추가되는지(이 스니펫에서 볼 수 있듯이) 관계없이 두 경우 모두 함수가 실제로 obj 객체에 의해 "소유"되거나 "포함"되지 않습니다.

암시적 손실:
콜백을 사용할 때 암시적으로 바인딩된 함수는 해당 바인딩을 잃습니다. 이는 일반적으로 엄격 모드에 따라 전역 개체 또는 정의되지 않은 기본 바인딩으로 폴백함을 의미합니다.

function bar() {
    setTimeout(function() {
        console.log(this) // this will be global object
    }, 1000);
}
const obj = {
    name: "javascript",
    bar
}
obj.bar() // this will be global object

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    bar
}
const a = obj.bar
a() // this will be global object

명시적 바인딩

방금 본 것처럼 암시적 바인딩을 사용하면 문제의 개체를 변경하여 함수 자체에 대한 참조를 포함하고 이 속성 함수 참조를 사용하여 이를 개체에 간접적으로(암시적으로) 바인딩해야 했습니다.

그러나 객체에 속성 함수 참조를 넣지 않고 이 바인딩에 특정 객체를 사용하도록 함수 호출을 강제로 수행하려면 어떻게 해야 할까요?

예, 가능합니다. 자바스크립트는 배열에 대해 .map, .filter와 같은 많은 메서드를 제공하지만 함수에는 메서드가 거의 없습니다. 적용, 호출 및 바인딩이 있습니다

이러한 메소드의 구문은 다음과 같습니다
전화

function bar() {
    console.log(this) // this will be global object (window)
}
bar()

신청

"use strict"
function bar() {
    console.log(this) // undefined
}
bar()

신청과 전화는 미묘한 차이가 있습니다. 구문은 동일하지만 적용 메소드에서 인수를 배열로 전달합니다

function bar() {
    console.log(this) // global object (window)
}
(function() {
    "use strict"
    bar()
})()

bar.call(..)에 의한 명시적 바인딩으로 bar를 호출하면 이를 obj로 강제할 수 있습니다.

새로운 바인딩

함수를 생성자로 사용하면(new 키워드 사용) 생성자 함수에 액세스하는 객체에 관계없이 생성되는 새 객체에 this가 바인딩됩니다. 생성자가 기본이 아닌 다른 값을 반환하지 않는 한 이 값은 새 표현식의 값이 됩니다.

function bar() {
    console.log(this)
}
const obj = {
    name: "javascript",
    foo
}
obj.foo() // this here is object owing the function

위 내용은 자바스크립트의 이 키워드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!