this在方法赋值过程中无法保持（隐式丢失）

JS this绑定与全局作用域

最新推荐文章于 2023-05-16 17:25:23 发布

原创最新推荐文章于 2023-05-16 17:25:23 发布 · 381 阅读

0 ·

CC 4.0 BY-SA版权

在看《高级程序设计》（我的红宝书） P.183页时遇到下面一个问题

var name = "77";
var obj = {
  name: "88",
  getName: function () {
    return this.name;
  } 
};
(obj.getName = obj.getName)();  //返回全局变量 77

这个问题看起来好像有点奇葩，其实它可以从以下两个方面切入。

一、在于obj.getName = obj.getName这个赋值的问题。我们可以先看一下规范对 a = b; 的解释，它其实发生了四步操作：

计算表达式a，得到a的地址refa;
计算表达式b, 得到b的值valueb;
将valueb赋给refa。
返回valueb

从上面的赋值过程中我们可以看到 obj.getName = obj.getName 会返回第二个 obj.getName 所指向的函数表达式。

于是就可以将(obj.getName = obj.getName)()视作全局函数。这个问题便可以看做

var name = "77";
var obj = {
  name: "88",
  getName: function () {
    return this.name;
  } 
};
var fn = obj.getName;
fn();     //返回全局变量 77

二、this的值基于调用的位置

this是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用位置（也就是函数的调用方式）。S的解释器是怎么知道this到底指向谁的（排除掉call和apply改变this）?重点就在于这个 . 号，有了 . ，他就知道是谁在调用，自然就会把this指向这个调用者。而上面那种写法，就直接调用了一个函数，没有 .，他自然不知道this是谁，它在全局中被调用，所以默认就是window了。

所以在全局中调用函数的时候 this 指向window，所以他会返回 77，而不是88.