聊一聊JS中this的指向问题


Posted in Javascript onJune 17, 2016

JS中的this指向一直是个让人头疼的问题,想当初我学的是天昏地暗,查了好多资料,看的头都大了,跟他大战了那么多回合,终于把它搞定个七八分,其实往往都是我们复杂化了,现在就让大家轻松看懂this的指向,我会分以下几种情况来说。
this的指向:
1、this 指的是调用当前方法(函数)的那个对象,也就是说函数在谁那被调用,this就指的是谁。
来看两个栗子: 

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

 

 oBtn[i].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
  }

3 、对于上述情况,当我们需要fn1里面的this指向按钮的时候怎么办呢,这个时候有两种方法。
 1) 将this作为参数传函数去 
2) 将this保存起来赋给另一个变量
 来看两个栗子: 

oBtn.onclick = function(){

   alert(this); //oBtn

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

 function fn1(obj){ 
  alert(obj); // oBtn
 }
var that = null;
oBtn[i].onclick = function(){

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

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

OK,this的指向,最基础的也就这几种,很多复杂的也是由基础演变的。有没有轻松掌握呢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE8 原生JSON支持
Apr 13 Javascript
用IE重起计算机或者关机的示例代码
Mar 10 Javascript
Ajax局部更新导致JS事件重复触发问题的解决方法
Oct 14 Javascript
Javascript定义类(class)的三种方法详解
Mar 13 Javascript
js实现tab切换效果实例
Sep 16 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
JS代码防止SQL注入的方法(超简单)
Apr 12 Javascript
Node.js调试技术总结分享
Mar 12 Javascript
JS实现上传图片的三种方法并实现预览图片功能
Jul 14 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 Javascript
Vue js with语句原理及用法解析
Sep 03 Javascript
json实现添加、遍历与删除属性的方法
Jun 17 #Javascript
confirm确认对话框的实现方法总结
Jun 17 #Javascript
js实现获取两个日期之间所有日期的方法
Jun 17 #Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 #Javascript
基于JQuery实现分隔条的功能
Jun 17 #Javascript
js基于setTimeout与setInterval实现多线程
Jun 17 #Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 #Javascript
You might like
php连接数据库代码应用分析
2011/05/29 PHP
基于PHP 面向对象之成员方法详解
2013/05/04 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
Javascript中定义方法的另类写法(批量定义js对象的方法)
2011/02/25 Javascript
为EasyUI的Tab标签添加右键菜单的方法
2012/07/14 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
javascript初学者常用技巧
2014/09/02 Javascript
JS时间特效最常用的三款
2015/08/19 Javascript
jQuery Mobile弹出窗、弹出层知识汇总
2016/01/05 Javascript
深入讲解xhr(XMLHttpRequest)/jsonp请求之abort
2017/07/26 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
详解js模板引擎art template数组渲染的方法
2018/10/09 Javascript
详解Node.js读写中文内容文件操作
2018/10/10 Javascript
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
Python中绑定与未绑定的类方法用法分析
2016/04/29 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python print 按逗号或空格分隔的方法
2018/05/02 Python
python在文本开头插入一行的实例
2018/05/02 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
AUC计算方法与Python实现代码
2020/02/28 Python
python exit出错原因整理
2020/08/31 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
将n个数按输入顺序的逆序排列,用函数实现
2012/11/14 面试题
金融专业毕业生推荐信
2013/11/26 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
介绍信格式
2015/01/30 职场文书
聘任书格式及范文
2015/09/21 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android