22日 九月 2020

Reference Type

深入的语言特性

本文所讲的是一个高阶主题,能帮你更好地理解一些边缘情况。

这仅是锦上添花。许多经验丰富的的开发者不甚了了也过得不错。如果你想了解代码运行的本质,那就继续读下去吧。

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

例如:

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

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

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

在最后一行有个在 user.hiuser.bye 中做选择的条件(三元)运算符。当前情形下的结果是 user.hi

接着该方法被通过 () 立刻调用。但是并不能正常工作!

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

这样是能工作的(对象.方法):

user.hi();

这就无法工作了(被评估的方法):

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

为什么呢?欲知缘何,且让我们深入 obj.method() 调用运行的本质。

Reference type 解读

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

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

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

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

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 是属性名。
  • strictuse 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']() 语法(此处它们作用相同)调用时才被正确传递。在本教程的后续章节,我们会学习多种解决这个问题的方式,例如 func.bind()

总结

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

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

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

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

这整个机理对我们是不可见的。它仅在一些微妙的情形下才重要,例如一个方法是通过表达式从对象动态获取的。

任务

重要程度: 2

这段代码的结果是什么?

let user = {
  name: "John",
  go: function() { alert(this.name) }
}

(user.go)()

提示:有一个陷阱哦 :)

错误!

试一下:

let user = {
  name: "John",
  go: function() { alert(this.name) }
}

(user.go)() // error!

大多数浏览器中的错误信息并不能说明是什么出现了问题。

出现此错误是因为在 user = {...} 后面漏了一个分号。

JavaScript 不会在括号 (user.go)() 前自动插入分号,所以解析的代码如下:

let user = { go:... }(user.go)()

然后我们还可以看到,这样的联合表达式在语法上是将对象 { go: ... } 作为参数为 (user.go) 的函数。这发生在 let user 的同一行上,因此 user 对象是甚至还没有被定义,因此出现了错误。

如果我们插入该分号,一切都变得正常:

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

(user.go)() // John

要注意的是,(user.go) 外边这层括号在这没有任何作用。通常用它们来设置操作的顺序,但在这里点符号 . 总是会先执行,所以并没有什么影响。分号是唯一重要的。

重要程度: 3

在下面的代码中,我们试图连续调用 obj.go() 方法 4 次。

但是前两次和后两次调用的结果不同,为什么呢?

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

这里是解析。

  1. 它是一个常规的方法调用。

  2. 同样,括号没有改变执行的顺序,点符号总是先执行。

  3. 这里我们有一个更复杂的 (expression).method() 调用。这个调用就像被分成了两行(代码)一样:

    f = obj.go; // 计算函数表达式
    f();        // 调用

这里的 f() 是作为一个没有(设定)this 的函数执行的。

  1. (3) 相类似,在点符号 . 的左边也有一个表达式。

要解释 (3)(4) 得到这种结果的原因,我们需要回顾一下属性访问器(点符号或方括号)返回的是引用类型的值。

除了方法调用之外的任何操作(如赋值 =||),都会把它转换为一个不包含允许设置 this 信息的普通值。

教程路线图

评论

在评论之前先阅读本内容…
  • 如果你发现教程有错误,或者有其他需要修改和提升的地方 — 请 提交一个 GitHub issue 或 pull request,而不是在这评论。
  • 如果你对教程的内容有不理解的地方 — 请详细说明。
  • 使用 <code> 标签插入只有几个词的代码,插入多行代码可以使用 <pre> 标签,对于超过 10 行的代码,建议你使用沙箱(plnkrJSBincodepen…)