轻松了解JS中this的指向

       JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说。

this的指向:

 1 this 指的是直接调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁。

  来看两个栗子:

   oBtn.onclick = function(){ 
        alert(this);   //oBtn
  }

 

 oBtn.onclick = fn1;

   function fn1(){ 

    alert(this); //oBtn
  }

很容易看出,函数是在按钮对象被点击的时候调用,所以this指的是obtn,这两种情况是等同的是,只是调用函数的写法不同。

 2 当函数里面嵌套函数的时候,嵌套的那个函数里面的this指的是window,不要过分深究这个原因,因为这是JS的一个特性。

  来看个栗子:

oBtn.onclick = function(){

     alert(this); //oBtn(记得这里还是oBtn)

     fn1(); 
   }

  function fn1(){ 
   alert(this);  // window
   }

   对于上述情况,当我们需要fn1里面的this指向按钮的时候怎么办呢,这个时候有两种方法。

1 将this作为参数传函数去

2 将this保存起来赋给另一个变量

来看两个栗子:

1

oBtn.onclick = function(){

     alert(this); //oBtn

     fn1(this); 1 将上面的this作为参数传函数去
   }

  function fn1(obj){ 
    alert(obj);  // oBtn
  }

2

var that = null;
oBtn[i].onclick = function(){

   alert(this); //oBtn
   that = this ;// 将上面的this保存起来赋给另一个变量
   fn1();
}

function fn1(){ 
   alert(that);  // 指向oBtn
}

 后续补充

3  如果有new关键字,this指向new出来的那个对象;

  当用new去调用一个函数:这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this 即这个对象(隐式返回 不用自己再写返回值)

function CreatePerson(name){   //函数名首字母大写
      //var this=new Object(); 系统会偷偷在这里声明一个对象赋给this替咱们做,不用写
     this.name = name; 
     this.showName = function(){ 
        alert(this.name); 
     } 
     //return this;  函数的默认返回值就是this即这个对象(隐式返回 不用自己再写返回值)

} 
var p1 =new CreatePerson('haha'); 
//当用new去调用一个函数:这个时候this指的就是创建出来的对象 而且函数的默认返回值就是this即这个对象(隐式返回 不用自己再写返回值)
 p1.showName();

 new操作符具体干了什么呢?

(1)创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
(2)属性和方法被加入到 this 引用的对象中。
(3)新创建的对象由 this 所引用,并且最后隐式的返回 this 。

 4  在IE下,事件的绑定的第二种形式中,obj.attachEvent(事件名称,事件函数),里面的this指的是window。

  当然这不是我们想要的,所以让this指向触发事件的对象呢?这就需要提到一个方法call();它可以改变this的指向

call(this的指向,原来函数的参数列表):它有两个参数,第一个指的是改变的this的指向,也就是你想要this指向谁就写谁,如果写的是null,this的指向就不会改变,还是指向原来的。从第二个参数开始,就代表的是函数里面的具体传入的参数了。具体用法我们来看个栗子:

 //有一个函数,两个参数。

function fn1(a,b){ 
    alert(this); //   本来默认是window,改变后为1
    alert(a+b);// 30
}

//三种调用方法
fn1(); //正常调用。弹出 this指向window, a+b为 undefined
fn1.call(); // 等同于上面 ,这两种调用是一样的
fn1.call(1,10,20);  //  弹出this指向 1,同时传入两个数,弹出30

改变this指向是不是也很简单呢。。。。。。

说点题外话,今天是我的第一篇博客,我平常呢,是个特别喜欢做笔记,也经常总结的人,只是写博客比较少,因为说不出来太多有文笔的东西,喜欢简单利索,逻辑分明的东西,希望以后我能更简单的将复杂的东西分享给你们,我们也一起学习,有什么不正确的,欢迎指正。

 

转载于:https://www.cnblogs.com/moqing/p/5588231.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本系统的研发具有重大的意义,在安全性方面,用户使用浏览器访问网站时,采用注册和密码等相关的保护措施,提高系统的可靠性,维护用户的个人信息和财产的安全。在方便性方面,促进了校园失物招领网站的信息化建设,极大的方便了相关的工作人员对校园失物招领网站信息进行管理。 本系统主要通过使用Java语言编码设计系统功能,MySQL数据库管理数据,AJAX技术设计简洁的、友好的网址页面,然后在IDEA开发平台,编写相关的Java代码文件,接着通过连接语言完成与数据库的搭建工作,再通过平台提供的Tomcat插件完成信息的交互,最后在浏览器打开系统网址便可使用本系统。本系统的使用角色可以被分为用户和管理员,用户具有注册、查看信息、留言信息等功能,管理员具有修改用户信息,发布寻物启事等功能。 管理员可以选择任一浏览器打开网址,输入信息无误后,以管理员的身份行使相关的管理权限。管理员可以通过选择失物招领管理,管理相关的失物招领信息记录,比如进行查看失物招领信息标题,修改失物招领信息来源等操作。管理员可以通过选择公告管理,管理相关的公告信息记录,比如进行查看公告详情,删除错误的公告信息,发布公告等操作。管理员可以通过选择公告类型管理,管理相关的公告类型信息,比如查看所有公告类型,删除无用公告类型,修改公告类型,添加公告类型等操作。寻物启事管理页面,此页面提供给管理员的功能有:新增寻物启事,修改寻物启事,删除寻物启事。物品类型管理页面,此页面提供给管理员的功能有:新增物品类型,修改物品类型,删除物品类型。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值