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 中关于CSS操作部分使用说明
Jun 10 Javascript
基于jquery的获取mouse坐标插件的实现代码
Apr 01 Javascript
JS格式化数字金额用逗号隔开保留两位小数
Oct 18 Javascript
jQuery学习笔记之toArray()
Jun 09 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
JavaScript SHA512&amp;SHA256加密算法详解
Aug 11 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
Aug 31 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
JS Web Flex弹性盒子模型代码实例
Mar 10 Javascript
在Webpack中用url-loader处理图片和字体的问题
Apr 28 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循环获取GET和POST值的代码
2008/04/09 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
程序员编程十条戒律
2009/07/09 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JQuery中的ready函数冲突的解决方法
2010/05/17 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
2013/09/26 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
JS获取节点的兄弟,父级,子级元素的方法
2014/01/09 Javascript
JavaScript实现动态添加,删除行的方法实例详解
2015/07/02 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
Node.js重新刷新session过期时间的方法
2016/02/04 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
2016/10/10 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
2017/01/20 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
ES2020系列之空值合并运算符 '??'
2020/07/22 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
python的id()函数解密过程
2012/12/25 Python
python实现图像识别功能
2018/01/29 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
Python MOCK SERVER moco模拟接口测试过程解析
2020/04/13 Python
python collections模块的使用
2020/10/16 Python
HTML5网页录音和上传到服务器支持PC、Android,支持IOS微信功能
2019/04/26 HTML / CSS
Perricone MD裴礼康美国官网:抗衰老护肤品
2016/09/26 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
理工类毕业自我鉴定
2014/02/20 职场文书
2014年机关植树节活动方案
2014/02/27 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
公务员的复习计划书,请收下!
2019/07/15 职场文书