call、apply、bind函数在改变函数运行时this的指向问题的区别

首先，call、apply、bind都可以改变函数运行时this的指向问题

<script>

var value = "王1";

var obj = {

value: "开2",

friend: {

value: "贵3",

sayHi: function () {

console.log(this.value);

}

}

};

obj.friend.sayHi();//打印贵3

obj.sayHi = obj.friend.sayHi;

//谁调用this就属于谁

obj.sayHi();//打印开2

//window

var sayHi = obj.friend.sayHi;

sayHi();//打印王1

console.dir(sayHi);//dir查看结构

//call()参数1是你要修改的this

var obj2 = { value: "星星" };

sayHi.call(obj2);

sayHi.apply(obj2);

function sayHello(a, b) {

console.log(this, "jom", a, b)

}

sayHello(10, 20);

//call:从参数2开始，就是对应原函数的参数

sayHello.call(obj2, 96, 72);

//apply:参数2是个数组，数组位置对应原函数参数

sayHello.apply(obj2, [66, 888]);



//数组元素对应的形参，借助apply

var numbers = [9, 1, 20, 30, 100]

var min = Math.min.apply(Math, numbers);

console.log(min);

//es6的解构赋值

var min = Math.min(...numbers);

console.log(min);

//bind函数

//bind 方法不会立即执行，而是返回一个改变了上下文 this 后的函数

var fn = sayHello.bind(obj, 111, 222);

fn();

setTimeout(function () {

console.log(this);//window

}.bind(obj2), 2000);

</script>

通过上面的例子可以看出call、apply和bind函数存在的区别:

bind方法不会立即执行，返回一个改变了上下文的this后的函数, 便于稍后调用； apply, call则是立即执行。

 除此外, 在 ES6 的箭头函数下, call 和 apply 将失效, 对于箭头函数来说:

// 箭头函数体里面的 this 对象, 是定义时所在的对象, 

// 箭头函数不能用作构造函数，也就是说不能使用 new 命令

// 箭头函数不可以使用 arguments 对象

所学有限，总结不到位欢迎补充！