在JavaScript中，this和self之间的区别

19 浏览
0 Comments

在JavaScript中，this和self之间的区别

在JavaScript中，每个人都知道this，但也有一些self的实例，比如这里。那么，在JavaScript中this和self有什么区别呢？

0

3 答案

0 Comments

JavaScript中的this和self之间的区别

JavaScript中的this关键字用于引用当前执行代码的对象，而self是window.self的别名。除非另有设置，否则self的值为window。这是因为JavaScript允许您仅使用x而不是window.x访问window的任何属性。因此，self实际上是window.self，与this不同。

如果您在全局范围内执行的函数不在严格模式下，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年关于Window对象的工作草案中找到window.self的定义。

就完整性而言，在WebWorker的上下文中，当无法访问window时，self非常有用。使用self而不是window可以以便在不同环境中以可移植的方式访问全局对象。

0
0 Comments

在JavaScript中，this和self之间的区别是一个常见的问题。这个问题的出现是因为在ECMA 5之前，内部函数中的this指向全局的window对象；而在ECMA 5之后，内部函数中的this将变为undefined。

为了解决这个问题，我们可以使用箭头函数或者在内部函数外部将this赋值给一个变量self，并在内部函数中使用self代替this。箭头函数是更加清晰的解决方法。

下面是一个例子，可以帮助我们更好地理解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

从输出结果可以看出，外部函数中的this.foo和self.foo都能正确地输出，而内部函数中的this.foo则为undefined。这正是ECMA 5之前和之后this的区别所在。

总结起来，this在其上下文中始终是有定义的，undefined的是this.foo。为了实现在ECMA 5之前存在的行为，可以使用箭头函数，或者像上面的例子中所示，在内部函数外部将this赋值给self，并在内部函数中使用self代替this。这样做是为了确保在内部函数中能够正确地访问到外部函数的属性。

0
0 Comments

JavaScript中的this和self之间的区别

在JavaScript中，this和self是用来引用当前对象或函数的关键字。然而，在某些情况下，人们可能会在service worker的上下文中遇到这两个关键字，并且它们的含义略有不同。

在service worker模块中，你可能会看到以下代码：

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

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

根据Mozilla的文档：

“通过使用self，你可以以一种在window上下文中也有效的方式引用全局作用域（self将解析为window.self），同时在worker上下文中也可以（此时self将解析为WorkerGlobalScope.self）。”

谢谢！我一直在寻找这个答案 🙂

问题的出现原因：

该问题的出现原因是在service worker模块中使用了self关键字来设置事件监听器。由于self在这个上下文中的含义与普通的JavaScript上下文中的this关键字略有不同，因此有必要了解它们之间的区别。

解决方法：

要解决这个问题，需要明确self关键字在service worker上下文中的含义，以及在普通JavaScript上下文中使用this关键字的标准方法。根据Mozilla的文档，可以使用self来引用全局作用域，无论是在window上下文中还是在worker上下文中。

因此，在service worker模块中使用self关键字来设置事件监听器是正确的方法，而在其他JavaScript上下文中使用this关键字来设置事件监听器。

通过理解这两个关键字的区别和正确的使用方法，可以避免在使用service worker时出现混淆和错误。

0