call, apply, bind的区别

call,apply,bind的使用

这些都是函数的原生方法，用于改变this指向，可以直接使用

call()

// 简单使用
function fn() {
	console.log(this);
}
fn.call(document);// 输出 #document 对象

// 传参使用
function fn(a, b, c) {
    console.log(this, a, b, c);
}
fn.call(document, 1, 2, 3);// 输出 #document, 1, 2, 3

使用call方法时，函数会立刻执行，并且修改this指向（call方法不会影响原函数）

apply()

与call()基本一致，唯一一点不同是传参

function fn(a, b, c) {
    console.log(this, a, b, c);
}

fn.apply(document, [1, 2, 3]);
fn.call(document, 1, 2, 3);

call方法传参是一个一个传，而apply方法中所有要传递的参数都放到一个数组中，一起传递

bind()

bind的特点是，使用bind方法后，不会立刻执行，而是返回一个新函数，等待我们手动去调用这个新函数

var name = 'window';
var obj = {
    name: 'obj',
    sayName: function() {
        console.log(this.name);
    }
};
obj.sayName();// obj

var temp1 = obj.sayName;
temp1();// window

var temp2 = obj.sayName.bind(obj);
temp2();// obj

bind不兼容IE8及以下的版本

特点：

绑定后返回的新函数，再绑定其他对象时，无效

function test() {
    console.log(this);
}
test();// window
let temp = test.bind(document);
temp();// document
let temp2 = temp.bind(window);
temp2();// document

call,apply,bind的异同

不同点

call 与 apply 的区别

有且仅有一个区别，就是参数

call方法传参是一个一个传——fn.call(‘xxx’, 1, 2, 3);

apply方法传参是把所有参数放到一个数组里面，一次性传递——fn.call(‘xxx’, [1, 2, 3]);

call, apply 与 bind 的区别

call、apply 调用了以后就会立刻执行

bind 调用后会返回新的函数，等待我们自己去使用这个函数

共同点

第一个参数都是this要指向的对象，不传值或传null或传undefined的时候默认指向window对象

后面的参数都是传参用

call,apply,bind的应用

求数组的最大 / 最小值

let arr = [45,776,23,4,13,-324,3,566];
let apply = Math.max.apply(Math, arr);
let call = Math.max.call(Math, ...arr);
console.log(apply, call);

Math.max 替换为 Math.min就是求最小值

...展开运算符

apply实现数组追加

var arr1 = [1,2,3];
var arr2 = [4,5,6];
[].push.apply(arr1, arr2);
arr1.push(...arr2);// 同样的效果

call，apply实现继承

function animal(a, b) {
    this.type = 'animal'
    this.behavior = function(){
        console.log(this.type+" is running")
    }
}

function cat(a, b) {
    this.name = 'cat'
    //这里call的意思就是把animal的方法应用到cat这个对象身上
    //所以cat就继承了animal的方法
    animal.call(this);// apply同样效果
}

console.log(new cat())

TODO：源码解析