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

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整

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指向。

最后

全网独播-价值千万金融项目前端架构实战

从两道网易面试题-分析JavaScript底层机制

RESTful架构在Nodejs下的最佳实践

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一线互联网企业如何初始化项目-做一个自己的vue-cli

思维无价，看我用Nodejs实现MVC

代码优雅的秘诀-用观察者模式深度解耦模块

前端高级实战，如何封装属于自己的JS库

VUE组件库级组件封装-高复用弹窗组件