1、forEach用法及this的一点小引申

# forEach用法

// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)

// 箭头函数[无thisArg的用法]
forEach((element) => { /* … */ }) 元素
forEach((element, index) => { /* … */ }) +索引

forEach((element, index, array) => { /* … */ }) +当前数组

forEach((element, index, array) => { /* … */ },thisArg) 这里的thisArg不会作为函数中的this，函数中的this指向上一级的对象

// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)

      注意thisArg这个参数：

（1）thisArg在箭头函数中无效，this指向函数上一级的对象。很多人说指向window，其实是不准确的。如下例（1）（2）

（2）在非箭头函数中，如果 thisArg 参数有值，则每次 callback 函数被调用时，this 都会指向 thisArg 参数。如果省略了 thisArg 参数，或者其值为 null 或 undefined，this 则直接指向window，不传导。如例子（3）

 例子（1）

let a ={
   sum:function(){
      [3].forEach(()=>{console.log(this)})
   }
};
a.sum();//输出a对象

 例子（2）

let a ={
   sum:()=>{
      [3].forEach(()=>{console.log(this)})
   }
};
a.sum();//输出window对象。这是由于上一级也是箭头函数，所以继续向上传导

例子（3）

let a ={
   sum:function(){//这里如果是箭头函数，也是输出window
      [3].forEach(function(){console.log(this)})
   }
};
a.sum();//输出window

如果要在例子（3）中，让函数里可以使用this，那么就可以使用bind(this)。这样就可以得到例（4）（5）

例子（4）

let a ={
   sum:function(){
      [3].forEach(function(){console.log(this)}.bind(this))
   }
};
a.sum();//输出对象a

例子（5）

let a ={
   sum:()=>{
      [3].forEach(function(){console.log(this)}.bind(this))
   }
};
a.sum();//输出对象window，因为箭头函数不捕获this，继续传导。

 意外小总结： 总结箭头函数不捕获this，继续传导。function(){}形式的函数，捕获this。//这里“捕获”这个词是笔者自己的理解，非专业术语

翻译

搜索

复制