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 相关文章推荐
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
jquery中$.post()方法的简单实例
Feb 04 Javascript
Flexigrid在IE下不显示数据的有效处理方法
Sep 04 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
基于jQuery实现点击最后一行实现行自增效果的表格
Jan 12 Javascript
jQuery+ajax实现实用的点赞插件代码
Jul 06 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
create-react-app中添加less支持的实现
Nov 15 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
node使用async_hooks模块进行请求追踪
Jan 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的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
php中curl和soap方式请求服务超时问题的解决
2018/06/11 PHP
一些有关检查数据的JS代码
2006/09/07 Javascript
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
2013/04/19 Javascript
javascript模拟枚举的简单实例
2014/03/06 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
微信小程序 地图(map)实例详解
2016/11/16 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
JS数组操作之增删改查的简单实现
2017/08/21 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
详解javascript设计模式三:代理模式
2019/03/25 Javascript
Python实现压缩与解压gzip大文件的方法
2016/09/18 Python
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
TensorFlow变量管理详解
2018/03/10 Python
详谈Python中列表list,元祖tuple和numpy中的array区别
2018/04/18 Python
Django上线部署之IIS的配置方法
2019/08/22 Python
Python jieba库用法及实例解析
2019/11/04 Python
Python使用enumerate获取迭代元素下标
2020/02/03 Python
Python使用Selenium模拟浏览器自动操作功能
2020/09/08 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
英国标志性奢侈品牌:Burberry
2016/07/28 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
下列程序在32位linux或unix中的结果是什么
2015/01/26 面试题
毕业生优秀推荐信
2013/11/26 职场文书
应届医学毕业生求职信分享
2013/12/02 职场文书
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
科学发展观活动总结
2014/08/28 职场文书
医德考评自我评价
2014/09/14 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
公司晚宴祝酒词
2015/08/11 职场文书