异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func

Posted 2023-04-01 肖富贵…

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了异常：TypeError: ‘caller‘, ‘callee‘, and ‘arguments‘ properties may not be accessed on strict mode func相关的知识，希望对你有一定的参考价值。

问题发现:在一个tabs切换数据的过程中,发现接口并未返回数据,但是确有一个空白占位数据(如图1)

正确的情况应该为图2显示

组件1里面进行了数据长度判断,按理来说,返回的数据长度是为0的,应该显示为图2的,结果却为图1

// 条件为数据大于0才显示
<template v-if="data.length>0">
    ...此处代码省略
 </template>
<template v-else>
    <div>无图片默认展示图</div>
 </template>

于是我试着把它的数据打印出来发现数据居然是有长度的,不过数据里面的不是数据,而是报错信息

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode func

于是我找到了我的赋值操作数据已经查看报错检查原因

      getcouponAreaList() 
            let area = this.currentTabs ? 'coupon' : 'discount';
            this.loading = true;
            this.$store
            .dispatch('getDiscountArea',  ...this.postData, do: area )
            .then((res) => 
                for (let i in res.data.data) 
                 this.AreaList.push(res.data.data[i]); //赋值数据
                
               this.list = res.data;
               this.loading = false;
             );
        ,

最后找到报错原因是因为webpack打包之后,项目默认是严格模式的,报错的异常说明了用到了'caller','callee',and 'arguments'这些东西与严格模式冲突了,然后我查询了一下使用的for in 方法特性,发现for in 方法会遍历数组所有的可枚举属性，包括原型。以及原型方法method和name属性,我感觉就是这个原因,于是我把循环的方法换成了for of,因为for in适合遍历对象,for of适合遍历数组。结果报错真的没有了,传递过去的数据也成为空的数组了,页面也如图2显示正常了

解决方式1:将for in 换成for of

看到这个报错,哪怕不是for in 可能也是用的方法与严格模式冲突,也可以尝试使用别的方法来遍历

       //用券专区
        getcouponAreaList() 
            let area = this.currentTabs ? 'coupon' : 'discount';
            this.loading = true;
            this.$store
            .dispatch('getDiscountArea',  ...this.postData, do: area )
            .then((res) => 
            const str = []
            for (const i of res.data.data) 
             str.push(i);
            
            this.AreaList = str
            this.list = res.data;
            this.loading = false;
            );
        ,