了解JavaScript匿名函数中的“ this”

Question

在这个岗位 ，很多答案都在那里讨论this在JavaScript中的关键字。 但是，我仍然在anonymous function this感到困惑，如下所示

// MyModule.js
'use strict';
(function(handler) {
    // export methods
    handler.B = B;
    handler.A = A;

    function A() {
        console.log(this);
        console.log('function A is invoked...');
    }

    function B() {
        console.log(this);
        console.log('function B is invoked...');
        try {
            A();
            this.A();
        } catch (err) {
            console.log('Exception is ' + err);
        }
    }
})(module.exports);

// test.js
var myModule = require('MyModule.js');
myModule.B();

输出：（在Node.js下运行）

{ B: [Function: B], A: [Function: A] }
function B is invoked...

undefined
function A is invoked...

{ B: [Function: B], A: [Function: A] }
function A is invoked...

输出表明函数A在两个不同的范围内。 我对吗？ 为什么函数A有两个作用域？

众所周知， this与范围有关。 并且MyModule匿名函数中的this是undefined 。 根据输出，函数A的范围之一是undefined ，另一个是{ B: [Function: B], A: [Function: A] } 。 它们之间有什么区别？

Answer 1

this和范围几乎没有任何关系。 在JavaScript中， this通常是由设置的功能如何被调用 ，而不是在那里的定义。 （该规则有两个例外，我将在下面提及它们。）

所以，当你调用A ，你设置什么this将是调用（主要是隐含的）期间。 执行此操作时：

A();

......你调用A没有做任何明确的设置什么this是应该的; 其结果是，你是隐式调用它this设置为undefined ，因为你的代码是严格模式。 （如果它是松散的模式，你可以用它调用this设置为全局对象的引用。）这也是值得注意的是，你解决标识A经通过调用创建您的匿名函数的情况下，包含A和B作为（有效）变量。

但在这儿：

this.A();

...您正在调用A作为从对象属性获取函数引用的表达式的一部分（ A ；请注意，这对A是不同的含义，但是属性和上下文变量都引用同一函数）。 这样做的行为要求A与this设置为你从得到的属性的对象的引用。

这就是为什么你看到两个不同的值this在A 。

“ this是通过您的调用方式设置的”规则的例外情况是：

1. ES6的“箭头”的功能，它继承了this从他们创造文意 （未范围）。

2. ES5的“绑定”功能（调用的结果.bind上的功能参考），已经this被烤成他们.bind呼叫，所以总是看到相同的值this 。

Answer 2

通常， this函数在函数中绑定到调用该函数的对象。

在您的示例中：

• 您可以调用myModule.B() ， this等于myModule ，从输出中可以看到： { B: [Function: B], A: [Function: A] }
• 然后，在try块内调用不带对象的A() ， this是undefined因为您正在严格模式下运行，否则它将指向全局对象 ，该对象是浏览器中的window或节点中的global
• 最后，最后一个调用是this.A() ，这里您基本上是将当前的this （ myModule ）传递给函数，因此它将是myModule 。

整个this绑定仅受调用函数的方式影响。