js中this的指向问题

合集 - 前端开发(23)

1.第一次写博客，关于前端开发deMVC在js中的应用2016-07-122.react开发中的小细节2017-03-193.CSS开启硬件加速来提高网站性能2019-06-17

4.js中this的指向问题2019-06-10

5.Js面向对象构造函数继承2017-03-266.Js面向对象原型~构造函数2017-03-197.JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏2019-10-288.Promise核心原理解析2019-09-279.图解javascript的this指向2019-09-1210.图解javascript原型链2019-09-0611.被闭包啪啪啪的打脸之 闭包的错误使用2019-08-2812.react解析: render的FiberRoot(三)2019-08-1013.个人小程序应用开发指南2019-07-2214.ES2019 / ES10有什么新功能?2019-06-2115.2022前端开发知识总结归纳（前端掌握知识）2022-10-3116.Axios源码解析：请求响应拦截器2021-12-0217.AntV G2可视化引擎, 有用过嘛？2021-11-3018.弄懂！ES6中的Iterator迭代器2020-06-1019.🔥[译] 正交设计组件的好处2020-01-0920.小程序开发指南之性能优化2019-12-0421.聊一聊，React开发中应该规避的点2019-11-2622.解析：让你弄懂redux原理2019-11-0523.关于Web GIS基础知识2024-03-26

收起

this指向

首先必须要说的是，this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象（这句话有些问题，后面会解释为什么会有问题，虽然网上大部分的文章都是这样说的，虽然在很多情况下那样去理解不会出什么问题，但是实际上那样理解是不准确的，所以在你理解this的时候会有种琢磨不透的感觉），那么接下来我会深入的探讨这个问题。

 

示例1　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

function a(){ 　　var user = "追梦子"; 　　console.log(this.user); //undefined 　　console.log(this); //Window } a(); /||\  || 等价于 \||/ function a(){ 　　var user = "追梦子"; 　　console.log(this.user); //undefined 　　console.log(this);　　//Window } window.a();

此时的this指向的是window

示例2

这里的this指向的是对象o，因为你调用这个fn是通过o.fn()执行的，那自然指向就是对象o，这里再次强调一点，this的指向在函数创建的时候是决定不了的，在调用的时候才能决定，谁调用的就指向谁，一定要搞清楚这个。

?

1 2 3 4 5 6 7

var o = {     user:"追梦子",     fn:function(){         console.log(this.user); //追梦子     } } o.fn();

 

---

 

示例3

示例1与示例2说的并不够准确，下面这个例子就可以推翻上面的理论。

?

1 2 3 4 5 6 7

var o = {     user:"追梦子",     fn:function(){         console.log(this.user); //追梦子     } } window.o.fn();

这段代码和上面的那段代码几乎是一样的，但是这里的this为什么不是指向window。如果按照上面的理论，最终this指向的是调用它的对象，这里先说个而外话，window是js中的全局对象，我们创建的变量实际上是给window添加属性，所以这里可以用window点o对象。

?

1 2 3 4 5 6 7 8 9 10

var o = {     a:10,     b:{         a:12,         fn:function(){             console.log(this.a); //12         }     } } o.b.fn();

这里同样也是对象o点出来的，但是同样this并没有执行它，那你肯定会说我一开始说的那些不就都是错误的吗？其实也不是，只是一开始说的不准确，接下来我将补充一句话，我相信你就可以彻底的理解this的指向的问题。

情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window。这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找.

情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象.

情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象。例子3可以证明，如果不相信，那么接下来我们继续看几个例子。

?

1 2 3 4 5 6 7 8 9 10

var o = {     a:10,     b:{         // a:12,         fn:function(){             console.log(this.a); //undefined         }     } } o.b.fn();

 

尽管对象b中没有属性a，这个this指向的也是对象b，因为this只会指向它的上一级对象，不管这个对象中有没有this要的东西。

---

 

例子4

?

1 2 3 4 5 6 7 8 9 10 11 12

var o = {     a:10,     b:{         a:12,         fn:function(){             console.log(this.a); //undefined             console.log(this); //window         }     } } var j = o.b.fn; j();

这里this指向的是window，是不是有些蒙了？其实是因为你没有理解一句话，这句话同样至关重要。

　　**this永远指向的是最后调用它的对象**，也就是看它执行的时候是谁调用的，例子4中虽然函数fn是被对象b所引用，但是在将fn赋值给变量j的时候并没有执行所以最终指向的是window，这和例子3是不一样的，例子3是直接执行了fn。

　　this讲来讲去其实就是那么一回事，只不过在不同的情况下指向的会有些不同，上面的总结每个地方都有些小错误，也不能说是错误，而是在不同环境下情况就会有不同，所以我也没有办法一次解释清楚，只能你慢慢地的去体会。

题目

最后来一道题收尾

?

1 2 3 4 5 6 7 8 9 10 11 12 13

var fullname = 'John' var obj = {         fullname:'Colin',         prop:{             fullname:'Aurelio',             getFullname:function(){                 return this.fullname             }         } } var test = obj.prop.getFullname; console.log(test()) console.log(obj.prop.getFullname())

这个理解了，this基本没问题了

 

[本文原文地址](https://github.com/AttemptWeb/Record/blob/master/js/JsMd/js%E4%B8%ADthis%E7%9A%84%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98.md)，有兴趣的可以交流哦