首页 > 语言 > JavaScript > 正文

针对JavaScript中this指向的简单理解

2024-05-06 14:52:32
字体:
来源:转载
供稿:网友

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

为什么要学习this?如果你学过函数式编程,面向对象编程,那你肯定知道干什么用的,如果你没有学过,那么暂时可以不用看这篇文章,当然如果你有兴趣也可以看看,毕竟这是js中必须要掌握的东西。 

例子1:

 function a(){  var user = "小J";  console.log(this.user); //undefined  console.log(this); //Window}a(); 

按照我们上面说的this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的,下面的代码就可以证明。

function a(){  var user = "小J";   console.log(this.user); //undefined console.log(this);  } window.a() //Window 

和上面代码一样吧,其实alert也是window的一个属性,也是window点出来的
例子2: 

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

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

其实例子1和例子2说的并不够准确,下面这个例子就可以推翻上面的理论。 

如果要彻底的搞懂this必须看接下来的几个例子.

例子3: 

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

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

这里先不解释为什么上面的那段代码this为什么没有指向window,我们再来看一段代码。 

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选