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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
浅谈javascript的原型继承
Jul 25 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jquery可定制的在线UEditor编辑器
Nov 17 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
BootstrapValidator不触发校验的实现代码
Sep 28 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
vue.extend与vue.component的区别和联系
Sep 19 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vuex管理状态 刷新页面保持不被清空的解决方案
Nov 11 Javascript
js实现随机抽奖
Mar 19 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
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
仿AS3实现PHP 事件机制实现代码
2011/01/27 PHP
PHP性能优化 产生高度优化代码
2011/07/22 PHP
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
php基于session实现数据库交互的类实例
2015/08/03 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
利用JS进行图片的切换即特效展示图片
2013/12/03 Javascript
详解AngularJS中module模块的导入导出
2015/12/10 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
jQuery代码实现对话框右上角菜单带关闭×
2016/05/03 Javascript
js不间断滚动的简单实现
2016/06/03 Javascript
js实现表格筛选功能
2017/01/18 Javascript
微信小程序网络请求wx.request详解及实例
2017/05/18 Javascript
将 vue 生成的 js 上传到七牛的实例
2017/07/28 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
微信小程序工具函数封装
2019/10/28 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[01:19:23]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第二场
2018/04/06 DOTA
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
python实现在sqlite动态创建表的方法
2015/05/08 Python
使用Mixin设计模式进行Python编程的方法讲解
2016/06/21 Python
Python实现利用最大公约数求三个正整数的最小公倍数示例
2017/09/30 Python
Python 函数基础知识汇总
2018/03/09 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
django模型类中,null=True,blank=True用法说明
2020/07/09 Python
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
大学生求职推荐信
2013/11/27 职场文书
长安大学毕业生自我鉴定
2014/01/17 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
试用期自我评价范文
2015/03/10 职场文书