聊一聊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 相关文章推荐
jQuery第三课 修改元素属性及内容的代码
Mar 14 Javascript
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
遍历json获得数据的几种方法小结
Jan 21 Javascript
JavaScript利用fetch实现异步请求的方法实例
Jul 26 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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
解析将多维数组转换为支持curl提交的一维数组格式
2013/07/08 PHP
使用php清除bom示例
2014/03/03 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
firefo xml 读写实现js代码
2009/06/11 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jQuery 顺便学习下CSS选择器 奇偶匹配nth-child(even)
2010/05/24 Javascript
JQuery给元素绑定click事件多次执行的解决方法
2014/05/29 Javascript
jQuery下拉友情链接美化效果代码分享
2015/08/26 Javascript
深入剖析JavaScript:Object类型
2016/05/10 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
微信小程序 图片上传实例详解
2017/05/05 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
2019/01/16 Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
JavaScript实现鼠标移入随机变换颜色
2020/11/24 Javascript
[01:28:43]2014 DOTA2华西杯精英邀请赛5 24 DK VS CIS
2014/05/25 DOTA
Python中逗号的三种作用实例分析
2015/06/08 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
python去掉空白行的多种实现代码
2018/03/19 Python
python处理“
2019/06/10 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python读取当前目录下的CSV文件数据
2020/03/11 Python
使用Python+selenium实现第一个自动化测试脚本
2020/03/17 Python
Python中如何添加自定义模块
2020/06/09 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
司法局群众路线教育实践活动整改措施
2014/09/17 职场文书
学习十八届四中全会依法治国心得体会
2014/11/03 职场文书
2014年统计工作总结
2014/11/21 职场文书
2015年社区创卫工作总结
2015/04/21 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
浅谈GO中的Channel以及死锁的造成
2022/03/18 Golang