前 言
bind、apply和call是JavaScript中Function对象自带的方法，其作用都是改变当前函数作用域this指向。默认的函数体内this指向调用该函数的对象，某些时候我们需要改变函数体内this指向，这篇文章就来说说这个事儿。（ES6箭头函数另说）
用 法
-
bind用法
语法：bind([thisObj[,param1,param2,...]])
bind方法返回一个函数，称为绑定函数，当调用这个绑定函数时，它会以创建绑定函数时传入bind()的第一个参数绑定this，第二个以及后面的参数会作为原函数的实参传入。
看代码：
class Cat{
constructor(){
this.message = '喵~';
}
say(){
console.log(this.message);
}
}
class Dog{
constructor(){
this.message = '汪~';
}
say(){
console.log(this.message);
}
}
let cat = new Cat();
let dog = new Dog();
cat.say() // '喵~'
dog.say() // '汪~'
cat.say.bind(dog)() // '汪~'，因为bind方法返回一个函数，所以要加（）让其执行
dog.say.bind(cat)() // '喵~'
-
apply用法
语法：apply([thisObj[,arg]])
apply方法的第一个参数是要绑定到this的对象，第二个参数是个类数组，表示原方法的参数列表。
看代码：
class Cat{
constructor(){
this.message = '喵~';
}
setColor(color){
this.color = color;
console.log(this.message,this.color);
}
}
class Dog{
constructor(){
this.message = '汪~';
}
setColor(color){
this.color = color;
console.log(this.message,this.color);
}
}
let cat = new Cat();
let dog = new Dog();
cat.setColor('white'); // '喵~' 'white'
dog.setColor('white'); // '汪~' 'white'
cat.setColor.apply(dog,['black']); // '汪~' 'black'
dog.setColor.apply(cat,['yellow']); // '喵~' 'yellow'
// apply方法只有两个参数，如果原方法有多个参数（setColor(color1,color2)），
// 则apply写法为cat.setColor.apply(dog,[color1,color2])
-
call用法
语法：call([thisObj[,param1,param2,...]])
call方法其实和apply方法一样，差别就在向原方法传值上，还拿上面的例子：
class Cat{
constructor(){
this.message = '喵~';
}
setColor(color){
this.color = color;
console.log(this.message,this.color);
}
}
class Dog{
constructor(){
this.message = '汪~';
}
setColor(color){
this.color = color;
console.log(this.message,this.color);
}
}
let cat = new Cat();
let dog = new Dog();
cat.setColor('white'); // '喵~' 'white'
dog.setColor('white'); // '汪~' 'white'
cat.setColor.call(dog,'black'); // '汪~' 'black'
dog.setColor.call(cat,'yellow'); // '喵~' 'yellow'
// call方法有多个参数，如果原方法有多个参数（setColor(color1,color2)），
// 则call写法为cat.setColor.call(dog,color1,color2)
扩 展
class关键字是ES6才出现的，在这之前我们是这样写一个类的：
function Animal(){
// ...
}
之前浏览别人的贴子，看到这样一种说法：
就是这三个方法的第一个参数可以有以下几种情况：
- 不传，或者传
null，undefined，此时函数中的this指向window对象；- 传递函数名，此时函数中的this指向这个传入函数的引用；
- 传递字符串，数值或布尔型的基础数据类型，此时函数中的this指向对应的包装对象，如
String、Number、Boolean；- 对象，此时函数中的this指向这个对象。
我们通过代码来看：
function Cat(){
// ...
}
Cat.prototype.say = function () {
console.log(this);
}
function Dog(){
// ...
}
Dog.prototype.say = function(){
console.log(this);
}
function f(){}
var cat = new Cat();
var dog = new Dog();
cat.say(); // Cat
dog.say(); // Dog
cat.say.call(); // Window
cat.say.call(null); // Window
cat.say.call(undefined); // Window
cat.say.call(f); // function f(){}
cat.say.call(8); // Number {8}
cat.say.call('8'); // String {'8'}
cat.say.call(true); // Boolean {true}
这个时候是不是豁然开朗，但是做事比较严谨的我用ES6语法测试了一下，竟然出现了不一样的结果：
class Cat{
constructor(){
// ...
}
say(){
console.log(this);
}
}
class Dog{
constructor(){
// ...
}
say(){
console.log(this);
}
}
function f(){}
let cat = new Cat();
let dog = new Dog();
cat.say(); // Cat
dog.say(); // Dog
cat.say.call(); // undefined
cat.say.call(null); // null
cat.say.call(undefined); // undefined
cat.say.call(f); // function f(){}
cat.say.call(8); // Number {8}
cat.say.call('8'); // String {'8'}
cat.say.call(true); // Boolean {true}
我们发现此时第一个参数不传，传null或者传undefined时，this指向的并不是Window。
关于这个问题，阮老师在ECMASctipt6入门中有提到：
如果将这个方法（class内部的方法，本文的
say()方法）提取出来单独使用，this会指向该方法运行时所在的环境（由于 class 内部是严格模式，所以 this 实际指向的是undefined）
感谢阮老师！原文地址
