在 javascript forEach 函数中访问“this”

Question

我有一个特殊的场景，我想从“this”访问数据，同时查看一个数组，该数组也在我的Vue组件上定义。例：

 data () {

    return {

      question: [],

      inputList: [],

      form: {}

    }

  },

 methods: {

   onSubmit: function () {

     let predictionParams = {}

     this.inputList.forEach(function (element) {

       predictionParams[element.detail] = this.form[element.detail]

     })

   }

错误：

this.form is not defined in the context of the forEach loop

问题：

JS处理此类案件的惯用方式是什么？我经常遇到这种情况，我总是觉得我想出了粗略的解决方案，或者至少可以做一些更容易的事情。对此的任何帮助都会很棒。

Answer 1

许多内置组件（包括 forEach）都包含一个可选的“this”活页夹：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach利用这一点来发挥你的优势：this.inputList.forEach(function (element) {    predictionParams[element.detail] = this.form[element.detail] },this)自 ie9 起受支持

Answer 2

arrow 函数语法避免了重新绑定此 this.inputList.forEach(element => {    predictionParams[element.detail] = this.form[element.detail]  })

Answer 3

您可以使用箭头函数 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions 它将它绑定到函数中 data () {    return {      question: [],      inputList: [],      form: {}    }  }, methods: {   onSubmit: () => {     let predictionParams = {}     this.inputList.forEach((element) => {       predictionParams[element.detail] = this.form[element.detail]     })   }