vue 使用forEach报错,this指向问题

 checkNodes.forEach(function(item, index) {

      const subData = {};

      debugger;

      subData.superDeptId = item.deptId;

      subData.superDeptName = item.deptName;

      console.log(this.bmfcDialog);

      subData.subjectName = this.bmfcDialog.subjectName;

      subData.subjectNum  = this.bmfcDialog.subjectNum;

      this.bmfcDialog.subListData.push(subData); 

     })

 

   ypeError: Cannot read property 'bmfcDialog' of undefined
    at eval (VM59249 onwership_new_new.vue:499)
    at Array.forEach (<anonymous>)
    at VueComponent.getCheckedNodes (onwership_new_new.vue?e977:460)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3882)
    at VueComponent.handleClick (element-ui.common.js?5c96:9417)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)

原因:

  每一个用function声明的函数在调用时都会在函数内创建自己的this。this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined，非严格模式下是 window。
也就是说，function声明的函数总是有自己的this。从而遮盖外层作用域中的this。
如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this，是访问外层作用域中的this

 

改为

 checkNodes.forEach(item => {

        const subData = {}

        subData.superDeptId = item.deptId

        subData.superDeptName = item.deptName

        subData.subjectName = this.bmfcDialog.subjectName

        subData.subjectNum = this.bmfcDialog.subjectNum

        subData.acmeInternalPricePlanId = this.bmfcDialog.acmeInternalPricePlanId

        this.bmfcDialog.subListData.push(subData)

      })