聊一聊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 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
js constructor的实际作用分析
Nov 15 Javascript
js左右弹性滚动对联广告代码分享
Feb 19 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
js事件触发操作实例分析
Jun 21 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
Apr 28 Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 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中的生成XML文件的4种方法分享
2012/10/06 PHP
CodeIgniter生成网站sitemap地图的方法
2013/11/13 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
php通过Chianz.com获取IP地址与地区的方法
2015/01/14 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP的mysqli_thread_id()函数讲解
2019/01/24 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
javascript 读取图片文件的大小
2009/06/25 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
2014/04/03 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
浅谈js中变量初始化
2015/02/03 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
jQuery EasyUI 为Combo,Combobox添加清除值功能的实例
2017/04/13 jQuery
iOS + node.js使用Socket.IO框架进行实时通信示例
2017/04/14 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
2018/12/03 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python编程argparse入门浅析
2018/02/07 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
python连接mongodb密码认证实例
2018/10/16 Python
python lxml中etree的简单应用
2019/05/10 Python
OpenCV哈里斯(Harris)角点检测的实现
2020/01/15 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
舞蹈比赛获奖感言
2014/02/04 职场文书
医德考评自我评价
2014/09/14 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
铁路安全反思材料
2014/12/24 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书