【前端知识之JS】bind, call, apply的区别，以及如何实现bind

前言

本系列主要整理前端面试中需要掌握的知识点。本节介绍bind, call, apply的区别，以及如何实现bind。

---

一、bind, call, apply的作用是什么

bind call apply的作用是改变函数执行的上下文，简而言之就是改变函数运行时的this指向。例如：

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

二、区别

• apply：接受两个参数，第一个是this的指向，第二个是函数接受的参数，以数组的形式传入，改变this指向后原函数立即执行，此方法只临时改变this指向一次。

function fn(...args){
    console.log(this,args);
}
let obj = {
    myname:"anada"
}
fn.apply(obj,[1,2]);    //this指向obj
fn(1,2)  //this指向window

当第一个参数为null、undefined的时候，默认指向window

• call的第一个参数也是this的指向，后面传入的是一个参数列表，改变this后会立即执行，且此方法只是临时改变this指向一次

    function fn(...args) {
        console.log(this, args);
    }
    let obj = {
        myname: "anada"
    }
    fn.call(obj,1, 2);    //this指向obj
    fn(1, 2)  //this指向window

• bind方法和call很相似，第一个参数也是指向，后面传入的也是一个参数列表，但是这个参数列表可以分多次传入，改变this指向后不会立即执行，而是返回一个永久改变this指向的函数。

function fn(...args) {
    console.log(this, args);
}
let obj = {
    myname: "anada"
}
const bindFn = fn.bind(obj); 
bindFn(1,2)  //this指向obj
fn(1, 2)   //this指向window
bindFn(3,4)  //this指向obj

• 小结
  • 相同点：三者都可以改变this对象的指向；三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
  • 不同点：三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入；bind是返回绑定this之后的函数，apply、call 则是立即执行。

三、bind的实现步骤

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

Function.prototype.myBind = function(context){     
    // 判断调用对象是否为函数
    if(typeof this != "function"){
        throw new TypeError("Error")
    }
     // 获取参数
    const args = [...arguments].slice(1); 
    const fn = this;
    return function Fn(){
         // 根据调用方式，传入不同绑定值
        return fn.apply(this instanceof Fn ? new fn(...arguments) : context,args.concat(...arguments));
    }
}