JS：严格模式下函数上下文中的“this”，MDN 规范与 chrome 67 实现不匹配答案

【问题标题】：JS: "this" in function context in strict mode, MDN spec doesn't match chrome 67 implementationJS：严格模式下函数上下文中的“this”，MDN 规范与 chrome 67 实现不匹配
【发布时间】：2018-07-23 21:30:32
【问题描述】：

来自 MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this，它说：

然而，在严格模式下， this 的值保持在进入执行上下文时设置的任何值，因此，在以下情况下， this 将默认为 undefined：

function f2() {   
  'use strict'; // see strict mode   
  return this; 
}

f2() === undefined; // true

这表明如果我 (1) 'use strict'; (2) 在另一个函数中定义 f2，调用 f2 会为 f2 绑定外部函数的 this。但是！

没用……

'use strict';

function AlarmClock(clockName) {
  this.clockName=clockName;
}

console.log("hello, let's see some weird stuff");

console.log("THIS in global", this);

AlarmClock.prototype.start = function(seconds) {
  console.log('outer', this);
  var testInside = function() {
    console.log('inner', this);
  }
  testInside();
}

var clock = new AlarmClock("Horizons")
clock.start(1);


// WITHOUT CONSTRUCTORS

function withoutOut() {
  console.log("withoutOut", this)
  this.howard="notSoBad";
  console.log("modifiedTheThis, should have Howard", this)
  function withoutIn1() {
   console.log("withoutIn1", this);
   console.log("Strict should set to the defining object's this");
  }
  var withoutIn2 = function() {
    console.log("withoutIn2", this);
    console.log("Strict should set to the defining object's this");
  }
  withoutIn1();
  withoutIn2();
}

withoutOut.bind({Moose: "genius"})();

console.log("DONE");

给出这个输出：

hello, let's see some weird stuff
THIS in global {}
outer AlarmClock { clockName: 'Horizons' }
inner undefined
withoutOut { Moose: 'genius' }
modifiedTheThis, should have Howard { Moose: 'genius', howard: 'notSoBad' }
withoutIn1 undefined
Strict should set to the defining object's this
withoutIn2 undefined
Strict should set to the defining object's this
DONE

注意：我使用 node v10.5.0 从 mac osx 命令行运行此程序。

注意2：如果你在devtools中运行，你必须follow these steps for use strict.

NOTE3：基本上，我想找到某种方式来获得内部，withoutIn1 或 withoutIn2 不会被不确定。而且，我知道您可以通过显式绑定来执行此操作，但我想专门获取 MDN 文档中指定的行为。

如果您同意我的观点，MDN 应该将“this”文档更改为在“use strict”的函数上下文中，将其始终设置为未定义。（作者喜欢）

或者，Chrome 应该更改实现。（作者不喜欢）

【问题讨论】：

您真的误解了this 的工作原理。在 any 函数调用中没有明确的上下文（没有对象引用，没有使用 .call()、.apply() 或 .bind()）在严格模式下 this 的值确实是 @987654331 @。但是，在严格模式下，this 的工作方式与在存在调用上下文时的非严格模式下完全一样。
补充 Ry 所说的话，它根本不建议这样做。这就是说，如果您将其定义为对象的方法，则this 的值将是对象。它根本没有说明在另一个函数中定义一个函数。
您链接的 MDN 文档的第二段确实很清楚地说明了这一点。
这篇文章有令人困惑的措辞，但是“当进入执行上下文时，它的值保持不变”意味着this 的值与它的调用方式相比没有改变（例如f()/f.call(null)/f.call(undefined)/f.call(5) - 这些将导致this 值undefined/null/undefined/@5 在严格模式下，但@9876 、(global)、(global) 和 new Number(5) 外部 - 与调用相比，值已更改）。
是的，再次阅读引用的段落，我认为这要么是尴尬的单词选择，要么就是错误的； this 的值与其在调用环境中的值没有任何关系。（当然箭头函数是不同的，但是绑定值涉及到定义环境。）

标签： javascript function this executioncontext

【解决方案1】：

调用函数时this 的值与函数的定义方式或位置完全无关。它只与函数的调用方式有关。调用你的内部函数：

AlarmClock.prototype.start = function(seconds) {
  console.log('outer', this);
  var testInside = function() {
    console.log('inner', this);
  }
  testInside();
}

像testInside() 没有任何对象引用意味着没有任何东西可以绑定到this，在严格模式下这意味着this 是undefined。但是，如果你改写了

  testInside.call(this);

然后会有一个上下文值。同样，一个函数在另一个函数“内部”这一事实对this 的绑定方式完全没有影响。或者：

  this.testInside = testInside;
  this.testInside();

它也可以工作，因为又是一个上下文。

哦，另外，新的（ish）箭头函数机制确实让您可以创建从其词法环境有效“继承”this 值的函数。所以：

AlarmClock.prototype.start = function(seconds) {
  console.log('outer', this);
  var testInside = () => {
    console.log('inner', this);
  }
  testInside();
}

会起作用，因为调用箭头函数不涉及任何this 绑定； this 的行为本质上类似于闭包中的变量。

【讨论】：