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 相关文章推荐
js获得页面的高度和宽度的方法
Feb 23 Javascript
js设置控件的隐藏与显示的两种方法
Aug 21 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
JS实现仿QQ聊天窗口抖动特效
May 10 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
Vue实现根据hash高亮选项卡
May 27 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 获取一个月第一天与最后一天的代码
2010/05/16 PHP
PHP中图片等比缩放的实例
2013/03/24 PHP
PHP批量采集下载美女图片的实现代码
2013/06/03 PHP
CI框架中通过hook的方式实现简单的权限控制
2015/01/07 PHP
php通过curl模拟登陆DZ论坛
2015/05/11 PHP
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php的laravel框架快速集成微信登录的方法
2016/12/12 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
jquery的Theme和Theme Switcher使用小结
2010/09/08 Javascript
javascript 事件处理程序介绍
2012/06/27 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
一个js导致的jquery失效问题的解决方法
2013/11/27 Javascript
如何用JavaScript定义一个类
2014/09/12 Javascript
jQuery中scrollLeft()方法用法实例
2015/01/16 Javascript
JavaScript节点及列表操作实例小结
2015/08/05 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
2016/06/17 Javascript
JavaScript仿网易选项卡制作代码
2016/10/06 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
python 读取Linux服务器上的文件方法
2018/12/27 Python
利用Python进行图像的加法,图像混合(附代码)
2019/07/14 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
python中time tzset()函数实例用法
2021/02/18 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
在线服装零售商:SheIn
2016/07/22 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2015年度销售个人工作总结
2015/03/31 职场文书
2019销售早会主持词
2019/06/27 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python