聊一聊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 相关文章推荐
JS执行删除前的判断代码
Feb 18 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
JavaScript基本语法讲解
Jun 03 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
详解babel升级到7.X采坑总结
May 12 Javascript
jQuery 选择器用法基础入门示例
Jan 04 jQuery
vue 全局封装loading加载教程(全局监听)
Nov 05 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
oracle资料库函式库
2006/10/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
Javascript Boolean、Nnumber、String 强制类型转换的区别详细介绍
2012/12/13 Javascript
Underscore源码分析
2015/12/30 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
javascript 开发之网页兼容各种浏览器
2017/09/28 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
如何在Vue.js中实现标签页组件详解
2019/01/02 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
vuex实现购物车功能
2020/06/28 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
利用python 更新ssh 远程代码 操作远程服务器的实现代码
2018/02/08 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python实现名片管理器的示例代码
2019/12/17 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
美国购买肉、鸭、家禽、鹅肝和熟食网站:D’Artagnan
2018/11/13 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
抽象方法、抽象类怎样声明
2014/10/25 面试题
是否可以从一个static方法内部发出对非static方法的调用?
2014/08/18 面试题
教师自我评价范例
2013/09/24 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
Nginx tp3.2.3 404问题解决方案
2021/03/31 Servers
MySQL系列之十二 备份与恢复
2021/07/02 MySQL
入门学习Go的基本语法
2021/07/07 Golang
Java实现HTML转为Word的示例代码
2022/06/28 Java/Android