前端开发：详细讲解this指向的相关知识
source link: https://my.oschina.net/sanzhanggui/blog/4904915
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在前端js中，this虽然只是其中的一个关键字而已，但是确实一个比较特殊的关键字。为什么说this在js关键字中很特殊呢，原因就在于this是函数在运行时自动生成的一个对象，this的指向在函数定义的时候不是确定的，只有在函数运行的时候才能确定this指向是谁，其实this最终指向的就是调用它的那个对象（this指向的是最后调用它的对象），说白了就是“谁调用指向谁”。
首先来了解一下this指向的优点好处：在特定函数和写法中，this可以方便快捷的引用对象，使得写法简单容易复用和代码简洁精简。
一、this指向不同是由函数调用方式决定的
1、普通函数的调用，this指向window，eg:
function fun() {
console.log(this); //指向window
window.fun();
2.构造函数的调用，this指向实例对象
function Student(age, name) {
this.age = age;
this.name = name
console.log(this) //this分别指向Student的实例对象s1、s2
var s1 = new Student(18, 'ls')
var s2 = new Student(18, ‘cc’)
3.对象方法的调用，this指向该对象方法所属的对象
var obj = {
fun: function () {
console.log(this); //指向obj
obj.fun();
4.定时器函数的调用，this指向window
setInterval(function () {
console.log(this); //指向window
}, 2000);
5.通过事件绑定方法的调用，this指向绑定事件的对象
<body>
<button id="btn">cc</button>
<script>
var objBtn = document.getById("btn");
objBtn.onclick = function() {
console.log(this); // 指向btn
</script>
</body>
6.箭头函数的调用，this指向父级对象
var obj = {
fun: () => {
console.log(this); //this指向了obj的父级对象window
obj.fun(); //指向window
7.匿名函数的调用，this指向全局变量window
(function fun() {
console.log(this); //this指向全局变量window
})();
二、更改this指向的三个方法
每一个function构造函数的都有是三个方法：call(), apply(), bind()，也就是这三个方法可以更改this的指向，但是call(), apply()只能在特定作用域调用函数，而bind()方法会创建一个函数实例，然后this会被绑定到bind()上面。
1.call()方法
把普通函数的this指向window的，更改this指向
eg:
var Student = {
name:”caicai”, age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this);
}
fun(“ll”,30);
修改上面例子的更改this指向，如下所示：
var Student = {
name:"caicai", age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this);
console.log(this.name);
}
fun.call(Student,”ll”,30); //现在this就指向Student了
2.apply()方法
apply() 方法与call()很类似，它们的不同之处在于提供参数的方式，apply()使用参数数组，而不是参数列表
<script>
var Student = {
name:"caicai",
age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this.age);
}
aa.call(Student,1,2);
aa.apply(Student,[1,2]);
</script>
3.bind()方法
bind()方法创建的是一个新函数(也称为绑定函数)，它和被调用函数有相同的函数体。当目标函数被调用时，this的值就会绑定到bind()的第一个参数上面。
<script>
var Student = {
name:"caicai", age:25
}
function fun(x,y){
console.log(x+","+y);
console.log(this.age);
}
aa.call(Student,1,2);
aa.apply(Student,[1,2]);
aa.bind(Student,1,2)(); //必须调用，不然就只是单纯的绑定而已
</script>
4. 存储this指向到变量里面
var obj = document.getById("obj");
obj.onclick = function () {
var _this = this; //把this储存在变量中，且不改变定时器的指向
setTimeout(function () {
console.log(this); //指向window
console.log(_this); //this对当前对象的引用
}, 2000);
以上就是本章全部内容，欢迎关注三掌柜的微信公众号“iOS开发by三掌柜”，三掌柜的新浪微博“三掌柜666”，欢迎关注！
三掌柜的微信公众号：
三掌柜的新浪微博：
Recommend
-
64
前言 本文主要从webpack4.x入手，会对平时常用的Webpack配置一一讲解，各个功能点都有对应的详细例子，所以本文也比较长，但如果你能动手跟着本文中的例子完整写一次，相信你会觉得Webpack也不过如此。 一、什么是webpack，为什么
-
45
上一篇文章 详细讲解 | 利用python开发Burp Suite插件（一） 简单介绍了如何配置burpsuite插件开发环境和burp suite插件api的大概用途，详细内容可参考官方手册。今天将利用python实战写...
-
13
Promise入门到精通(初级篇)-附代码详细讲解 Promise ，中文翻译为 承诺,约定,契约 ，从字面意思来看，这应该是类似某种协议，规定了什么事件发生的条件和触发方法。 ...
-
14
SpringMVC入门详细讲解 看过请留个言，转载请注明出...
-
6
详细讲解Android中的Message的源码 – Android开发中文站你的位置：Android开发中文站 > Android开发 >
-
4
7000字详细讲解区块链的革新者：以太坊 链集市ChainMarket 刚刚 编者注：时间倒退到2013年，进入区块链世界不久后的程序员V...
-
9
在前端开发中，this虽然只是其中的一个关键字而已，但是确实一个比较特殊的关键字。为什么说this在js关键字中很特殊呢，原因就在于this是函数在运行时自动生成的一个对象...
-
4
最近换了新工作终于凑齐一些有趣的bug与问题了, 比如在ts方面做了深入的研究, 国际化开发方面有了一些思考等等, 总之新的工作刚刚开始就收获满满, 有对'字节跳动'国际化业务感兴趣的同学可以把简历砸过来, 将来一起挑战各种有趣的难题。(当然除了国际化其...
-
10
一、this指向 点击打开视频讲解更加详细 this随处可见，一般谁调用，this就指向谁。this在不同...
-
8
数据库全面知识详细讲解 - 极道 大约一年前，我在考虑下一个项目应该选择哪个数据库时，发现自己对数据库的区别了解得还不够...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK