理解“这个"在 JavaScript 中的匿名函数中 [英] Understanding "this" within anonymous function in JavaScript

问题描述

在这篇帖子中，有很多答案讨论了this JavaScript 中的关键字.但是，我仍然将匿名函数中的this混淆如下

In this post, lots of answers are there discussing the this keyword in JavaScript. However, I am still confuse this in the anonymous function as following

// 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 下运行)

Output: (Running under 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 有两个作用域?

The output indicates the function A are in two different scopes. Am I right? Why there are two scopes for function A?

众所周知，this 与作用域有关.而MyModule的匿名函数中的this是undefined.根据输出，函数A的作用域之一是undefined，另一个是{ B: [Function: B], A: [Function: A] }.它们之间有什么区别?

As we know, the this is related to the scope. And the this in the anonymous function of MyModule is undefined. According to the output, one of the scope of function A is undefined, the other is { B: [Function: B], A: [Function: A] }. What the difference between them?

推荐答案

this 和 scope 几乎没有任何关系.在 JavaScript 中，this 通常是由函数的调用方式设置的，而不是它的定义位置.(该规则有两个例外，我将在下面提及.)

this and scope have almost nothing to do with each other. In JavaScript, this is usually set by how a function is called, not where it's defined. (There are two exceptions to that rule, I'll mention them below.)

因此，当您调用 A 时，您是在设置调用期间 this 的内容(主要是隐式的).当你这样做时:

So when you're calling A, you're setting what this will be during the call (largely implicitly). When you do this:

A();

...你在调用 A 时没有做任何明确的事情来设置 this 应该是什么；因此，您在将 this 设置为 undefined 的情况下隐式调用它，因为您的代码处于严格模式.(如果它处于松散模式，您将在 this 设置为对全局对象的引用的情况下调用它.)还值得注意的是，您正在解析标识符 A 通过调用匿名函数创建的上下文，其中包含 A 和 B 作为(有效)变量.

...you're calling A without doing anything explicit to set what this should be; as a result, you're implicitly calling it with this set to undefined, because your code is in strict mode. (If it were in loose mode, you'd be calling it with this set to a reference to the global object.) It's also worth noting that you're resolving the identifier A via the context created by the call to your anonymous function, which contains A and B as (effectively) variables.

但在这里:

this.A();

...您正在调用 A 作为从对象属性获取函数引用的表达式的一部分(A；注意这是一个不同的 表示 A，但属性和上下文变量都指向同一个函数).这样做的行为调用 A 并将 this 设置为对您从中获取属性的对象的引用.

...you're calling A as part of an expression getting the function reference from an object property (A; note that this is a different meaning for A, but that both the property and the context variable refer to the same function). The act of doing that calls A with this set to a reference to the object you got the property from.

这就是为什么您会在 A 中看到 this 的两个不同值.

That's why you see two different values for this in A.

this 由您如何调用它设置"规则的例外是:

The exceptions to the "this is set by how you call it" rule are:

1. ES6 的箭头"函数，从创建它们的上下文(不是作用域)继承 this.

1. ES6's "arrow" functions, which inherit this from the context (not scope) where they're created.

ES5 的绑定"函数(在函数引用上调用 .bind 的结果)，this 被 嵌入其中.bind 调用，因此总是看到 this 的相同值.

ES5's "bound" functions (the result of calling .bind on a function reference), which have this baked into them by the .bind call and so always see the same value for this.

这篇关于理解“这个"在 JavaScript 中的匿名函数中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！