为什么this.add不是对象上下文中的函数
问题描述:
在下面的示例中,我不清楚为什么this.add
未定义。我怀疑这是因为箭头函数会立即执行,并且在编译时并且add
函数尚不存在。这个假设是否正确?或者我错过了一些东西。为什么this.add不是对象上下文中的函数
const arr= [1, 2, 3]
const squares = {
num: (arr) => {
return arr.map((x) => {
return (x * x) + this.add()
})
},
add:() => {
return 1
}
}
//TypeError: this.add is not a function
console.log(squares.num(arr))
答
您正在使用lexical this
所有的方式出对象。你需要避免使用箭头功能num
:
见documentation for arrow functions:
“的箭头函数表达式比函数表达式更短的语法和不绑定自己的这个...”
const arr = [1, 2, 3]
const squares = {
num: function(arr) {
return arr.map((x) => {
return (x * x) + this.add()
})
},
add:() => {
return 1
}
}
console.log(squares.num(arr))
“本”在词法作用域前面的例子意味着仅在箭头函数'{}'中可用? – James
@James:这意味着箭头函数内的this这个参数指的是在定义了'squares'和'arr'的范围内指的是什么......它的工作方式与您期望的任何其他变量的工作方式完全相同。 –
MDN文档中的以下注意事项是理解的关键: 1)。用作方法的箭头函数:如前所述,箭头函数表达式最适合用于非方法函数。 2)。一个箭头函数不会自己创建它,这个封闭执行上下文的这个值被使用。 – James