返回 NAN 的对象输出 [重复]答案

【问题标题】：Object output returning NAN [duplicate]返回 NAN 的对象输出 [重复]
【发布时间】：2019-10-25 18:16:44
【问题描述】：

这是我的代码

const products = 
      [ 
          {

    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    "coefficient":2,
    "price": () => 2000 * this.coefficient
  },
  {

    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
    "coefficient":3, 
    "price": () => 2000 * this.coefficient
  },
]

我想返回的价格取决于系数，但是当我执行时

products[0].price() // return NaN

我该如何解决？

谢谢。

【问题讨论】：

标签： javascript object

【解决方案1】：

箭头函数中的this指的是类作用域，即一个空对象；在这种情况下，你必须使用完整的函数语法来引用对象范围。

试试这个：

products = [
  {
    id: 1,
    title:
      "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    body:
      "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    coefficient: 2,
    price: function() {
      return 2000 * this.coefficient;
    }
  },
  {
    id: 2,
    title: "qui est esse",
    body:
      "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
    coff: 3,
    price: function() {
      return 2000 * this.coefficient;
    }
  }
];

console.log(products[0].price()) // 4000
console.log(products[1].price()) // 6000

【讨论】：

也许对 OP 的一点解释会有所帮助。
说明：如您所见，箭头函数中的“this”指的是类作用域，在这种情况下是一个空对象，要引用对象作用域必须使用完整的函数语法。

【解决方案2】：

这是由于箭头函数处理this 范围的方式。在这种情况下，将箭头函数（() => this.something）替换为传统的 JS 函数（function() { return this.something; }）将解决您的问题。

【讨论】：

【解决方案3】：

对于箭头函数，this 的值不是基于执行函数所使用的对象引用。相反，它使用声明它的闭包中的this 引用。检查the documentation here on MDN。在您的场景中，this.coefficient 将是未定义的，当与 2000 相乘时会得到 NaN。

如果您需要this 来引用调用price 函数的对象引用，您可以将箭头函数更改为正确的函数。修改后的代码应该是这样的：

products = [
  {
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
    "coefficient":2,
    "price": function() { return 2000 * this.coefficient; }
  }
];

【讨论】：

【解决方案4】：

你可以用这个：

                const products =
                [
                    {

                        "id": 1,
                        "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
                        "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto",
                        "coefficient": 2,
                        price() {
                            return 2000 * this.coefficient
                        }
                    },
                    {

                        "id": 2,
                        "title": "qui est esse",
                        "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla",
                        "coefficient": 3,
                        price() {
                            return 2000 * this.coefficient
                        }

                    },
                ]

【讨论】：

表示函数的好方法。
是的，这也是一种方式