JavaScript中的this和self之间的区别

Question

每个人都知道this在javascript中,但也有self在野外遇到的实例,如在这里

那么,JavaScript this和selfJavaScript 之间有什么区别？

Answer 1

除有其他地方的价值self是window因为的JavaScript可以访问任何财产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.self在定义为2006年W3C工作草案窗口对象 这里.

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

人们可能会在服务工作者的背景下遇到这种情况,这是一个轻微的补充,在这种情况下,它意味着略有不同.

您可能会在服务工作者模块中看到此信息:

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

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

来自Mozilla文档:

通过使用self,您可以以不仅在窗口上下文(self将解析为window.self)的方式中引用全局范围,而且还可以在工作者上下文中工作(self将解析为WorkerGlobalScope.self).