javascript实现方法调用与方法触发小结


Posted in Javascript onMarch 26, 2016

在js中,this关键字是一个比较让人有意思的东西,但是它的指向经常让初学者摸不着头脑。

其实要理解这个关键字,需要理清两个问题——“方法的调用和方法的触发”

下面先看一段代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>function</title>
<script>
function showThis(){
  console.info(this);
}
  
function Test1(){
  this.f=showThis;
}
function Test2(){
  this.f=function(){
    showThis();
  }
}

showThis();//window
new Test1().f();//Test1  
new Test2().f();//window
</script>
</head>
<body>
</body>
</html>

20行打印出window对象,这个很容易理解,但是21行打印出Test1的实例对象,而22行却打印出window对象。查看Test1和Test2的构造,发现方法f最终都执行了showThis方法。但是showThis中的this指向却不同。这是因为Test1中的f方法直接指向showThis,new Test1().f()是以Test1 的实例直接调用showThis方法,调用者是Test1的实例。而new Test2().f()是在Test2的实例方法f中触发window对象的showThis方法,其中的this就是指向其调用者window而不是触发者Test2的实例。

至此可以发现。this指向的是调用者,而触发者只是推进调用者执行指定方法而已。

Javascript 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
Jquery 动态生成表格示例代码
Dec 24 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
Javascript中从学习bind到实现bind的过程
Jan 05 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
小程序实现搜索框功能
Mar 26 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 Javascript
javascript实现用户必须勾选协议实例讲解
Mar 24 Javascript
利用jquery制作滚动到指定位置触发动画
Mar 26 #Javascript
jQuery常用的一些技巧汇总
Mar 26 #Javascript
javascript拖拽应用实例(二)
Mar 25 #Javascript
几种经典排序算法的JS实现方法
Mar 25 #Javascript
javascript拖拽应用实例
Mar 25 #Javascript
JavaScript学习笔记之创建对象
Mar 25 #Javascript
JS实现的颜色实时渐变效果完整实例
Mar 25 #Javascript
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2014/10/21 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php编程实现简单的网页版计算器功能示例
2017/04/26 PHP
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
2015/06/10 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
Bootstrap源码解读媒体对象、列表组和面板(10)
2016/12/26 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
2017/03/10 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
Vue.js中兄弟组件之间互相传值实例
2017/06/01 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
详解Vue、element-ui、axios实现省市区三级联动
2019/05/07 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
Python3中的真除和Floor除法用法分析
2016/03/16 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python实现kMeans算法
2017/12/21 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
Java基础知识面试题
2014/03/25 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
战马观后感
2015/06/08 职场文书
某某幼儿园的教育教学管理调研分析报告
2019/11/29 职场文书
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python