likes
comments
collection
share

因为太怕痛就全点了“this”

作者站长头像
站长
· 阅读数 20

“我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第n篇文章,点击查看活动详情

如果你好奇在对象方法中的 this 为什么有时候会丢失?看看代码运行的本质吧。

当我们在用一些策略模式的时候,一个动态执行的方法调用可能会丢失 this。

比如说:

let user = {
  name: "John",
  hello() { alert(this.name); },
  bye() { alert("Bye"); }
};

user.hello(); // 正常运行

// 现在让我们基于 name 来选择调用 user.hi 或 user.bye
(user.name === "John" ? user.hello : user.bye)(); // Error!

可以看到最后一行的三元运算符中的情况 当 user.name === "John" 的时候结果就是 user.hello

然后方法通过 () 调用,但是缺报错了。

如你所见,此处调用导致了一个错误,因为在该调用中 "this" 的值变成了 undefined

✔️ 正常运行

user.hello(); // 正常运行

❌ 无法运行

(user.name === "John" ? user.hello : user.bye)(); // Error!

带着问题我们来学习一下obj.method()调用运行的本质。

拆解

仔细看的话,我们可能注意到 obj.method() 语句中的两个操作:

  1. 首先,点 '.' 取了属性 obj.method 的值。
  2. 接着 () 执行了它。

那么,this 的信息是怎么从第一部分传递到第二部分的呢?

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

let user = {
  name: "John",
  hello() { alert(this.name); }
};

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

原理

这里 hello = user.hello 把函数赋值给了一个变量,接下来在最后一行它是完全独立的,这里的 this 其实指向的是 window

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

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

Reference Type 的值是一个四个值的组合 (base, name, strict, value),其中:

  • base 是对象。
  • name 是属性名。
  • strict 在 use strict 模式下为 true。
  • value 是base中name的值

可以在ECMA规范中找到 因为太怕痛就全点了“this”

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

// Reference Type 的值
(user, "hi", true, function(){...})

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

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

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

因此,this 的值仅在函数直接被通过点符号 obj.method() 或方括号 obj['method']() 语法(此处它们作用相同)调用时才被正确传递。还有很多种解决这个问题的方式,例如 func.bind()

总结

Reference Type 是语言内部的一个类型。

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

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

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

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