聊一聊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 相关文章推荐
Ext面向对象开发实践(续)
Nov 18 Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 Javascript
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
添加JavaScript重载函数的辅助方法2
Jul 04 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
JavaScript动态操作表格实例(添加,删除行,列及单元格)
Nov 25 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
Aug 04 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
js实现掷骰子小游戏
Oct 24 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
《逃离塔科夫》——“萌新劝退,老手自嗨”的硬核FPS游戏
2020/04/03 其他游戏
PHP 存储文本换行实现方法
2010/01/05 PHP
PHP 遍历文件实现代码
2011/05/04 PHP
mongo Table类文件 获取MongoCursor(游标)的实现方法分析
2013/07/01 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP htmlspecialchars_decode()函数用法讲解
2019/03/01 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
微信小程序 swiper组件详解及实例代码
2016/10/25 Javascript
详解JS: reduce方法实现 webpack多文件入口
2017/02/14 Javascript
微信小程序 在线支付功能的实现
2017/03/14 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
python实现图片批量剪切示例
2014/03/25 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python微信企业号开发之回调模式接收微信端客户端发送消息及被动返回消息示例
2017/08/21 Python
Python八大常见排序算法定义、实现及时间消耗效率分析
2018/04/27 Python
Python判断telnet通不通的实例
2019/01/26 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
七一党建活动方案
2014/01/28 职场文书
租车协议书范本
2014/04/22 职场文书
询价采购方案
2014/06/09 职场文书
供用电专业求职信
2014/07/07 职场文书
企业愿景口号
2015/12/25 职场文书
高三数学教学反思
2016/02/18 职场文书
公开致歉信
2019/06/24 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技