자바스크립트에서 이것과 self의 차이점

자바스크립트에서 이것과 self의 차이점

모든 사람들이 알고 있습니다.thisjavascript로 하지만, 예들도 있습니다.self이곳과 같은 야생에서 마주친

그렇다면, 두 사람 사이의 차이점은 무엇일까요?this그리고.self자바스크립트로?

다른 곳에서 설정하지 않는 한, 값은self이다.window왜냐하면 자바스크립트는 당신이 어떠한 속성에도 접근할 수 있게 해주기 때문입니다.xwindow단순하게x, 대신에window.x.그러므로,self는 정말 입니다. 와 다릅니다.

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.selfW3C 2006 작업 초안에 정의되어 있습니다.

여기에 서비스 종사자의 상황에서 사람들이 이 문제를 마주칠 수 있기 때문에 이 문제에 약간 더하면 약간 다른 것을 의미합니다.

서비스 작업자 모듈에서는 다음과 같은 내용이 표시될 수 있습니다.

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

여기서 self는 WorkerGlobalScope를 의미하며, 이는 이벤트 수신기 설정을 위한 표준 방법입니다.

Mozilla 문서에서:

self를 사용하면 window 컨텍스트(self는 window.self로 확인)에서뿐만 아니라 worker 컨텍스트(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(일명 ECMA스크립트 또는 덜 정확하게는 자바스크립트)는 인터넷 브라우저에서 구현된 일반적인 스크립트 언어입니다.Edition 5.1 표준부터:

다음 단계는 컨트롤이 함수 개체 F에 포함된 함수 코드에 대한 실행 컨텍스트, 이 Arg를 제공한 호출자 및 호출자가 제공한 인수List를 입력할 때 수행됩니다.

1. 함수 코드가 엄격한 코드인 경우 ThisBinding을 이 Arg로 설정합니다.
2. 이 Arg가 null이거나 정의되지 않은 경우 ThisBinding을 글로벌 개체로 설정합니다.
3. Type(thisArg)이 Object가 아닌 경우 ThisBinding ToObject(thisArg)를 설정합니다.
4. 또는 ThisBinding을 ThisArg로 설정합니다.
5. ... ("이것"에 관한 것이 아님)

"글로벌 오브젝트"라는 용어는 스코프 체인의 상단에 있는 모든 오브젝트를 말합니다.브라우저의 경우 이 객체는 "윈도우" 객체이지만 구현 선택입니다(Windows Script Host에는 보이지 않는 전역 객체가 있지만 엄격한 모드는 없으므로 무자격 참조는 속성에 액세스하고 전역 "자체"는 없습니다).또한 "엄격 모드"를 명시적으로 활성화해야 합니다. 그렇지 않으면 활성화되지 않습니다(표준의 섹션 14.1).따라서 정의되지 않은 "이것"은 엄격한 모드가 활성화되지 않은 상태에서 "ECMA 5"의 전역 개체(창)로 여전히 해결됩니다.

그렇다면 이 질문에 대한 답은 다음과 같습니다.

"this"는 항상 함수를 호출하는 개체를 나타냅니다.함수가 개체에 의해 호출되지 않은 경우(메소드 호출이 아닌 경우), "이것"(함수에 전달된 것처럼)은 "정의되지 않은" 것입니다.그러나 엄격 모드를 사용하지 않는 경우 정의되지 않은 "이것"이 글로벌 개체로 설정됩니다(위의 규칙 2).

"self"는 특별한 통사적 의미가 없고 단지 식별자일 뿐입니다.브라우저는 창을 정의하는 경향이 있습니다.self(global window object의 속성일 뿐) = window.따라서 위의 "var self = this;"와 같이 "self"가 엔클로저 범위 내에서 재정의되지 않는 한 "self"가 "self"와 동일한 "self"를 의미하는 한정되지 않은 참조가 발생합니다."이것"을 재정의하는 행운을 빕니다.)

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

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

개체에서 호출하기 전까지 내부 함수가 호출되지 않는 방법을 기록합니다.그래서 이거.foo는 이제 당신의 개체입니다.foo 그러나 self는 내부 함수 객체가 반환될 때 myObject(내 개체)였던 엔클로저 범위의 변수로 여전히 해결됩니다.따라서 내부 함수 내에서 "이것"은 내부 함수를 부르는 개체를 가리키고, "자기"는 외부 함수를 불러 내부 함수를 가리키는 참조를 만드는 개체를 가리킵니다.

요약의 요약을 요약하면, "이것"은 언어 표준에 의해 정의되고, "자기"는 그것을 정의하는 사람(런타임 구현자 또는 엔드 프로그래머)에 의해 정의됩니다.

글로벌 스코프(브라우저 환경)에서 '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

언급URL : https://stackoverflow.com/questions/16875767/difference-between-this-and-self-in-javascript