聊一聊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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
js escape,unescape解决中文乱码问题的方法
May 26 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
javascript中var的重要性分析
Feb 11 Javascript
js实现可折叠展开的手风琴菜单效果
Sep 07 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
Angular.js中处理页面闪烁的方法详解
Mar 09 Javascript
CodeMirror js代码加亮使用总结
Mar 25 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
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基于工厂模式实现的计算器实例
2015/07/16 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
CL vs ForZe BO5 第一场 2.13
2021/03/10 DOTA
[转]JS宝典学习笔记
2007/02/07 Javascript
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JS基于面向对象实现的选项卡效果示例
2016/12/20 Javascript
BootStrap入门学习第一篇
2017/08/28 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
js使用文件流下载csv文件的实现方法
2019/07/15 Javascript
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
python 字典中文key处理,读取,比较方法
2018/07/06 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
Python实现手势识别
2020/10/21 Python
如何通过python检查文件是否被占用
2020/12/18 Python
同事吵架检讨书
2014/02/05 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
网络工程师自荐书范文
2014/04/01 职场文书
店铺转让协议书(2014版)
2014/09/23 职场文书
县委党的群众路线教育实践活动工作情况报告
2014/10/25 职场文书
管理人员岗位职责
2015/02/14 职场文书
领导离职感言
2015/08/03 职场文书
详细总结Python常见的安全问题
2021/05/21 Python
详解MongoDB的条件查询和排序
2021/06/23 MongoDB
Pandas 稀疏数据结构的实现
2021/07/25 Python
MySQL分区路径子分区再分区
2022/04/13 MySQL
Golang map映射的用法
2022/04/22 Golang