js中“this”突然指向undefined，别担心，可能是因为"Reference type"

一个动态执行的方法可能会丢失this。

Reference type 解读 仔细看的话，我们可能注意到 obj.method() 语句中的两个操作：

首先，点 '.' 取了属性 obj.method 的值。 接着 () 执行了它。 那么，this 的信息是怎么从第一部分传递到第二部分的呢？

如果我们将这些操作放在不同的行，this 必定是会丢失的：

我们先来看看以下代码

'use strict'
let user = {
  name: "John",
  hi() { alert(this.name); }
}

// 把获取方法和调用方法拆成两行
let hi = user.hi;
hi(); // 报错了，因为 this 的值是 undefined

这里 hi = user.hi 把函数赋值给了一个变量，接下来在最后一行它是完全独立的，所以这里没有 this。

为确保 user.hi() 调用正常运行，JavaScript 玩了个小把戏 —— 点 . 返回的不是一个函数，而是一个特殊的 Reference Type 的值。

Reference Type 是 ECMA 中的一个“规范类型”。我们不能直接使用它，但它被用在 JavaScript 语言内部。

Reference Type 的值是一个三个值的组合 (base, name, strict)，其中：

• base 是对象。

• name 是属性名。

• strict 在 use strict 模式下为 true。

对属性 user.hi 访问的结果不是一个函数，而是一个 Reference Type 的值。对于 user.hi，在严格模式下是：

// Reference Type 的值

(user, "hi", true)

当 () 被在 Reference Type 上调用时，它们会接收到关于对象和对象的方法的完整信息，然后可以设置正确的 this（在此处 =user）。

Reference Type 是一个特殊的“中间人”内部类型，目的是从 . 传递信息给 () 调用。

任何例如赋值 hi = user.hi 等其他的操作，都会将 Reference Type 作为一个整体丢弃掉，而会取 user.hi（一个函数）的值并继续传递。所以任何后续操作都“丢失”了 this。

丢失原因

this 的值仅在函数直接被通过点符号 obj.method() 或方括号 obj['method']() 语法（此处它们作用相同）调用时才被正确传递 。

复习代码

let obj, method;

obj = {
  go: function() { alert(this); }
};

obj.go();               // (1) [object Object]

(obj.go)();             // (2) [object Object]

(method = obj.go)();    // (3) undefined

(obj.go || obj.stop)(); // (4) undefined

setTimeout(obj.go,1000);    //(5) [object Window]

如何避免this指向丢失

• 使用 bind()，如：修复上行代码(3)(method=obj.go.bind(obj))() //[object Object]
• 使用一个包装函数,如：修复上行代码(5) setTimeout(()=>obj.go(),1000) // [object Object]

总结

Reference Type 是一个 Specification Type，也就是 “只存在于规范里的抽象类型”。js 代码中存在的基本类型就只有 Undefined, Null, Boolean, String, Number，Symbol，BigInt 和 Object。（Array 其实是特殊的 Object）

读取一个属性，例如在 obj.method() 中，. 返回的准确来说不是属性的值，而是一个特殊的 “Reference Type” 值，其中储存着属性的值和它的来源对象。

这是为了随后的方法调用 () 获取来源对象，然后将 this 设为它。

对于所有其它操作，Reference Type 会自动变成属性的值（在我们这个情况下是一个函数）。

这整个机制对我们是不可见的。它仅在一些微妙的情况下才重要，例如使用表达式从对象动态地获取一个方法时。