聊一聊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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jQuery实现鼠标跟随提示层效果代码(可显示文本,Div,Table,Html等)
Apr 18 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
vant IndexBar实现的城市列表的示例代码
Nov 20 Javascript
Javascript模拟实现new原理解析
Mar 03 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 echo 输出字符串函数详解
2010/05/13 PHP
php禁用cookie后session设置方法分析
2016/10/19 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
TP5多入口设置实例讲解
2020/12/15 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
javascript 简单抽屉效果的实现代码
2010/03/09 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
微信小程序 require机制详解及实例代码
2016/12/14 Javascript
less简单入门(CSS 预处理语言)
2017/03/08 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
使用vue2.6实现抖音【时间轮盘】屏保效果附源码
2019/04/24 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
vue实现登录拦截
2020/06/29 Javascript
[54:24]Optic vs TNC 2018国际邀请赛小组赛BO2 第二场
2018/08/18 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
python中cPickle用法例子分享
2014/01/03 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
详解Pytorch 使用Pytorch拟合多项式(多项式回归)
2018/05/24 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python版中国省市经纬度
2020/02/11 Python
利用Python优雅的登录校园网
2020/10/21 Python
单位办理社保介绍信
2014/01/10 职场文书
购房委托书
2014/10/15 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
新店开张宣传语
2015/07/13 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android