js - 浅谈js中this的指向

曾经终败给现在 2021-09-20 06:42 417阅读 0赞

**this最终指向的是调用它的那个对象**

##### 1、在普通函数里的this指向 #####

例子1：  
![Alt][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS02ZGU3ZTdlOGExYzJjNTVlLnBuZw][]  
这里的this最终指向**window**，因为这里是window调用的findThis()方法

例子2：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS02OWMzZGI1MWI4NjVlNGUxLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1kOTA5NDI0Y2VmNGYxMzMyLnBuZw][]  
这里的this指向**findThis**，因为这里是findThis调用的logName()方法  
**注意：this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用就指向谁。**

例子3：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS04ZjI1MjRkZWFkNjViY2MyLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS00MjgzNmMyYjE2ZTU0OTk1LnBuZw][]  
这里的this和例子2的this的指向是一样的，都是指向**findThis**，因为这里是window下面的findThis属性直接调用的logName()方法,而不是window直接调用的，所以这里的this指向的是findThis

例子4：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS05ZTZhMDQyOTYxODc1ZTNhLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01OTczZWNlMzQ3Yjk0NzIwLnBuZw][]  
可以发现，同样是通过findThis点出来的，但是这里的this指向的却是**age**而不是findThis，对比上方的几个例子，你会更加能理解this的指向问题。

例子5：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1jZGZjMmQ2YTNkNTY3ZjEzLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1lMmRjNTg3OWQyOGU5ODMxLnBuZw][]  
这里的this指向**window**，如果懵了的话，就说明，你还未理解这句话：\*\*this指向的永远是最后调用它的那个对象，也就是看它执行的时候是谁调用的。\*\*虽然logName()是被对象age所引用，但是在将它赋值给变量b的时候并没有执行这个方法，而是赋值之后才通过window来调用的，所以这里的this指向的是window。

**总结**：

*  如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。
 *  如果一个函数中有this，这个this被上一级的对象所调用，那么this就指向上一级的对象。
 *  如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是否被最外层的对象所调用，this指向的也只是它的上一级的对象。

##### 2、在构造函数里的this指向 #####

例子1：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS04MGY0ZmY2OWNmMzVmMzQ2LnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01MzE4YzI4N2M2MmNiNWJmLnBuZw][]  
这里的对象b可以点出函数FindThis()里面的names是因为new关键字可以改变this的指向，将这个this指向了**对象b**（new关键字就是创建了一个实例对象，相当于把FindThis复制了一份到b里面），此时仅仅是创建而已，并没有执行，而调用FindThis()方法的是对象b，所以this指向对象b，所以可以打印出names。

**当this遇到return：**  
例子：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS00ZTFmYmVmNWJjYzY3NjU0LnBuZw][]  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS05ZTQ5NjJkZjcyNmZmZmJkLnBuZw][]  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0yN2I4OWJjNWIzZDdkOTU2LnBuZw][]  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0zYmI2M2YzYzFhODUwZjg0LnBuZw][]  
比较上面的几个例子，会发现：**如果返回值是一个对象，那么this指向的就是那个返回的对象，如果返回值不是一个对象，那么this还是指向函数的实例**

**特殊情况：null虽然也是对象，但是在这里this还是指向那个函数的实例对象**  
例子：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1iOTYwZmE5MTVjZDZjYTM5LnBuZw][]

##### 3、绑定事件的this指向 #####

例子：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS00MGY4MzhhZmRhYzQ0OGJjLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01NTg2NjRiN2M4YzhlZjNhLnBuZw][]  
这里的this指向的是\*\*按钮\*\*，得出的结论：**元素绑定事件，事件触发后，执行的函数中的this指向的是当前元素**

##### 4、定时器中的this指向 #####

例子1：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0xYWVhNjIzYzIzOTBlM2VhLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0xMDE0ZTg0NWU4ZGQxZDcxLnBuZw][]  
例子2：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0wZjRmMWI5MmQzYTJmMDYzLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1hNDkxOGNiZWExNTk5YjhhLnBuZw][]  
这里的this都是指向**window**，得出结论：**定时器中的this，指向的是window**

##### 5、绑定了bind的函数中的this指向 #####

例子：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01MjZhOGY3ODhhY2Q1OGJiLnBuZw][]  
运行结果：  
![aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01OTdlZjJmZWZlZWI2ZmY3LnBuZw][]  
得出结论：**函数调用时如果绑定了bind，那么函数中的this指向了bind中绑定的元素**

[Alt]: /images/20210812/c41b189c7b8b41e495b1ff6a2c9ad13a.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS02ZGU3ZTdlOGExYzJjNTVlLnBuZw]: /images/20210812/f9904bc7fcfd4adfbf2c6f32d54d9114.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS02OWMzZGI1MWI4NjVlNGUxLnBuZw]: /images/20210812/50fe2e1a066d4251b0d8f2072264f8a3.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1kOTA5NDI0Y2VmNGYxMzMyLnBuZw]: /images/20210812/adc4293681d84680a176701e8df80ca3.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS04ZjI1MjRkZWFkNjViY2MyLnBuZw]: /images/20210812/27e13abec2bd4ab1887154da8ecb25ea.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS00MjgzNmMyYjE2ZTU0OTk1LnBuZw]: /images/20210812/a5d366cff4e84bc58039657b240ca709.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS05ZTZhMDQyOTYxODc1ZTNhLnBuZw]: /images/20210812/a524a389891a4b3c9a7ab32da5efde6d.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01OTczZWNlMzQ3Yjk0NzIwLnBuZw]: /images/20210812/94c7d617a257444b83725789e9a32d0b.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1jZGZjMmQ2YTNkNTY3ZjEzLnBuZw]: /images/20210812/0eb198efe7c6470d8183710f109dae89.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1lMmRjNTg3OWQyOGU5ODMxLnBuZw]: /images/20210812/4aba43c439c14f788a9b3afdf73c1e29.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS04MGY0ZmY2OWNmMzVmMzQ2LnBuZw]: /images/20210812/6f5f2387f00f4ac49842b011e9727198.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01MzE4YzI4N2M2MmNiNWJmLnBuZw]: /images/20210812/b60ad7b9d26d427b817dba1574f05525.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS00ZTFmYmVmNWJjYzY3NjU0LnBuZw]: /images/20210812/01d180259af3428e9a5cd30e1d603285.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS05ZTQ5NjJkZjcyNmZmZmJkLnBuZw]: /images/20210812/f497a0543aa84d2f9dcf2ed10edf435c.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0yN2I4OWJjNWIzZDdkOTU2LnBuZw]: /images/20210812/b610df1ac04f47d9a402136c0519baf8.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0zYmI2M2YzYzFhODUwZjg0LnBuZw]: /images/20210812/225e1900969248c3bd30b11bf8ddfded.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1iOTYwZmE5MTVjZDZjYTM5LnBuZw]: /images/20210812/3c5ac61f4ff147c2a91ad9aafdf191b7.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS00MGY4MzhhZmRhYzQ0OGJjLnBuZw]: /images/20210812/89750d2edca542d4811e6bc6295f3700.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01NTg2NjRiN2M4YzhlZjNhLnBuZw]: /images/20210812/94d946567de64a0eb90813a79266511e.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0xYWVhNjIzYzIzOTBlM2VhLnBuZw]: /images/20210812/f4515db22d494ea9b485fd6c32c33e1f.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0xMDE0ZTg0NWU4ZGQxZDcxLnBuZw]: /images/20210812/54ba1a4fbb52439bb6aebca018d449ba.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS0wZjRmMWI5MmQzYTJmMDYzLnBuZw]: /images/20210812/7b0de0bfe2644cd8a26423283c2966d9.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS1hNDkxOGNiZWExNTk5YjhhLnBuZw]: /images/20210812/67933da001d34522b01355266a9ae1e7.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01MjZhOGY3ODhhY2Q1OGJiLnBuZw]: /images/20210812/48b9f30b22874d349e9cab2fe5d72dd4.png
[aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy8xNDkxNTY3OS01OTdlZjJmZWZlZWI2ZmY3LnBuZw]: /images/20210812/0bc7f65ceaba40b6a334cb407484f02f.png