JavaScript:调用存储在变量中的函数时访问 'this'

Question

我是 JavaScript 的新手，所以这可能是一个微不足道的问题:

我正在尝试构建一个对象，该对象存储从一组整数到它的某些方法的映射，即像这样的东西:

'use strict';

function Foo() {
    this.funcs = {
        1: this.func1,
        2: this.func2,
    }
}

Foo.prototype.func1 = function() {
    this.prop = 1;
}

Foo.prototype.func2 = function() {
    this.prop = 2;
}

然后我希望能够像这样调用 Foo 的方法:

foo = new Foo();
var func = foo.funcs[1];
func();

但这会导致:Cannot set property 'prop' of undefined，即 this 不引用 foo。

这里有什么问题，是否有更好的方法来实现它？

Answer 1

你的问题是这一行:

var func = foo.funcs[1];

JavaScript 根据函数的调用方式确定this 的值。如果您使用点符号，例如 foo.funcs[1](); 那么 this 的值将与 foo 对象相关联。但是当您运行 func() 时，它只是一个普通函数，this 将具有默认值 undefined。

值得您花时间阅读 two chapters of You Don't Know JS讨论 this。学习起来应该不到一个小时，一旦学会，您将远远领先于大多数 JS 程序员。

在您阅读本章之前，这些规则可能没有意义，但它们总结如下:

Determining the this binding for an executing function requires finding the direct call-site of that function. Once examined, four rules can be applied to the call-site, in this order of precedence:

Called with new? Use the newly constructed object.

Called with call or apply (or bind)? Use the specified object.

Called with a context object owning the call? Use that context object.

Default: undefined in strict mode, global object otherwise.

根据上述规则，下面的代码是您可以让它按照您期望的方式工作的最简单方法:

'use strict';

function Foo() {
  this.funcs = {
    1: this.func1,
    2: this.func2,
  }
}

Foo.prototype.func1 = function() {
  this.prop = 1;
  console.log('called func1. this.prop =', this.prop);
}

Foo.prototype.func2 = function() {
  this.prop = 2;
  console.log('called func2. this.prop =', this.prop);
}


const foo = new Foo();
foo.funcs[1]();