内置函数提供的显式绑定
最近在开发中遇到使用arr.map(module.fun) 这样的写法时(在一个模块调用了另外一个模块的方法), 造成了函数中this丢失的问题, 显示为undefined, 因此去查阅一番资料，发现了一个不常用到的知识点: javascript内置函数提供的显式绑定
拿Array.prototype.map()举个栗子
注意提供的第二个参数 thisArg
let new_array = arr.map(function callback( currentValue[, index[, array]]) {
// return element for new_array
}[, thisArg]);
假如你用来
map的函数是一个纯函数(不包含this)，那么你不显式地为该函数指定this, 也不会出啥问题
let obj = {
val: 1,
fun: func
};
function func(a) {
return 2 * a;
}
let arr = [1, 2, 3];
let new_arr = arr.map(obj.fun); // no problem [2, 4, 6]
一旦你
map的函数里包含了this, 那么你最好显式地给它指定正确的this, 否则会出现你意想不到的情况
'use strict'
let obj = {
val: 1,
val2: 2,
fun: func,
};
function func(a) {
return 2 * (a + this.val2);
}
let arr = [1, 2, 3];
let new_arr = arr.map(obj.fun); // Uncaught TypeError: Cannot read property 'val2' of undefined
// 非严格模式应该会绑定到window上 map后的结果是[NaN, NaN, NaN]
let true_arr = arr.map(obj.fun, obj); // 第二个参数为函数指定了this map后的结果是我们想要的[6, 8, 10]
// 当然下面这种写法也没有问题, 原理是this的显式绑定
let true_arr2 = arr.map(function (item) {
return obj.fun(item); // fun被obj调用, 因此函数里的this被绑定到obj
});
// [6, 8, 10]