聊一聊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 新建的元素事件绑定问题解决方案
Jun 12 Javascript
11种ASP连接数据库的方法
Sep 18 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
vue v-model表单控件绑定详解
May 17 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
深入浅析ng-bootstrap 组件集中 tabset 组件的实现分析
Jul 19 Javascript
vue 实现通过vuex 存储值 在不同界面使用
Nov 11 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 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下intval()和(int)转换使用与区别
2008/07/18 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php实现以只读方式打开文件的方法
2015/03/16 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP count_chars()函数讲解
2019/02/14 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
Node.js包管理器Yarn的入门介绍与安装
2016/10/17 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
如何使node也支持从url加载一个module详解
2018/06/05 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
JavaScript 实现自己的安卓手机自动化工具脚本(推荐)
2020/05/13 Javascript
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
numpy库reshape用法详解
2020/04/19 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
共产党员公开承诺践诺书
2014/05/28 职场文书
学校节能减排方案
2014/06/13 职场文书
贫困证明模板(3篇)
2014/09/16 职场文书
2014入党积极分子批评与自我批评思想汇报
2014/09/20 职场文书
辞职申请书范本
2019/05/20 职场文书
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL