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

最新推荐文章于 2023-12-08 15:23:26 发布

云墨cloudMel

最新推荐文章于 2023-12-08 15:23:26 发布

阅读量9.7k

点赞数 3

分类专栏： Js vue

本文链接：https://blog.csdn.net/weixin_42481234/article/details/89306962

版权

Js 同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue

5 篇文章 0 订阅

订阅专栏

getCrumbs(){
    let crumbs = JSON.parse(localStorage.getItem( "crumbs" )); 
    //[Vue warn]: Error in created hook: "TypeError: Cannot set property 'manageClass' of undefined" 报错
    crumbs.forEach(function(item){           
        console.log(item);                    
        if (item.name === "staffInfo") {
            this.manageClass = item.manageClass
            this.infoClass = item.infoClass; 
        }
    })
    
},

crumbs.forEach(item => {
console.log(item);
if (item.name === "staffInfo") {
this.manageClass = item.manageClass
this.infoClass = item.infoClass;
}
})

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

 getCrumbs(){
    let crumbs = JSON.parse(localStorage.getItem( "crumbs" )); 
    //[Vue warn]: Error in created hook: "TypeError: Cannot set property 'manageClass' of undefined" 报错
    // crumbs.forEach(function(item){
    crumbs.forEach(item => {
        console.log(item);                    
        if (item.name === "staffInfo") {
            this.manageClass = item.manageClass
            this.infoClass = item.infoClass; 
        }
    })
    //  或者使用for循环
    for (let i = 0; i < crumbs.length; i++) {
        if (crumbs[i].name === "staffInfo") {
            this.manageClass = crumbs[i].manageClass
            this.infoClass = crumbs[i].infoClass; 
        }                  
    }
   
},