JavaScript에서 이것과 self의 차이점

모두가 this자바 스크립트에서 알고 있지만 여기self 와 같이 야생에서 발생하는 경우도 있습니다.

그래서, 차이 무엇 this과 self자바 스크립트는?

다른 곳으로 설정하지 않는 한,의 값 self입니다 window때문에 자바 스크립트 는 모든 속성에 액세스 할 수 x의를 window간단하게 x대신, window.x. 따라서, self정말 window.self서로 다른 인 this.

window.self === window; // true

전역 범위에서 실행되고 엄격 모드가 아닌 함수를 사용하는 경우 this기본값은 window이므로

function foo() {
    console.log(
        window.self === window, // is self window?
        window.self === this,   // is self this?
        this === window         // is this window?
    );
}
foo(); // true true true

다른 컨텍스트에서 함수를 사용하는 경우은 this해당 컨텍스트를 참조하지만 self여전히 window.

// invoke foo with context {}
foo.call({}); // true false false

여기 에서 Window 개체window.self 에 대한 W3C 2006 작업 초안에 정의 된 내용을 찾을 수 있습니다 .

사람들이 서비스 워커의 맥락에서 이것을 접할 수 있기 때문에 이것에 약간 추가되며,이 경우 약간 다른 것을 의미합니다.

서비스 워커 모듈에서 이것을 볼 수 있습니다.

self.addEventListener('install', function(e) {
  console.log('[ServiceWorker] Install');
});

여기서 self 는 WorkerGlobalScope를 나타내며 이는 이벤트 리스너를 설정하는 표준 방법입니다.

에서 모질라 문서 :

self를 사용하면 창 컨텍스트 (self는 window.self로 해석 됨)뿐만 아니라 작업자 컨텍스트에서도 작동하는 방식 (self는 WorkerGlobalScope.self로 해석 됨)에서 전역 범위를 참조 할 수 있습니다.

여기에 늦었지만 this더 이해하는 데 도움이 될 수있는 한 가지 예를 보았습니다 .

var myObject = {
 foo: "bar",
 func: function() {
    var self = this;
    console.log("outer func:  this.foo = " + this.foo);
    console.log("outer func:  self.foo = " + self.foo);
    (function() {
        console.log("inner func:  this.foo = " + this.foo);
        console.log("inner func:  self.foo = " + self.foo);
    }());
  }
};
myObject.func();

O / P

outer func:  this.foo = bar
outer func:  self.foo = bar
inner func:  this.foo = undefined
inner func:  self.foo = bar

ECMA 5 이전에는 this내부 함수에서 전역 창 개체를 참조했습니다. 반면 ECMA 5에서는 this내부 기능이 정의되지 않았습니다.

ECMA 5에 대한 참조는 명확히해야합니다.

ECMA-262 Edition 5를 의미한다고 가정합니다. ECMA-262 (일명 ECMAScript 또는 덜 정확하게는 Javascript)는 인터넷 브라우저에서 구현 된 일반적인 스크립팅 언어입니다 . Edition 5.1 표준에서 :

다음 단계는 제어가 함수 객체 F에 포함 된 함수 코드, thisArg를 제공 한 호출자 및 argumentsList를 제공 한 호출자에 대한 실행 컨텍스트에 들어갈 때 수행됩니다.

1. 함수 코드가 엄격한 코드 인 경우 ThisBinding을 thisArg로 설정합니다.
2. 그렇지 않으면 thisArg가 null이거나 정의되지 않은 경우 ThisBinding을 전역 개체로 설정합니다.
3. 그렇지 않으면 Type (thisArg)가 Object가 아닌 경우 ThisBinding을 ToObject (thisArg)로 설정합니다.
4. 그렇지 않으면 ThisBinding을 thisArg로 설정합니다.
5. ... ( "this"가 아님)

"전역 개체"라는 용어는 범위 체인의 맨 위에있는 개체를 가리 킵니다. 브라우저의 경우 이것은 "창"개체이지만 구현 선택 사항입니다 (Windows 스크립트 호스트에는 보이지 않는 전역 개체가 있지만 엄격 모드가 없으므로 한정되지 않은 참조가 해당 속성에 액세스하고 전역 "자체"가 없습니다). 또한 "엄격 모드"를 명시 적으로 활성화해야합니다. 그렇지 않으면 활성화되지 않습니다 (표준의 섹션 14.1). 따라서 정의되지 않은 "this"는 엄격 모드가 활성화되지 않은 "ECMA 5"의 전역 개체 (창)로 확인됩니다.

따라서 질문에 대한 답은 다음과 같습니다.

"this"는 항상 함수를 호출하는 객체를 나타냅니다. 함수가 객체에 의해 호출되지 않은 경우 (즉, 메서드 호출이 아님) "this"(함수에 전달됨)는 "정의되지 않음"입니다. 그러나 엄격 모드를 사용하지 않는 경우 정의되지 않은 "this"가 전역 객체로 설정됩니다 (위의 규칙 2).

"self"는 특별한 구문 의미가 없으며 단지 식별자 일뿐입니다. 브라우저는 window.self (전역 창 개체의 속성) = window를 정의하는 경향이 있습니다. 이로 인해 "self"가 둘러싸는 범위 내에서 재정의되지 않는 한 "self"에 대한 정규화되지 않은 참조가 "window"와 동일하게됩니다 (예 : 위의 "var self = this;"에 의해 재정의 됨. 행운을 빌어 "this"를 재정의 함).

따라서 위의 예에 대한 전체 설명은 다음과 같습니다.

outer func:  this.foo = bar
// "this" refers to the invoking object "myObject"
outer func:  self.foo = bar
// "self" resolves to the variable in the local scope which has been set to "this" so it is also "myObject"
inner func:  this.foo = undefined
// "this" refers to the invoking object (none) and so is replaced by the global object (strict mode must be off). "window" has no foo property so its "value" is undefined.
inner func:  self.foo = bar
// self resolves to the variable in the enclosing scope which is still "myObject"

예제의 흥미로운 변형은 내부 함수에 대한 참조를 반환하여 클로저를 만듭니다.

var myObject = {
 foo: "bar",
 func: function() {
    var self = this;
    console.log("outer func:  this.foo = " + this.foo);
    console.log("outer func:  self.foo = " + self.foo);
    return function() {
        console.log("inner func:  this.foo = " + this.foo);
        console.log("inner func:  self.foo = " + self.foo);
    };
  }
};
var yourObject = {
 foo: "blat",
 func: myObject.func() // function call not function object
};
console.log("----");
yourObject.func();

생산

outer func:  this.foo = bar
outer func:  self.foo = bar
----
inner func:  this.foo = blat
inner func:  self.foo = bar

yourObject가 호출 할 때까지 내부 함수가 어떻게 호출되지 않는지 확인하십시오. 따라서 this.foo는 이제 yourObject.foo이지만 self는 여전히 내부 함수 객체가 반환되었을 때 (그리고 결과 클로저에서는 여전히 myObject 인) 둘러싸는 범위의 변수로 확인됩니다. 따라서 내부 함수 내에서 "this"는 내부 함수를 호출하는 객체를, "self"는 내부 함수에 대한 참조를 생성하기 위해 외부 함수를 호출 한 객체를 나타냅니다.

요약 요약을 요약하면 "this"는 언어 표준에 의해 정의되고 "self"는 정의하는 사람 (런타임 구현 자 또는 최종 프로그래머)에 의해 정의됩니다.

전역 범위 (브라우저 환경)에서 'window', 'self'및 'this'콘솔 출력의 일부 조합을 아래에서 찾아 어디를 참조하는지 확인하십시오.

console.log( window ); // Window {…}
console.log( self );   // Window {…}
console.log( this );   // Window {…}

console.log( window.window ); // Window {…}
console.log( window.self );   // Window {…}
console.log( window.this );   // undefined  

console.log( self.self );     // Window {…}
console.log( self.window );   // Window {…}
console.log( self.this );     // undefined

console.log( this.this );     // undefined
console.log( this.window );   // Window {…}
console.log( this.self );     // Window {…}

console.log( window.window.window );    // Window {…}
console.log( self.self.self );          // Window {…}
console.log( window.self.window.self ); // Window {…}
console.log( self.window.self.window ); // Window {…}
console.log( this.this );               // undefined