聊一聊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 相关文章推荐
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
JS获取计算机mac地址以及IP的实现方法
Jan 08 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
微信小程序提取公用函数到util.js及使用方法示例
Jan 10 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 Javascript
浅谈JavaScript中this的指向更改
Jul 28 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+ajax 无刷新删除数据
2010/02/20 PHP
php中使用session_set_save_handler()函数把session保存到MySQL数据库实例
2014/11/06 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
2007/02/03 Javascript
jquery UI 1.72 之datepicker
2009/12/29 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
jquery实现的网页自动播放声音
2014/04/30 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
基于JavaScript实现选项卡效果
2017/07/21 Javascript
nodejs前端模板引擎swig入门详解
2018/05/15 NodeJs
JavaScript onclick事件使用方法详解
2020/05/15 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
让python在hadoop上跑起来
2016/01/27 Python
Python判断两个对象相等的原理
2017/12/12 Python
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
Python字符串三种格式化输出
2020/09/17 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
Python爬虫之Selenium鼠标事件的实现
2020/12/04 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
高中自我鉴定范文
2013/11/03 职场文书
石油大学毕业生自荐信
2014/01/28 职场文书
学校食品安全实施方案
2014/06/14 职场文书
胡雪岩故居导游词
2015/02/06 职场文书
三八妇女节主持词
2015/07/04 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python