JS報錯-Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on...

報錯信息：Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them；

也就是嚴格模式下，'caller', 'callee' 和  'arguments'不被允許，只能換一種方式寫了。

我項目之前都是OK的，沒報這個錯誤。後來，由於gitlab賬號的密碼修改了，我又沒配置永久的，所以需要重新拉代碼。

pull完npm install出錯（其實它有時就會出現一些不知名的問題，與項目並無關係的）。於是我用了yarn，然後打包上傳服務器在手機上測試時，就報了上述錯誤。代碼我沒改過，本地開發也是OK的，經過排查是打包問題（我懷疑是yarn install時，肯能某些文件install了嚴格模式，也說不過去，我也沒找到證據   /手動哭笑）。

還能咋滴，我只能改代碼咯。。。

（因爲我在子組件向父組件emit一個方法，但是有2個參數，父組件在接收的時候，不能寫兩個參數,so，用了arguments）

原有代碼

1.子組件

//子組件--vue文件
pick(date,_index){
  let hxDate = '';
  if(this.type == 'DAY'){ hxDate= timeFormat(date,'YMD')}
  if(this.type == 'WEEK'){ hxDate= String(date['wYear']) + String(date['wName'])}
  if(this.type == 'MONTH'){ hxDate= date['date']}
  if(this.type == 'YEAR'){ hxDate= date['date']}
//傳了兩個參數
  this.$emit('getDate',hxDate,_index)
}

2.父組件

 //父組件--html文件（調用子組件）
<date-calendar @getCalendar="getCalendarSale" @getDate="getDateT(arguments)" :type="type">
   // 代碼省略
  
 </date-calendar>

 //父組件---.vue文件
// 點擊年月進詳情頁面
 getDateT(value){
   console.log('點擊年月詳情getDate',value);
 }

3.打印結果

瀏覽器完全OK，打包就報Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them。。。氣哭 T_T

 

現有代碼

1.子組件

//子組件--vue文件
pick(date,_index){
  let hxDate = '';
  if(this.type == 'DAY'){ hxDate= timeFormat(date,'YMD')}
  if(this.type == 'WEEK'){ hxDate= String(date['wYear']) + String(date['wName'])}
  if(this.type == 'MONTH'){ hxDate= date['date']}
  if(this.type == 'YEAR'){ hxDate= date['date']}

  //將兩個參數組成數組再傳！！！
  let hGetDate = [];
  hGetDate.push(hxDate);
  hGetDate.push(_index);

  this.$emit('getDate',hGetDate)
}

2.父組件

 //父組件--html文件（調用子組件，一個參數可省略不寫）
<date-calendar @getCalendar="getCalendarSale" @getDate="getDateT" :type="type">
   // 代碼省略
  
 </date-calendar>

 //父組件---.vue文件
// 點擊年月進詳情頁面
 getDateT(value){
   console.log('現有點擊年月詳情getDate',value);
 }

3.打印結果

 

 改成現有代碼之後，打包上傳服務器在手機上測試，OK，完美~

在查找過程中，也發現一個不錯的小tips：JS嚴格模式（use strict）下不能使用arguments.callee的替代方案，分享一下：

//一般在非嚴格模式下遞歸調用

"use strict";
function factorial(num){
    if(num<=1){
        return 1;
    }else {
        return num * arguments.callee(num-1);
    }
}

console.log(factorial(4));

報錯了，也是上述錯誤。


//在嚴格模式下不能通過腳本訪問arguments.callee,訪問這個屬性會報錯，那麼可以使用命名函數表達式來達到相同的結果，如下：
"use strict";
var factorial = (function f(num){
     if(num<=1){
        return 1;
    }else {
        return num * f(num-1);
    }
})

console.log(factorial(4)); //24，正常打印

再看一段代碼

(function  foo(bar) {
  if (bar) {
    return;
  }
  foo(true);
})();

後記

以後遇到上述錯誤，一定要在相關代碼處查看你是否使用了'caller', 'callee', and 'arguments' ，然後換其他方式寫。

歡迎大佬指出不對的地方，多交流相互學習呀~