call、apply 和 bind 区别

this指向

this 一般 谁调用就指向谁，即指向调用者

调用方式	this指向
普通函数调用	widow
构造函数调用	指向实例对象 原型对象里面的方法也指向实例对象
对象方法调用	这个方法的所属对象
事件绑定调用	绑定事件对象
定时器函数	window
立即执行函数	window

1. call()

• 会调用一个对象
• 改变函数的this指向

function fn() {
	console.log(this);   // 指向 o 这个对象
};
var o = {
	uname: 'andy'  // name 不能当做属性名
};

fn.call(o);  // 改变this指向，指向 o 这个对象

• 应用场景： 可以实现继承

function Father(uname,age) {
	// this 指向对象
	this.uname = uname;
	this.age = age;
};
function Son(uname,age) {
	// 调用父构造函数，父构造函数中的this 指向子构造函数的this
	// 改变 uname 和 age 的指向
	Father.call(this,uname,age);
};
var son = new Son('Tiffny',32);

2. apply()

• 调用一个函数
• 改变函数内部的this指向
• 但是apply的参数必须是数组（伪数组）
• 应用场景：经常跟数组有关系
• 语法:

// thisAry: 当前this指向的调用对象
fun.apply(thisAry,'伪数组');

例子：

function fn(arr) {
	console.log(this); // 指向 o 这个对象
	console.log(arr); // 'blue','green'
};
var o = {
	uname: 'Tony'
};
fn.apply(o,['blue','green']); // 参数必须是数组

/----- apply 的主要应用
// 例如：借助数学内置对象,选最大值
var arr = [1,54,21,23,88,47];
// 不需要 this 指向，写max的调用者Math最好
var max = Math.max.apply(Math,arr);

console.log(max); // 输出为 88

/------ 扩展： ES6 扩展运算符
// ...arguments,将数组分解,拆开
var arr01 = [5.89,41,36,23];
var maxi = Math.max(...arr01);
console.log(maxi);

3. bind()

• 不会调用函数
• 改变this指向，返回一个新的函数
• 如果想改变 this 指向，并不想调用函数，使用bind()方法
• 应用场景： 不调用函数，想改变this指向

1. 不会调用原来的函数，可以改变原来函数内部的this指向
2. 返回的是原函数改变this只想之后产生的新函数
3. 如果有的函数不需要立即执行此函数，又想改变函数内部的this指向时使用bind

var o = {
	age: 12
};
function fun(a,b){
	console.log(this);
	console.log(a+b);
};
// this 指向的是 o 这个对象
var f = fun.bind(o,14,2); // 此时的f是 bind 返回的新函数
f(); // 调用新函数

例子：当点击按钮，三秒之后禁用按钮。

var btns = document.querySeletorAll('button');
for(const i = 0; i < btns.length; i++) {
	btns[i].onclick = function() {
		this.disabled = true;
		/*
		setTimeout(function() {
			this.disabled = false; // 此时this指向window
		},3000)
		*/
		setTimeout(function() {
			this.disabled = false; // 此时this指向 btns这个对象
		}.bind(this),3000)
	}
}

总结

改变this指向方法	作用	调用方式	应用场景
call()	改变this指向，参数以逗号隔开	调用一个对象	实现继承
apply()	改变this指向，参数是数组	调用一个函数	当参数是数组的形式
bind()	改变this指向	不会调用函数，调用一个新的函数	既不想立即执行，又想改变this指向