如何在JavaScript对象的函数属性中不使用getter访问内部属性?
问题解决方法
你遇到的核心问题是箭头函数的this指向特性:箭头函数不会绑定自己的this,它会继承外层作用域的this,所以在addInput箭头函数里用this访问不到Ivh对象,直接写inputs也找不到(因为它现在是Ivh的属性,不是全局变量)。
方案一:改用普通函数作为方法
把addInput的箭头函数换成普通函数,此时函数内部的this会指向调用它的Ivh对象,就能正常访问this.inputs:
var Ivh = { inputs: [], addInput: function(input, display, message, regex) { this.inputs.push([input, display, message, regex, input.value]); } }
或者用ES6方法简写,代码更简洁:
var Ivh = { inputs: [], addInput(input, display, message, regex) { this.inputs.push([input, display, message, regex, input.value]); } }
方案二:直接引用对象自身(不推荐)
如果一定要保留箭头函数,可以直接通过Ivh.inputs访问属性,但这种写法灵活性差(比如对象改名后代码要同步修改):
var Ivh = { inputs: [], addInput: (input, display, message, regex) => { Ivh.inputs.push([input, display, message, regex, input.value]); } }
注意:如果后续需要用
call/apply改变addInput的调用上下文,方案一的普通函数更适配;如果确定不会改变调用上下文,方案二也能正常工作,但优先推荐方案一。
内容的提问来源于stack exchange,提问作者Koby K
相关产品推荐
相关产品推荐

