JavaScript 为我们专门提供了一些函数方法来帮我们更优雅的处理函数内部this的指向问题,常用的有 bind()call()apply()三种方法。

1. call()方法

call()方法调用一个对象。简单理解为调用函数的方式,但是它可以改变函数的this指向

1
fun.call(thisArg, arg1, arg2, ...);
  • thisArg:在fun函数运行时指定的this
  • arg1arg2:传递的其他参数
  • 返回值就是函数的返回值,因为它就是调用函数
  • 因此当我们想改变this指向,同时想调用这个函数的时候,可以使用call(),比如继承
1
2
3
4
5
6
7
8
9
10
11
var o = {
name: 'andy',
};
function fn(a, b) {
console.log(this);
console.log(a + b);
}
fn(1, 2); // 此时的this指向的是window 运行结果为3
fn.call(o, 1, 2); // 此时的this指向的是对象o,参数使用逗号隔开,运行结果为3

fn.call(1, 2); // this->1, a=2, b=undefined

另外,在严格模式下和非严格模式下,this有所区别:

1
2
3
4
5
6
7
8
9
// 非严格模式
fn.call(); // this -> window
fn.call(null); // this -> window
fn.call(undefined); // this -> window

// 严格模式
fn.call(); // this -> undefined
fn.call(null); // this -> null
fn.call(undefined); // this -> undefined

2. apply()方法

apply()方法调用一个函数。简单理解为调用函数的方式,但是它可以改变函数的this指向。

apply()call()方法的作用是一模一样的,都是用来改变方法的this关键字并且把方法执行,而且在严格模式下和非严格模式下,对于第一个参数是null/undefined这种情况的规律也是一样的。

1
fun.apply(thisArg, [argsArray]);
  • thisArg:在fun函数运行时指定的this
  • arg1arg2:传递的其他参数,写成数组形式传递
  • 返回值就是函数的返回值,因为它就是调用函数
  • apply()主要跟数组有关系,比如使用Math.max()求数组的最大值
1
2
3
4
5
6
7
8
9
var o = {
name: 'andy',
};
function fn(a, b) {
console.log(this);
console.log(a + b);
}
fn(); // 此时的this指向的是window 运行结果为3
fn.apply(o, [1, 2]); //此时的this指向的是对象o,参数使用数组传递 运行结果为3

3. bind()方法

bind()方法不会调用函数。但是能改变函数内部this指向。

严格模式下和非严格模式下,对于第一个参数是null/undefined这种情况的规律与call()相同。

1
fun.bind(thisArg, arg1, arg2, ...);
  • thisArg:在fun函数运行时指定的this
  • arg1arg2:传递的其他参数
  • 返回由指定的this值和初始化参数改造的原函数拷贝
  • 因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用bind()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var o = {
name: 'andy',
};

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

// 这里不会输出任何值,因为bind并不调用函数
fn.bind(o, 1, 2);

// 此处的f是bind返回的新函数
var f = fn.bind(o, 1, 2);
// 调用新函数 this指向的是对象o,参数使用逗号隔开
f();

4. call()apply()bind()三者的异同

  • 共同点:都可以改变this指向

  • 不同点:

    • call()apply() 会调用函数,并且改变函数内部this指向.
    • call()apply()传递的参数不一样,call()传递参数使用逗号隔开apply()使用数组传递
    • bind() 不会调用函数,可以改变函数内部this指向
  • 应用场景

    1. call()经常做继承
    2. apply()经常跟数组有关系,比如借助于数学对象实现数组最大值最小值
    3. bind()不调用函数,但是还想改变this指向,比如改变定时器内部的this指向
call()apply()bind()
相同点改变函数this指向改变函数this指向改变函数this指向
是否调用函数
传递参数逗号,隔开数组形式[]逗号,隔开
应用场景继承与数组有关不想调用函数