聊一聊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检查页面上有无重复id的实现代码
Jul 17 Javascript
node.js中的fs.fchmod方法使用说明
Dec 16 Javascript
jquery插件qrcode在线生成二维码
Apr 26 Javascript
jquery实现简单的轮换出现效果实例
Jul 23 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
Aug 26 Javascript
jQuery实现浮动层随浏览器滚动条滚动的方法
Sep 22 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
了解Javascript中函数作为对象的魅力
Jun 19 Javascript
浅谈Layui的eleTree树式选择器使用方法
Sep 25 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 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
ThinkPHP2.0读取MSSQL提示Incorrect syntax near the keyword 'AS'的解决方法
2014/06/25 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
2012/05/10 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
2013/06/24 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
webpack3之loader全解析
2017/10/26 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
webpack 3.X学习之多页面打包的方法
2018/09/04 Javascript
基于Koa2写个脚手架模拟接口服务的方法
2018/11/27 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
Python类的专用方法实例分析
2015/01/09 Python
python利用拉链法实现字典方法示例
2017/03/25 Python
Python函数中参数是传递值还是引用详解
2019/07/02 Python
Python实现打印实心和空心菱形
2019/11/23 Python
Python分类测试代码实例汇总
2020/07/23 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
哈曼俄罗斯官方网上商店:Harman.club
2020/07/24 全球购物
拉丁舞学习者的自我评价
2013/10/27 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
四风问题对照检查材料
2014/09/22 职场文书
2015年清明节扫墓演讲稿
2015/03/18 职场文书
2015年老干部工作总结
2015/04/23 职场文书
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers
React自定义hook的方法
2022/06/25 Javascript