Question

有两种方法可以让对象方法引用对象属性：

let i = {a: 'apple', b: function(){return i.a}}
let j = {a: 'apple', b: function(){return this.a}}

console.log(i.b())  // apple
console.log(j.b())  // apple

这两种引用对象属性的方法的优缺点是什么？

Answer 1

它们的含义不同。第一个返回范围内的某个变量a的{{1}}属性。对象也被命名为i的事实意味着它可以按预期工作。但这不能保证。例如：

只要您希望函数能在范围内进行查找，找到一个let i = {a: 'apple', b: function(){return i.a}} let j = i i = {a: "potato"} console.log(j.b()) // apple or potato?并返回它的i道具，即可按预期工作。但这并不意味着在此函数中返回对象的a属性。

然后第二个是表示只要用a调用它，但是i.b()并不指向定义函数的对象-它的值是确定的函数调用的上下文。例如

this

一个不比另一个好，它们是不同的想法，可以起到不同的作用。

Answer 2

实际上，这些功能不是在做同一件事。

让我们考虑第一个。

let i = {a: 'apple', b: function(){return i.a}}

您定义一个函数function(){return i.a}，该函数将从对象i返回一个值。无论何时何地调用它，它都会从对象i返回值。它完全独立于范围。您不能将此函数用作原型方法。因为i始终是i。如果您不使用箭头功能来保护通话上下文，这可能会很有用。

另一方面，其他功能不同。

let j = {a: 'apple', b: function(){return this.a}}

您正在使用this，因此它将根据其上下文访问属性a。

通过示例使所有内容更加清晰。假设我有一个带有属性sound的绵羊和狗对象。

const dog = {
   sound: 'woof-woof'
};

const sheep = {
   sound: 'Meaeeeeee'
};

现在我正在定义一个函数makeSound

function makeSound {
   alert(this.sound)
}

现在我想对两种动物都使用makeSound。我要做的就是通过给它一个上下文来调用此函数。

makeSound.call(sheep) // -> Meaeeeeee
makeSound.call(dog) // -> woof-woof

this帮助我针对不同类型的对象重用了此功能。这就是原型继承的来源。

对象方法可以引用对象属性的两种方式之间的区别

2 个答案: