bind和call和apply

bind和call和apply

一、作用

call，apply和bind的作用是改变函数执行的上下文，即改变函数运行时的this指向。

var name = "lucy";
var obj = {
 name: "martin",
 say: function () {
 console.log(this.name);
 }
};
obj.say(); // martin，this指向obj对象 
setTimeout(obj.say,0); // lucy，this指向window对象

正常情况下，say输出的是martin，但是在定时器中输出的是lucy。
因为在定时器中是作为回调函数来执行的，因此回到主栈运行时是在全局执行上下文的环境中执行的，这时候this指向的是window，所以输出的是lucy。
用下面的方法可以改变this的指向，由window改为obj。

setTimeout(obj.say.bind(obj),0); // lucy，this的指向由window对象改变为obj对象

二、区别

1、apply

apply接收两个参数，第一个参数是this的指向，第二个参数是函数接受的参数，以数组的形式传入。
改变this的指向后函数会立刻执行，这个方法临时改变一个this的指向。

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}
fn.apply(obj,[1,2]); // obj,[1,2] this会变成传入的obj，传入的参数必须是一个数组
fn(1,2) // window,[1,2] this指向window对象

当第一个参数是null或者undefined的情况下，则默认指向window（在浏览器中）。

fn.apply(null,[1,2]); // this指向window
fn.apply(undefined,[1,2]); // this指向window

2、call

call的第一个参数是this的指向，之后的是一个参数列表，改变this的指向后函数会立即执行，call也只能临时改变this的指向一次。

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"张三"
}
fn.call(obj,1,2); // obj,[1,2] this会变成传入的obj，传入的参数必须是一个数组
fn(1,2) // window,[1,2] this指向window对象

第一个参数是null和undefined的情况下，默认指向window（在浏览器中）。

3、bind

bind第一个参数是this的指向，后面传入的是参数列表，且可以分多次传入。bind改变this的指向后不会立即执行，会返回一个永久改变this指向的函数。

function fn(...args){
 console.log(this,args);
}
let obj = {
 myname:"张三"
}
const bindFn = fn.bind(obj); // this会变成传入的obj，bind不是立即执行，需要单独执行一次。
bindFn(1,2) // obj,[1,2] this指向obj
fn(1,2) // window,[1,2] this指向window

4、总结

1. 三种方法都可以改变函数的this对象指向。
2. 三种方法都是第一个参数是this将要指向的对象，如果没有这个参数或者这个参数是null或者undefined则默认指向window。
3. 三者都可以传参，但是apply传入的是数组，call和bind传入的是参数列表。apply是一次性传入，而bind可以分为多次传入。
4. bind是返回绑定this之后的函数，而apply和call是立即执行。

三、实现

bind实现了三个步骤：

• 修改this指向
• 动态传递参数
• 兼容new关键字

动态传递参数的两种方法：

//方式一：只在bind中传递参数
fn.bind(obj,1,2)();

//方式二：在bind中传递函数参数，也在返回函数中传递参数
fn.bind(obj,1)(2);

手写bind

Function.prototype.myBind = function (context) {
    // 判断调用对象是否为函数
    if (typeof this !== "function") {
        throw new TypeError("Error");
    }

    // 获取参数
    const args = [...arguments].slice(1),
        fn = this;
    return function Fn() {

        // 根据调用方式，传入不同绑定值
        return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments));
    }
}