javascript - JavaScript 中 this 和 self 的区别

Question

在javascript中大家都知道this，但是在野外也有self遇到的实例，比如这里

this那么，JavaScript和selfJavaScript有什么区别呢？

Answer 1

除非在其他地方设置，否则 的值self是window因为JavaScript允许您简单地访问 的任何属性x，而不是. 因此，是真的，这与 不同。windowxwindow.xselfwindow.selfthis

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.self找到在W3C 2006 工作草案中定义的窗口对象 。

Answer 2

对此稍加补充，因为人们可能会在服务工作者的上下文中遇到这种情况，在这种情况下，它的含义略有不同。

您可能会在 service worker 模块中看到这一点：

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

这里self指的是 WorkerGlobalScope，这是设置事件监听器的标准方法。

来自Mozilla 文档：

通过使用 self，您可以引用全局范围，这种方式不仅适用于窗口上下文（self 将解析为 window.self），也适用于 worker 上下文（self 将解析为 WorkerGlobalScope.self）。

Answer 3

虽然我在这里迟到了，但我遇到了一个例子，它也有助于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();

输出/输出

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内部函数将是未定义的。

Answer 4

对 ECMA 5 的引用需要澄清。

我假设它的意思是 ECMA-262 第 5 版。应该注意的是，ECMA-262（又名 ECMAScript，或者更准确地说是 Javascript）是一种已在 Internet 浏览器中实现的通用脚本语言。从 5.1 版标准：

当控制进入函数对象 F 中包含的函数代码的执行上下文、调用者提供 thisArg 和调用者提供 argumentsList 时，将执行以下步骤：

1. 如果函数代码是严格代码，则将 ThisBinding 设置为 thisArg。
2. 否则，如果 thisArg 为 null 或未定义，则将 ThisBinding 设置为全局对象。
3. 否则，如果 Type(thisArg) 不是 Object，则将 ThisBinding 设置为 ToObject(thisArg)。
4. 否则将 ThisBinding 设置为 thisArg
5. ...（不是关于“这个”）

术语“全局对象”是指位于作用域链顶部的任何对象。对于浏览器，这将是“窗口”对象，但这是一个实现选择（Windows 脚本宿主有一个不可见的全局对象，但没有严格模式，因此不合格的引用访问它的属性并且没有全局“自我”）。此外，必须明确启用“严格模式”，否则它不会处于活动状态（标准的第 14.1 节）。因此，未定义的“this”仍将解析为“ECMA 5”中的全局​​对象（窗口），严格模式未激活。

所以这个问题的答案是：

“this”总是指调用函数的对象。如果函数没有被对象调用（即不是方法调用），那么“this”（传递给函数）是“未定义的”。但是，如果不使用严格模式，则未定义的“this”将设置为全局对象（上面的规则 2）。

“self”没有特殊的句法含义，它只是一个标识符。浏览器倾向于定义window.self（只是全局window对象的一个​​属性）=window.self。这会导致对“self”的非限定引用与“window”相同，除非“self”已在封闭范围内重新定义（例如通过上面的“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”由定义它的人（运行时实现者或最终程序员）定义。

Answer 5

在下面找到全局范围（浏览器环境）中“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