JavaScript中改变this指向的方法【总结】- 【各自主要应用场景】

---

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

1.call方法

call方法有两个作用：

1. 调用函数
2. 改变this指向

1.1 写法

fun.call(thisArg, arg1, arg2, ...)

• thisArg：指向谁
• arg1：参数1
• arg2：参数2

1.2 应用

• 改变this指向

let o = {
    name:'Andy'
}
function fn(a,b) {
    console.log(this); //o
    console.log(a+b); // 3
}
fn.call(o,1,2)

• 实现继承

//call 可以实现继承
function Father(uname,age,sex) {
    this.uname = uname;
    this.age = age;
    this.sex = sex
}
function Son(uname,age,sex) {
    Father.call(this,uname,age,sex)
}

let son = new Son('小明',16,'男')
console.log(son); // Son {uname: '小明', age: 16, sex: '男'}

2. apply方法

apply()方法调用一个函数。简单理解为调用函数的方式，它和call方法一样也可以改变函数的this指向。

2.1 写法

fun.apply(thisArg, [argsArray])

• thisArg：指向谁
• argArray：传递的值，必须包含在数组里面
• 返回值就是函数的返回值，因为它就是调用函数

2.2 应用

• 改变this指向

let o = {
    name:'Andy'
}
function fn(arr) {
    console.log(this); //o
    console.log(arr); //'apple' ,  如果传入的是数组包含着字符串，那么会将数组去掉
}
fn.apply(o,['apple'])

• 用apply借助借助于数学内置函数对象求数组中的最大值或最小值等

//我们可以用apply借助于数学内置函数对象求数组中的最大值或最小值等
//Math.max()
let arr = [1,33,4,22,99,7]
let max = Math.max.apply(Math,arr)
console.log(max); // 99

3. bind方法

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

3.1 写法

fun.bind(thisArg, arg1, arg2, ...)

• thisArg：指向谁
• arg1：参数1
• arg2：参数2
• 返回由指定的this值和初始化参数改造的原函数拷贝,简单来说，就是将改造好产生的一个新函数返回给我们。

3.2 应用

• 改变this指向

let o = {
    name:'Andy'
}

function fn() {
    console.log(this);  //o
}

let newFn = fn.bind(o)
newFn()  //注意，此时才调用该函数

//1. 不会调用原来的函数，可以改变原来函数内部的this指向
//2. 返回的是原函数改变this之后产生的新函数

如果有一个按钮，当我们点击了之后，就禁用这个按钮，3秒钟之后开启这个按钮

let btn = document.querySelector('button')
btn.onClick = funciton() {
	this.disabled = true  //这里的this指向btn这个按钮
	setTimeout(function(){
		this.disabled = false //定时器中的this，起初指向的是window，
							 //但是经过bind方法指向了btn
	}.bind(this),3000) //因为这个this在定时器函数外，因此它指向的是btn按钮
}

此案例用bind方法最合适，因为用其他方法会立即调用，而用bind就可以根据案例要求去随时调用，因此这个方法也是以上三个方法中用到的最多的！

4. 总结

相同点：

都可以改变函数内部的this指向。

不同点：

1. call和apply会调用函数，并改变函数内部this指向、
2. call和apply传递的参数不一样，call传递参数aru1，aru2形式，apply必须数组形式[arg]
3. bind 不会调用函数，可以改变函数内部this指向

主要应用场景：

1. call经常做继承
2. apply 经常跟数组有关系。比如借助于数学对象实现数组最大值或最小值
3. bind 不调用函数，但是还想改变this指向。必须改变定时器内部的this指向。