在 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]

     })

   }