如何将此箭头函数转换为普通函数？答案

【问题标题】：How to convert this arrow function to a normal function?如何将此箭头函数转换为普通函数？
【发布时间】：2022-12-06 12:31:41
【问题描述】：

这是来自 Vue.js 中的子组件。我试图从 sensorData 中的父级传递一些数据，但绑定没有发生，因为下面的代码使用了 data 的箭头函数。如何将此函数转换为普通函数，以便 this 绑定可用。

export default {
  name: "SensorChart",
  props: ["sensorData"],

  data: () => ({
    chartOptionsLine: {
      xAxis: {
        data: ["A","B","C","D","E","F","G"]
      },
      yAxis: {
        type: "value"
      },

      series: [
        {
          type: "line",
          // data: this.sensorData
          data: [910, 423, 61, 752, 262, 3625, 119]
        }
      ],
      title: {
        text: "Sample Data",
        x: "center",
        textStyle: {
          fontSize: 20
        }
      },
      color: ["#1271c2"]
    }
  })
};

【问题讨论】：

官方文档中是data() {，这是第一个查看的地方。

标签： javascript vue.js data-binding arrow-functions echarts

【解决方案1】：

这很好用。

export default {
  name: "SensorChart",
  props: ["sampleData","sampleLabels"],

  data: function() { 
    return {
      chartOptionsLine: { 
        xAxis: {
          data: this.sampleLabels
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            type: "line",
            data: this.sampleData
          }
        ],
        title: {
          text: "Sensor Data",
          x: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#127ac2"]
      }
    }
  }
};

【讨论】：

箭头也应该工作正常 - 它总是对我来说 - 注意，data: function() { 可以简化为 data() {
@Bravo - 也会尝试一下，谢谢！
仍然无法理解为什么你的箭头函数失败 - 两种方法都返回一个对象...... this 是无关紧要的
@Bravo 箭头函数会不是在 OP 使用 this 的情况下工作（是此处相关）以访问props。箭头函数捕获外部上下文，它不是组件实例。
@Bravo 是的，这正是我总是用常规函数编写它的原因：您可以继续使用 this 而不会感到意外。此外，VScode 中的 Vue sn-ps 对我来说也非常快，所以没有浪费实时时间。

【解决方案2】：

箭头函数表达式是传统函数表达式的紧凑替代方案，但有局限性，不能在所有情况下使用。

箭头函数和传统函数有区别，也有一些限制：

箭头函数没有自己的 this、arguments 或 super，不应用作方法。
箭头函数无法访问 new.target 关键字。
箭头函数不适合调用、应用和绑定方法，这通常依赖于建立一个范围。
箭头函数不能用作构造函数。
箭头函数不能在其函数体内使用 yield。

所以，如果你想使用传统方式，你可以使用这个。

export default {
  ...
  data: function() { return {...} }
}

如果要使用箭头函数，虽然箭头函数没有自己的this指针，但调用函数时只能传递参数称呼（）或者申请（）（这种方式不能绑定）。

【讨论】：

【解决方案3】：

使用这个它工作正常

export default {
  name: "SensorChart",
  props: ["sampleData","sampleLabels"],

  data: function() { 
    return {
      chartOptionsLine: { 
        xAxis: {
          data: this.sampleLabels
        },
        yAxis: {
          type: "value"
        },

        series: [
          {
            type: "line",
            data: this.sampleData
          }
        ],
        title: {
          text: "Sensor Data",
          x: "center",
          textStyle: {
            fontSize: 24
          }
        },
        color: ["#127ac2"]
      }
    }
  }
};

【讨论】：