如何解决从另一个方法调用对象方法不起作用
假设我有以下编码场景:
export const test = () => {
return (
var1,var2,var3
) => {
return Object.freeze({
getvarOne: () => var1,getvarTwo: () => var2,getvarThree: () => var3,total: () => var1 + var2 + var3,squaretotal: () => Math.pow(total(),2)
})
}
}
let obj1 = test();
let obj2 = obj1(1,2,3);
let obj3 = obj2.squaretotal();
有什么方法可以从 squaretotal 方法访问 total 方法?对于整个方法调用,我一直未定义。
解决方法
有一个未定义的 total
函数被称为 Math.pow
的参数。如果你打算调用对象的成员,那么你需要指定,目前,它是一个变量引用,而不是一个属性.
您可以使用 this
,但您必须使该方法成为标准的 function
而不是箭头函数——您可以使用 ES6 对象方法表示法(省略 function
关键字) :
const test = () => {
return (
var1,var2,var3
) => {
return Object.freeze({
getVarOne: () => var1,getVarTwo: () => var2,getVarThree: () => var3,total: () => var1 + var2 + var3,squareTotal() { return Math.pow(this.total(),2) }
})
}
}
let obj1 = test();
let obj2 = obj1(1,2,3);
let obj3 = obj2.squareTotal();
console.log(obj3);
从 squareTotal()
内部调用时,如您的示例所示,您可以:
this.total()
this
将是 obj2
,它是具有 total
方法的冻结对象。但是,您还需要停止对任何希望引用您自己的对象的方法使用箭头函数,因为箭头函数使用的是 this
的词法值,而不是 this
的被调用对象值。
这将适用于以下两个更改:1) 更改为 this.total()
和 2) 将 squareTotal()
更改为常规函数 - 不是箭头函数,因此它具有正确的 this
值:>
const test = () => {
return (
var1,squareTotal: function() {
return Math.pow(this.total(),2);
},})
}
}
let fn = test();
let obj2 = fn(1,3);
let result = obj2.squareTotal();
console.log(result);
total
不是可以像 total()
一样调用的全局函数。如果您想从您返回的 total
访问 object
方法,请调用 this.total()
。但一定不要使用箭头函数表达式。
您可以使用以下代码:
const test = () => {
return (
var1,squareTotal: function() {return Math.pow(this.total(),2) }
})
}
}
let obj1 = test();
let obj2 = obj1(1,3);
let obj3 = obj2.squareTotal();
console.log(obj3);
从箭头函数更改的原因是,箭头函数从其声明的词法范围中获取 this
。在这里,它应该属于 window object
。对于任何其他方法,this
取决于它们的调用方式(这里它们由对象调用)。 Relevant SO answer
如果您想访问同一对象内的属性,请不要使用箭头函数:它们不能使用对象的 scope。这是工厂函数的简化,其中 total
是一个 getter,而 squareTotal
是实例的函数表达式。
const test = () => {
return (var1,var3) => {
return Object.freeze({
get total() {
return var1 + var2 + var3;
// ^ because the object is frozen
// var1 ... var3 don't have to be
// part of the object. Values are
// retrieved from closed over
// parameter values
},squareTotal() {
return Math.pow(this.total,2);
},});
};
}
const obj1 = test();
const obj2 = obj1(1,3);
console.log(`obj2.squareTotal(): ${obj2.squareTotal()}`);
// btw: because of the closure,the factory can
// be simplified to a one liner too:
const test1a = () => (v1,v2,v3) => Object.freeze({
squareTotal: () => Math.pow(v1 + v2 + v3,2),});
const obj1a = test1a()(1,3);
console.log(`obj1a.squareTotal(): ${obj1a.squareTotal()}`);
// note: getter is not useful in a frozen object,// but if the properties may change later it can be
// because in that case 'total' always gives the current
// total
const test2 = () => {
return (var1,var2) => {
return {
var1,get total() {
return this.var1 + this.var2;
},};
};
};
const x = test2()(1,2);
console.log(`x.sqareTotal(): ${x.squareTotal()}`);
x.var2 = 15;
console.log(`x.var2: ${x.var2}; x.squareTotal(): ${x.squareTotal()}`);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。