聊一聊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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
读jQuery之六 缓存数据功能介绍
Jun 21 Javascript
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
基于jQuery实现的图片切换焦点图整理
Dec 07 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
JS实现的样式切换功能tableCSS实例
Dec 30 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
vue实现移动端input上传视频、音频
Aug 18 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
Apache 配置详解(最好的APACHE配置教程)
2010/07/04 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
php 判断页面或图片是否经过gzip压缩的方法
2017/04/05 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
nodejs的require模块(文件模块/核心模块)及路径介绍
2013/01/14 NodeJs
JavaScript中原型和原型链详解
2015/02/11 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
css如何让浮动元素水平居中
2015/08/07 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
Bootstrap学习笔记之进度条、媒体对象实例详解
2017/03/09 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
从零开始学习Node.js系列教程三:图片上传和显示方法示例
2017/04/13 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
sortable+element 实现表格行拖拽的方法示例
2019/06/07 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
Vue+Node实现商品列表的分页、排序、筛选,添加购物车功能详解
2019/12/07 Javascript
python实现微信远程控制电脑
2018/02/22 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
python中的itertools的使用详解
2020/01/13 Python
Python连接SQLite数据库并进行增册改查操作方法详解
2020/02/18 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
使用Keras预训练好的模型进行目标类别预测详解
2020/06/27 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
python excel多行合并的方法
2020/12/09 Python
偷看我的初中毕业鉴定
2014/01/29 职场文书
见习报告格式范文
2014/11/08 职场文书
鲁迅故居导游词
2015/02/05 职场文书
求职导师推荐信范文
2015/03/27 职场文书
公司搬迁通知
2015/04/20 职场文书
舞蹈社团活动总结
2015/05/07 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers