请解释给定代码的输出

Question

代码如下：

  function a() {
    function makeWorker() {
        this.ename = "Pete";
        return function() {
            console.log(this);
            console.log(this.ename);
        };
    }


    var work = makeWorker();
    work();
}
 var ename = "John";
a();

this.name 输出到“Pete”。但是我在全局范围内定义了另一个变量 ename。那么为什么打印“Pete”而不是“John”呢？程序在非严格模式下运行。

Answer 1

如果a() 在没有this 的情况下被调用，那么makeWorker 在这里有点多余，所以让我们用它的作用替换对makeWorker 的调用：

function a() {
    this.ename = "Pete";
    var work = function() {
        console.log(this);
        console.log(this.ename);
    };
    work();
}

var ename = "John";
a();

并将对 work 的调用替换为它的作用：

function a() {
    this.ename = "Pete";
    console.log(this);
    console.log(this.ename);
}

var ename = "John";
a();

并用它所做的替换对a的调用，再次假设this是全局对象：

var ename = "John";
this.ename = "Pete";
console.log(this);
console.log(this.ename);

所以你将全局ename设置为"John"，然后设置为"Pete"，然后打印出来，结果是"Pete"。没什么奇怪的。当每个分配发生在原始代码中时，它可能会帮助您记录一些内容：

function a() {
    function makeWorker() {
        console.log("Setting ename to Pete");
        this.ename = "Pete";
        return function() {
            console.log(this.ename);
        };
    }

    var work = makeWorker();
    work();
}

console.log("Setting ename to John");
var ename = "John";
a();

Answer 2

看起来您正在执行 makeWorker，并且很简单地覆盖了变量 ename，并且您想要访问全局变量。

查看这篇文章。 How to access global variable in function hook in javascript?

Answer 3

在 JavaScript 中有几种不同的作用域。变量 ename 是在函数范围内创建的。要访问全局范围的变量，您必须以不同的方式调用它们。

https://www.w3schools.com/js/js_scope.asp