javascript 关于bind、apply、call函数改变this指向

bind函数

/**
* thisArg {any} 必选，作为函数内部的this的值
* arg1, arg2, ... {any} 可选，作为函数的参数
* return {function} 返回一个原函数的拷贝，函数中 this === thisArg，参数 === arg1, arg2, ...
**/
function.bind(thisArg, arg1, arg2, ...)

例子如下：

function person(name, old) {
    console.log('person的this：', this);
    console.log('参数name：', name);
    console.log('参数old：', old);
}
person();
// person的this： window {……} 
// 参数name： undefined
// 参数old： undefined

const lee = person.bind({ id: 'personId' }); // 通过bind，重新绑定fn函数的this值
lee('lee', 20);
// person的this： {id: 'personId'} 
// 参数name： lee
// 参数old： 20

const su = person.bind({ id: 'personId' }, 'bind');
su('su', 18);
// person的this： {id: 'personId'}
// 参数name： bind
// 参数old： su

在上面的su函数执行后，我们发现了一个问题，当在bind()的时候，除第一个参数外，其他参数将会顶替掉后续执行su()传参参数顺序。当执行su('su', 18)时，会变成su('bind','su',18)。

apply函数

/**
* thisArg {any} 必选，作为函数内部的this的值
* argsArray {Array | 类数组} 可选，把数组中的参数分别单独传给函数
**/
function.apply(thisArg, argsArray)

例子如下：

function person(name, old) {
    console.log('person的this：', this);
    console.log('参数name：', name);
    console.log('参数old：', old);
}
person.apply({ id: 'personId' }, ['lee', 20]);
// 打印结果：
// person的this： {id: 'personId'} 
// 参数name： lee
// 参数old： 20

call函数

/**
* thisArg {any} 必选，作为函数内部的this的值
* arg1, arg2, ... {any} 可选，把参数传给函数
**/
function.call(thisArg, arg1, arg2, ...)

例子如下：

function person(name, old) {
    console.log('person的this：', this);
    console.log('参数name：', name);
    console.log('参数old：', old);
}
person.call({ id: 'personId' }, 'lee', 20);
// 打印结果：
// person的this： {id: 'personId'} 
// 参数name： lee
// 参数old： 20

总结三者的区别

• bind() 返回原函数的拷贝，apply()、call()则是直接调用函数
• bind() 提供的函数参数会顶掉后续函数调用的传参顺序，apply()、call()则不会
• apply() 提供函数参数为一个数组或者类数组，call() 是一个参数列表

关于类数组

• 概念：表面上看起来，外观和行为像数组，但是不共享他们所有的方法。
• 比如函数内部的 arguments 对象，拥有数组的length属性，也有下标，但是没有数组其他相关的属性，如：push、forEach、……
• 总结：类数组至少拥有下标、length属性

比如：

// 类数组，下标有0，1，length对应下标总数2
const arrObj = {
    0: 1,
    1: 2,
    length: 2
};

function person() {
    console.log('arguments：', arguments);
}
person.apply(null, arrObj); // 使用apply函数证明arrObj为类数组
// 打印结果：
// arguments： Arguments(2) [1,2,callee:f,……]

因为是我们自己模拟的数组，所以有2个点需要注意一下

• length的值一般是要对应 最大下标数+1
• 一般下标最好都是从 0 开始，且是连续不断的下标

比如：

const arrObj = {
    0: 1,
    1: 2,
    length: 1
};

function person() {
    console.log('arguments：', arguments);
}
person.apply(null, arrObj);
// 打印结果：
// arguments： Arguments [1, callee:f,……]

可以看到，当length不为 最大下标数+1 时，类数组传进去apply函数时，arguments是获取不到完整的值。

const arrObj = {
    1: 1,
    2: 2,
    4: 4,
    length: 3
};

function person() {
    console.log('arguments：', arguments);
}
person.apply(null, arrObj);
// 打印结果：
// arguments： Arguments(3) [undefined, 1, 2, undefined, 4, callee:f,……]

可以看到，当下标不是从0开始，且后续3的下标也没有，则会认为0和3下标的值为undefined，这样子可能在使用途中会造成其他问题。

一般要使用类数组的正确做法，应该如下：

// 创建一个类数组
const arrObj = {
    length: 0,
    push: Array.prototype.push // 赋值Array原型对象的push函数
};
// 通过 push 函数去添加对应的数据
arrObj.push(1, 2);
console.log(arrObj); // {0:1, 1:2, length:2, push:f}

除了使用 push 外，也可以添加 Array 的其他属性，让类数组更像数组，这里我就不举例子，有兴趣的童鞋可以自己去试试。

PS：
关于更改this指向的3个函数：bind、call、apply，均来源于Function.prototype。所以其他不在Function这条 原型链 上的对象是无法调用该3个函数。
关于原型链请参考这篇文章：《javascript 原型和原型链》
关于this的指向可以参考：《javascript this指向》