前 言

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(){
  // ...
}

之前浏览别人的贴子，看到这样一种说法：
就是这三个方法的第一个参数可以有以下几种情况：

1. 不传，或者传null，undefined，此时函数中的this指向window对象；
2. 传递函数名，此时函数中的this指向这个传入函数的引用；
3. 传递字符串，数值或布尔型的基础数据类型，此时函数中的this指向对应的包装对象，如String、Number、Boolean；
4. 对象，此时函数中的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）

感谢阮老师！原文地址