聊一聊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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
基于jquery的下拉框改变动态添加和删除表格实现代码
Sep 12 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
jQuery中append()方法用法实例
Dec 25 Javascript
javascript事件冒泡实例分析
May 13 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
Apr 11 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
js JSON.stringify()基础详解
Jun 19 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 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数组应用之比较两个时间的相减排序
2008/08/18 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
php生成静态页面并实现预览功能
2019/06/27 PHP
jQuery中将函数赋值给变量的调用方法
2012/03/23 Javascript
javascript jq 弹出层实例
2013/08/25 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
js实现StringBuffer的简单实例
2016/09/02 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
JavaScript原生数组Array常用方法
2017/04/06 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
2017/12/01 Javascript
Laravel整合Bootstrap 4的完整方案(推荐)
2018/01/25 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
详解如何实现Element树形控件Tree在懒加载模式下的动态更新
2019/04/25 Javascript
vue如何截取字符串
2019/05/06 Javascript
js实现简单分页导航栏效果
2019/06/28 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
[02:17]2016国际邀请赛中国区预选赛VG战队领队采访
2016/06/26 DOTA
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python 中 Meta Classes详解
2016/02/13 Python
Python Socket编程详细介绍
2017/03/23 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
浅析Python面向对象编程
2020/07/10 Python
Python排序函数的使用方法详解
2020/12/11 Python
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
分别介绍一下Session Bean和Entity Bean
2015/03/13 面试题
2015年乡镇发展党员工作总结
2015/03/31 职场文书
mysql外连接与内连接查询的不同之处
2021/06/03 MySQL
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB