对this的浅解

JavaScript this指向解析

最新推荐文章于 2025-07-13 22:12:18 发布

bit小兵

最新推荐文章于 2025-07-13 22:12:18 发布

阅读量51

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/nf1206/p/6018691.html

本文通过实例详细解析了JavaScript中this关键字的指向问题，包括不同上下文中this所指的对象，以及如何通过保存this来解决指向问题。

简单通过几个例子记录一下自己对 this 的理解:

function fn(){
  alert(this) --------->window.alert(this)     //此时的this指的是  window
}
fn();

上面这种函数调用方式我会经常用到。

oDiv.onclick=fn;            //此时fn里的this指的就是  oDiv

接下来让我们看看元素点击事件

oDiv.onclick=function(){
    1.this;            //这是当前this --------->oDiv
    2.fn();            //此函数中的this(上面第一个函数)------------------>window
}

可能还会使用行内事件

<div onclick="this.style.color='red'  "></div>    //此时的this一看就知道是当前的div

```
<div onclick="fn()"></div>    //此时fn()函数里的this指的是 window
```
对第3个例子进行一个应用 :当前this与fn()函数的this指的不是同一个对象如果我们想要做下面这个例子，那就是不会实现.
这就需要我们保存this，用其他变量代替。

oDiv.onclick=function(){      改:
   fn1(that);                     添加  that=this;别忘记传参啊；

}

function   fn1(that){
  this.style.color="red";    改为: that.style.color="red";
}

转载于:https://www.cnblogs.com/nf1206/p/6018691.html