Question

每个人都知道javascript中的this，但在野外也遇到了self的实例，例如here

那么，JavaScript中this和self之间的区别是什么？

Answer 1

除非在其他位置设置，否则self的值为window，因为 JavaScript 允许您访问x的任何属性window，只需x 1}}，而不是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

您可以在W3C 2006 working draft for the Window Object here中找到window.self。

Answer 2

虽然我在这里已经很晚了但是我遇到了一个例子，它也有助于进一步理解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将是未定义的。

Answer 3

对此稍加补充，因为人们可能会在服务人员的背景下遇到这种情况，在这种情况下，这意味着有所不同。

您可能会在Service Worker模块中看到它：

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

此处 self 是指WorkerGlobalScope，这是设置事件侦听器的标准方法。

来自Mozilla docs：

通过使用self，您可以以一种不仅在窗口上下文（self将解析为window.self）而且在worker上下文（self将解析为WorkerGlobalScope.self）中工作的方式引用全局范围。）。

Answer 4

对ECMA 5的引用需要澄清。

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

当控件进入包含在其中的功能代码的执行上下文时，将执行以下步骤函数对象F，调用方提供thisArg，调用方提供argumentsList：

如果功能代码是严格代码，请将ThisBinding设置为thisArg。

否则，如果thisArg为null或未定义，请将ThisBinding设置为全局对象。

否则，如果Type（thisArg）不是Object，则将ThisBinding设置为ToObject（thisArg）。

否则将ThisBinding设置为thisArg

...（与“ this”无关）

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

所以问题的答案是：

“此”始终指调用该功能的对象。如果该函数未由对象调用（即不是方法调用），则“ this”（传递给该函数）为“未定义”。但是，如果不使用严格模式，则会将未定义的“ this”设置为全局对象（上述规则2）。

“自身”没有特殊的句法含义，它只是一个标识符。浏览器倾向于定义window.self（仅是全局window对象的一个属性）= 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（并且在生成的封闭中仍然是myObject）。因此，在内部函数中，“ this”是指调用内部函数的对象，而“ self”是指调用外部函数以创建对内部函数的引用的对象。

总结总结的摘要，“ this”由语言标准定义，“ self”由定义它的人（运行时实现者或最终程序员）定义。

Answer 5

在全局范围（浏览器环境）中找到“窗口”，“自我”和“此”控制台输出的某些组合，以查看其引用位置。

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

JavaScript中的this和self之间的区别

5 个答案: