遮蔽 `this` - 词法名称解析答案

【问题标题】：Shadowing `this` - lexical name resolution遮蔽 `this` - 词法名称解析
【发布时间】：2016-03-10 20:53:55
【问题描述】：

编辑：我认为这不是重复的；它是一个隐藏参数，我想询问与this 相关的阴影和词法范围，已阅读this SO Q/A re。阴影。

我曾认为this 名称的含义可能会被动态解析（就范围而言），以解释为什么在我看来它没有被词法解析：

function foo() {return this;}
var a = {f: foo};
var b = {f: foo};

a.f() !== b.f();
a.f() !== foo();
a.f() !== window; //not strict mode

但后来我读到每个函数都会默默地接收this 作为附加参数。（我意识到箭头功能是不同的。）

显然helper() 并没有像我们希望的那样工作：

ob = {
  meth: function(){
    var helper = function() {return this;};
    return helper();
  }
};
ob.meth(); //Window or undefined

据我了解，不是this 通过查看封闭范围（结果为ob）来解决，而是解释器调用helper() 并将this 设置为undefined（严格模式），作为参数静默传递。

那么周围作用域的this 是否实际上是shadowed，因此词法作用域实际上在起作用？

【问题讨论】：

【解决方案1】：

你是对的。除了箭头函数，this 永远不会在词法上解析。它总是指以下之一：

调用函数的对象，例如valueOfThis.foo()
apply 或call 的第一个参数，例如foo.apply(valueOfThis, params) 或foo.call(valueOfThis, ...)。
DOM 元素，在事件处理程序的情况下，例如<button onclick="alert(this.tagName.toLowerCase());"/>
正在构造的对象，当函数用作构造函数时，例如Foo = function(){ ... }; new Foo()
绑定到函数的对象，如果函数是使用bind创建的，比如bar = function(){ ... this ...}; foo = bar.bind(valueOfThis); foo()
在getter/setter中，this指的是正在访问或设置属性的对象，例如valueOfThis.someProperty = 123
window（通常）如果以上都不是，例如foo()

@Bergi 在下面的 cmets 中为所有这些提供了 great reference。

在绑定函数的情况下，被调用的函数实际上是一个不同于传递给bind方法的函数，因为bind方法创建了一个新函数

【讨论】：

……或其他。您的清单并不详尽。
什么是 this: [1,2,3,4,5].filter(/./.test, /[02468]$/) 这里？ div.onclick() 也是。 setTimeout(that.method,0);也
@Bergi 你能告诉我我忘记了什么吗？
@dandavis 我在您的代码中没有看到对this 的引用。如果您要问this 在filter 函数中指的是什么，那么它将指的是数组
@GreenGiant: 仅仅因为你没有看到this 并不意味着它没有被方法使用...` 在所示的情况下，this 指的是 RegExp，而不是数组，因为[].filter 在回调中使用它的第二个参数作为this。

【解决方案2】：

那么周围作用域的 this 是否被有效地隐藏了，因此词法作用域实际上在起作用？

是的，可以从这个角度来看待它。绑定到helper 作用域的this 遮蔽了绑定到meth 作用域的那个。（如果你使用了箭头函数，它就不会）。

但是，你仍然需要记住this 不是一个普通的变量，而是一个特殊的关键字。它只绑定到函数作用域，不可写，它在草率模式下具有奇怪的强制对象语义，而且它总是隐式绑定 - 正如你所说，一个隐藏参数。

除非您试图了解 this 在箭头函数中的工作原理（及其词法解析），否则与作用域和阴影的类比是毫无用处的。

【讨论】：