浅谈Array.prototype.map()方法this指向

最新推荐文章于 2022-03-25 11:37:14 发布

热爱前端的菜鸟

最新推荐文章于 2022-03-25 11:37:14 发布

阅读量878

点赞数 2

文章标签：原型模式 javascript 前端

本文链接：https://blog.youkuaiyun.com/s1594217816/article/details/123013462

版权

这篇博客深入解析了JavaScript的map方法，特别是回调函数中的thisArg参数。通过代码示例，展示了如何正确使用thisArg来传递上下文，以及为何在箭头函数中thisArg不会按预期指向。博客提醒开发者注意箭头函数与常规函数在处理this上的区别，以避免常见的编程陷阱。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方给的解释：

**map()** 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

代码示例：

let arr = [1,2,3];
let obj = {
  a:1
}
arr.map((val, index ,arr) => {
  console.log(val)  // 当前值
  console.log(index)  // 当前索引
  console.log(arr)  // 遍历的数组
})

语法：

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array 
}[, thisArg])

重点研究一下第二参数 thisArg

官方解释：

thisArg可选执行 callback 函数时值被用作this。

这里的意思是这个 thisArg 对象可以在callback函数中访问，这里有一个小坑，如果想要访问这个 thisArg 对象的话，只能使用 es5 函数方式

let arr = [1,2,3];
let obj = {
  a:1
}

// 正确示例
arr.map(function(val){
  console.log(this)   // { a:1 }
}, obj)

// 错误示例
arr.map((val) => {
  console.log(this)  // window 对象
}, {a:1})

这是因为，箭头函数没有不能绑定 this，会捕获其所在的上下文的this值，作为自己的this值。