javascript内置函数提供的显式绑定

内置函数提供的显式绑定

最近在开发中遇到使用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]