Javascript/Coffeescript 中关于 this/@ 的谜题

Question

我正在阅读 Trevor Burnham 的 CoffeeScript 书，并且遇到了一个关于 this/@ 的奇怪难题。这个谜题有几个部分（我可能很困惑），所以我会尽力把它说清楚。

我遇到的主要问题是，通过不同的 REPL 和解释器运行相同代码会得到不同且不一致的结果。我正在使用 (1) Coffee REPL 和解释器、(2) Node 的 REPL 和解释器以及 (3) v8 的 REPL 和解释器进行测试。

这是代码，首先是 Coffeescript，然后是 Javascript：

// coffeescript
setName = (name) -> @name = name

setName 'Lulu'
console.log name
console.log @name

// Javascript via the coffee compiler
(function() {
  var setName;
  setName = function(name) {
    return this.name = name;
  };
  setName('Lulu');
  // console.log for node below - print for v8
  // uncomment one or the other depending on what you're trying
  // console.log(name);
  // console.log(this.name);
  // print(name);
  // print(this.name);
}).call(this);

下面是结果：

$ coffee setName.coffee
Lulu
undefined

# coffee REPL
# This appears to be a bug in the REPL
# See https://github.com/jashkenas/coffee-script/issues/1444
coffee> setName = (name) -> @name = name
[Function]
coffee> setName 'Lulu'
'Lulu'
coffee> console.log name
ReferenceError: name is not defined
    at repl:2:1
    at Object.eval (/Users/telemachus/local/node-v0.4.8/lib/node_modules/coffee-script/lib/coffee-script.js:89:15)
    at Interface.<anonymous> (/Users/telemachus/local/node-v0.4.8/lib/node_modules/coffee-script/lib/repl.js:39:28)
    at Interface.emit (events.js:64:17)
    at Interface._onLine (readline.js:153:10)
    at Interface._line (readline.js:408:8)
    at Interface._ttyWrite (readline.js:585:14)
    at ReadStream.<anonymous> (readline.js:73:12)
    at ReadStream.emit (events.js:81:20)
    at ReadStream._emitKey (tty_posix.js:307:10)

coffee> console.log @name
undefined

$ v8 setName.js
Lulu
Lulu

# v8 REPL
>> (function(){var setName; setName=function(name){return this.name=name;};setName('Lulu');print(name);print(this.name);}).call(this);
Lulu
Lulu

# Switch print to console.log or require puts from sys
$ node setName.js
Lulu
undefined

# node REPL
> (function() {
...   var setName;
...   setName = function(name) {
...     return this.name = name;
...   };
...   setName('Lulu');
...    console.log(name);
...    console.log(this.name);
... }).call(this);
Lulu
Lulu

所以，我想真正的问题是（1）我应该期望什么结果以及（2）为什么这些解释器和 REPL 不能相处？ （我的理论是 v8 是正确的：在全局上下文中 name 和 this.name 应该是同一件事，我想。但我已经准备好了相信我不理解 Javascript 中的 this。）

编辑：如果我添加 this.name = null/@name = null 在调用 setName 之前（正如 Pointy 所建议的那样）下面）然后 Coffeescript 和 Node 给我返回“Lulu”和“null”，但 v8 仍然返回“Lulu”。 （v8 在这里对我来说仍然更有意义。我最初在全局上下文中将 name 设置为 null，但随后 setName 设置它（在全局上下文）到“Lulu”，所以之后，这就是我应该在那里看到的。）

Answer 1

因此，首先，CoffeeScript REPL 存在一个错误，问题 1444，在特勒马科斯引起我注意后我报告了这一情况。

但这里更有趣的问题（也是我需要在 我的 CoffeeScript 书 中注意的问题）是Node.js 模块最外层作用域中的 this 不是全局，而是该模块的导出。尝试一下：

console.log this is exports
console.log do -> this is global

当您在 Node 模块中运行该代码时，您会发现这两个语句的计算结果均为 true。这就是为什么 name 和 @name 计算结果不同：name 本身总是指向 global.name，除非它在 ​​var name 声明的范围内；但@name只会指向在global上下文（默认）中调用的函数中的global.name。在 Node.js 模块中，在任何函数之外，它将指向 exports.name。

Answer 2

我不知道为什么你会得到不同的结果，但我知道函数的调用隐式涉及设置 this。因此，内部函数“setName()”具有其自己的 this 值，独立于定义它的外部函数中的 this 值。因此，通过“.call()”调用设置 this 对内部“setName()”函数内的 this 值没有任何影响，因为当调用“setName()”时，不涉及接收者。

Answer 3

我对 CoffeeScript 不太了解，但对 JavaScript 知之甚少，所以我只能尝试从编译代码做什么（或应该做什么）的角度来解释这一点：

(function(){
  // In here "this" === [global]
  //
  // The purpose of this wrapper pattern is that it causes "this" to be
  // the global object but all var declared variables will still be 
  // scoped by the function.

  var ctx = this;     // let's keep test a ref to current context

  var setName;
  setName = function(name) {
    console.log(this === ctx);   // !! true !!

    // Because in here "this" is the global context/object
    // this is setting [global].name = name
    return this.name = name;
  };

  setName('Lulu');         // It's context will be [global]

  console.log(name);       // (name === [global].name) == true
  console.log(this.name);  // (this.name === [global].name) == true

}).call(this);

正在（或应该）发生的事情实际上是这样的（假设全局的浏览器是window）：

(function() {
  var setName;
  setName = function(name) {
    return window.name = name;
  };
  setName('Lulu');
  console.log(window.name);   // 'Lulu'
  console.log(window.name);   // 'Lulu'
}).call(this);

那么，为什么它在引擎之间不匹配呢？

因为不同的环境使用不同的方式将全局对象传递给您并处理作用域。很难肯定地说，每个环境的行为可能都有不同的原因。这在很大程度上取决于他们如何评估代码（假设所有引擎都没有错误）。