JavaScript에서 이 개체 이해하기(코드 예)

이 기사의 내용은 JavaScript(코드 예제)에서 이 개체에 대한 이해에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

서문: 최근 Javascript Advanced 프로그래밍을 주의 깊게 읽고 있는데, 중국어 버전의 번역이 여러 곳에 있어서 만족스럽지 못한 부분이 있어서 제가 이해하는 대로 해석하려고 노력합니다. 혹시 틀린 부분이나 누락된 부분이 있으면 지적해 주시면 정말 감사하겠습니다. 이 기사의 내용 대부분은 "JavaScript Advanced 프로그래밍, 제3판"에서 인용되었습니다.

이 객체는 런타임 시 함수 기반 실행 환경 바인딩입니다:

글로벌 환경에서는 window와 동일하며 함수가 an object , 이는 해당 개체를 가리킵니다.

그러나 익명 함수의 실행 환경은 전역이므로 이 개체는 일반적으로 창을 가리킵니다.

이 객체를 클로저에 사용하면 몇 가지 문제가 발생할 수 있습니다.

때로는 클로저 작성 방식으로 인해 이것이 명확하지 않을 수도 있습니다.

// 在全局环境中，this等于window
function thisBoundForWindow(){
    console.log(this);
    console.log(this.name);
}
thisBoundForWindow(); // Window
var o = new Object();
o.name = "Shaw";
//当函数被作为某个对象的方法调用时，this就指向了那个对象。
thisBoundForWindow.apply(o); // {name: "Shaw"}; "Shaw" ;

//在闭包中使用this对象可能会导致一些问题。
//有时候由于编写闭包的方式不同，这一点可能不会那么明显。
var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function() {
        return function() {
            console.log(this.name);
        }
    }
}
object.getNameFunc()(); // "The Window"
/*
object.getNameFunc return=> function() {
        return function() {
            console.log(this.name);
        }
    }  => ()调用，还是在全局环境下调用的，所以this.name = window.name => "The Window"
*/

위 코드는 먼저 전역 변수 name을 생성한 다음 name 속성을 포함하는 객체를 생성합니다.

이 객체에는 익명 함수를 반환하는 getNameFunc() 메서드도 포함되어 있으며 익명 함수는 this.name을 반환합니다.

“클로저”의 정의를 검토해 보겠습니다.

다른 범위의 변수에 액세스할 수 있는 함수가 클로저입니다.

getNameFunc()가 함수를 반환하므로 object.getNameFunc()()를 호출하면 반환된 함수가 호출되고 결과적으로 콘솔에 문자가 인쇄됩니다.

그러나 이 예에서 반환된 문자는 전역 이름 변수의 값인 "The Window"입니다.

그럼, 예시에서 이것을 객체를 가리키는 방법은 무엇일까요?

이 객체를 클로저가 접근할 수 있는 변수에 외부 스코프에 저장하여 클로저가 객체에 접근할 수 있도록 합니다. (이 방법은 콜백 함수를 사용할 때도 자주 사용된다는 점에 유의하세요.)

var name = "The Window";
var object = {
    name: "My Object",
    getNameFunc: function(){
        var that = this;
        return function() {
            console.log(that.name);
        }
    }
}
object.getNameFunc()(); // "My Object"
/*
// 伪代码过程
object.getNameFunc  execute
=> this = object = that 
=>function() {console.log(that.name);}  
=> ()
=> that.name = object.name 
=> "My Object" 
*/

익명 함수를 정의하기 전에 this 개체를 that이라는 변수에 할당하세요.

클로저를 정의한 후 클로저도 이 변수에 액세스할 수 있습니다. 왜냐하면 이 변수는 포함 함수에서 특별히 선언한 변수이기 때문입니다.

함수가 반환된 후에도 여전히 객체를 참조하므로 Object.getNameFunc()를 호출하면 "My Object"가 반환됩니다.

몇 가지 특수한 상황에서 이 값이 예기치 않게 변경될 수 있습니다. 예를 들어 다음 코드는 이전 예제의 결과를 수정합니다.

var name = "The Window";
var object = {
    name: "My Object",
    getName: function() {
        console.log(this.name);
    }
};
object.getName(); // "My Object"
(object.getName)(); // "My Object"
(object.getName = object.getName)(); // "The Window"

코드의 첫 번째 줄은 평소대로 object.getName()을 호출하고 this.name이 object.name이기 때문에 "My Object"를 반환합니다.

코드의 두 번째 줄은 이 메서드를 호출하기 전에 괄호를 추가합니다. 괄호를 추가한 후에는 함수를 참조하는 것처럼 보이지만 object.getName 및 ( object.getName)은 동일합니다.

코드의 세 번째 줄은 먼저 할당문을 실행한 다음 할당 결과를 호출합니다. 대입식은 함수 자체이기 때문에 this의 값은 유지되지 않고 "The Window"가 반환됩니다.

//第三个例子伪代码
//理解此段代码，首先要明确一个知识点：赋值语句是有返回值的，返回值就是所赋的值（也就是‘=’右边的值）。

(object.getName = object.getName)(); // "The Window"

(object.getName = function(){ console.log(this.name)})();

(function(){console.log(this.name)})();
//所以this指向window

물론 이 메서드를 코드의 두 번째, 세 번째 줄처럼 부르지는 않을 것입니다. 당분간 이해하지 못해도 괜찮습니다. 이 예는 구문의 미묘한 변화라도 실수로 this의 값을 변경할 수 있음을 설명하는 데 도움이 됩니다.

위 내용은 JavaScript에서 이 개체 이해하기(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!