call、apply、bind的区别以及源码实现

首先，需要明确，call()、apply()、bind()这三个方法的作用都是 改变this指向

它们之间的不同点在于：

• call和apply是直接调用的，而bind不会立即调用，需要手动调用（原因在于bind返回的是一个改变了this指向的函数，所以需要手动调用）

• call和bind的第二个参数都是以参数列表的形式（可多次传入），而apply的第二个参数需要以数组的方式（一次传入）

相同点：

• 都能够改变this的指向

• 第一个参数都是 this要指向的参数

• 都可以利用后续参数传参

在非严格模式下，如果第一个参数是null或者undefined，会把全局对象(浏览器是window)作为this的值。 而在严格模式下，null是null，undefined是undefined。

先用一个例子，看看三者的用法

var year = 2022
function getDate(month, day) {
  return this.year + '-' + month + '-' + day
}

let obj = {year: 2023}
getDate.call(null, 3, 8)    //2022-3-8
getDate.call(obj, 3, 8)     //2023-3-8
getDate.apply(obj, [3, 8])  //2023-3-8
getDate.bind(obj)(3, 8)     //2023-3-8

可以看到，call和bind传参都是参数列表的形式，而apply是以数组的形式一次性传入。 而bind的特殊在于它首先改变了this的指向，改为obj，然后返回改变指向后的函数，所以需要再调用一次，这个时候进行传参。
传入null时，this指向全局对象，所以year为2022。而传入obj后，this的指向改为了obj，所以year值为2023

接着通过几个例子，再加强一下理解

var name = 'Eric',age = 17;
var obj = {
    name: 'Tom',
    objAge: this.age,
    myFun: function(){
        console.log(this.name + "年龄" + this.age);
    }
}
console.log(obj.objAge)  // 17
obj.myFun()  // Tom年龄undefined

var username = 'Jerry';
function shows(){
    console.log(this.username);
}
shows()  // Jerry

这两个例子，一个是指向obj，一个是指向window

如果使用这三种方法改变this指向呢?

var name = 'Eric',age = 17;
var obj = {
    name: 'Tom',
    objAge: this.age,
    myFun: function(){
        console.log(this.name + "年龄" + this.age);
    }
}
var you = {
    name: 'LaLa',
    age: 30
}
obj.myFun.call(you); // LaLa年龄30
obj.myFun.apply(you); // LaLa年龄30
obj.myFun.bind(you)(); // LaLa年龄30

三者都改变了this的指向，不过call和apply是立即调用，bind是需要调用一次的

var name = 'Eric',age = 17;
var obj = {
    name: 'Tom',
    objAge: this.age,
    myFun: function(from,to){
        console.log(this.name + ",年龄" + this.age + ",来自" + from + ",去往" + to);
    }
}
var you = {
    name: 'LaLa',
    age: 30
}
obj.myFun.call(you,'南京','上海'); // LaLa,年龄30,来自南京,去往上海
obj.myFun.apply(you,['南京','上海']); // LaLa,年龄30,来自南京,去往上海
obj.myFun.bind(you,'南京','上海')(); // LaLa,年龄30,来自南京,去往上海
obj.myFun.bind(you,['南京','上海'])(); // LaLa,年龄30,来自南京,上海,去往undefined

同样，都可以接收到两个参数。最后才测试了一下如果bind也用这种数组形式一次性传递，其实它是只对应from形参的

到这，大概对三者应该有一定的区别能力了。然后就可以了解一下各自的应用场景

call和apply的应用场景

a、函数间相互调用

function add(a,b){
    console.log(a+b)
}

function sub(a,b){
    console.log(a-b);
}
add.call(sub,5,6);   // 11
add.apply(sub,[5,6]);  // 11

在这里，乍一看很奇怪，add和sub都是函数，其实是把函数当成了Function对象

b、构造函数之间的调用

function Person(){
     this.age = 50;
     this.showAge= function(){
        console.log(this.age);
    }
}
function Son(){
    this.age  = 20;
}

var father  = new Person();
var xiaoming = new Son();

father.showAge.apply(xiaoming)  //20
father.showAge.call(xiaoming)  //20
xiaoming.showAge();  //报错，showAge() is not a function

如果这样写呢?

function Person(){
     this.age = 50;
     this.showAge= function(){
        console.log(this.age);
    }
}

// 让Son也具有Person的方法
function Son(){
    this.age  = 20;
    Person.call(this);
}

var father  = new Person();
var xiaoming = new Son();

father.showAge.apply(xiaoming)  // 50
father.showAge.call(xiaoming)  // 50
xiaoming.showAge();  // 50

这里可以理解为改变了2次，第一次this指向xiaoming，他是Son，但是Son内部的Person.call(this)使得this又拥有了Father的方法，我们在Son中输出this，可以得到

c、利用apply进行拼接

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];
[].push.apply(arr1, arr2);
console.log(arr1);  // [1, 2, 3, 4, 5, 6]

d、利用call判断数据类型

var arr = [1, 2, 3];
var arr1 = 'qwer';
console.log(Object.prototype.toString.call(arr)); // [object Array]
console.log(Object.prototype.toString.call(arr1)); // [object String]

bind的应用场景

配合setTimeout使用

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    
    var lis = document.getElementsByTagName('li');
    for (var i = 0; i < lis.length; i++) {
        lis[i].onclick = fn;
    }
    function fn() {
        setInterval(function () {
            console.log(this.innerText)
        }.bind(this), 1000)                      //this指向事件源lis[i]
    } 

</script>

源码实现

call源码实现：

Function.prototype.myCall = function(context) {
    if(typeof this != 'function') { // 容错处理 防止调用这个方法的对象不是函数
        throw new TypeError('Error');
    }
    context = context || window; 
    context.fn = this; // this指向 谁调用这个函数this就指向谁
    const args = [...arguments].slice(1); // 参数
    const result = context.fn(...args);
    delete context.fn;
    return result; // 返回一个对象
}

// 测试
function Person(){
     this.age = 50;
     this.showAge= function(){
        console.log(this.age);
    }
}

// 让Son也具有Person的方法
function Son(){
    this.age  = 20;
    Person.myCall(this);
}

var father  = new Person();
var xiaoming = new Son();

father.showAge.apply(xiaoming)  // 50
father.showAge.myCall(xiaoming)  // 50
xiaoming.showAge();  // 50

apply源码实现

Function.prototype.myApply = function(context) {
    console.log(arguments);
    if(typeof this != 'function') { // 容错处理 防止调用的这个对象不是函数
        throw TypeError('error');
    }
    context = context || window; 
    context.fn = this; 
    var result;
    if(arguments[1]) {
        result = context.fn(...arguments[1]);
    }else {
        result = context.fn();
    }
    delete context.fn;
    return result;
}

// 测试用例
function Father(name, price) {
    this.name = name;
    this.price = price;
}
function Son(name, price) {
    Father.myApply(this, [name, price]);
    this.age = 18;
}
var son = new Son('banana', 5);
console.log(son.name);

bind源码实现

// 1. 函数A调用bind方法 需要传递的参数o, x, y, z...
// 2. 返回新的函数B
// 3. 函数B在执行的时候 具体的功能实现实际上还是使用的A 只不过this指向变成了o 不传是window
// 4. 函数B在执行的时候 你传递参数 会拼接到x, y, z的后面 一并在内部传递给A执行
// 5. 当你以new B() 构造函数依旧是A 而且obj这个参数不会起到任何操作
Function.prototype.myBind = function(target) {
    var self = this;
    var args = [].slice.call(arguments, 1);
    var temp = function() {};
    var f = function()  {
        var _args = [].slice.call(arguments, 0);
        return self.apply(this instanceof temp ? this : (target || window), args.concat(_args));
    }
    temp.prototype = self.prototype;
    f.prototype = new temp();
    return f;
}

// 测试
function get() {
    return this.x;
}
var module = {
    x: 18  
}
var getX = get.myBind(module);
getX();