javascript - 在构造函数中使用 call() 时与 'this' 关键字混淆

Question

我知道 call() 会将 this 关键字与目标对象绑定(bind)，但我对如何使用 call() 感到困惑 优雅地在构造函数中:

示例代码为:

 function Test(x,y){
	this.x = x;
	this.y = y;
	this.calc = (term)=>{
		console.log(term  + (this.x + this.y));
	}
	this.result = () =>{
		let resultA = {
			x:this.x * 20,
			y:this.y * 20
		}

		this.calc.call(resultA,'the result is ');
	}
    }

    var mytest = new Test(20,20);
    
    mytest.result(); //return 'the result is 40' but was expected to be 800

this.calc() 方法本应使用 this.result() 中声明的不同对象多次调用，但它没有按预期工作，所以我的问题是:

1. 当调用 this.calc.call(resultA); 时，this.x 和 this.y 值没有绑定(bind)使用 resultA.x 和 resultA.y，我想知道这是为什么？

2. 在构造函数中使用 call() 或 apply() 方法有什么优雅的方法吗？

Answer 1

您的问题是您使用的是箭头函数，其中 this lexically 绑定(bind)到封闭范围内的版本，而不是通过动态分配.call 的第一个参数。

this.calc = (term) => {
    // `this` here will *always* be the original constructed object
    console.log(term  + (this.x + this.y));
}

要获得您想要的行为，您必须将 calc 定义为“普通”函数。