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查错流程归纳
May 04 Javascript
js鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
jquery自动切换tabs选项卡的具体实现
Dec 24 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
利用Node.js编写跨平台的spawn语句详解
Feb 12 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 Javascript
vue.js+element-ui动态配置菜单的实例
Sep 07 Javascript
jquery更改元素属性attr()方法操作示例
May 22 jQuery
利用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与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
php之CodeIgniter学习笔记
2013/06/17 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
PHP时间函数使用详解
2019/03/21 PHP
setInterval 和 setTimeout会产生内存溢出
2008/02/15 Javascript
JavaScript 变量基础知识
2009/11/07 Javascript
javascript 的Document属性和方法集合
2010/01/25 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
javascript中Date format(js日期格式化)方法小结
2015/12/17 Javascript
由简入繁实现Jquery树状结构的方法(推荐)
2016/06/10 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
2017/01/12 Javascript
js实现图片360度旋转
2017/01/22 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
python实现实时监控文件的方法
2016/08/26 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
python图书管理系统
2020/04/05 Python
python操作redis方法总结
2018/06/06 Python
python利用itertools生成密码字典并多线程撞库破解rar密码
2019/08/12 Python
Python实现AI换脸功能
2020/04/10 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
分享全球十款超强HTML5开发工具
2014/05/14 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
如何转换一个字符串到enum值
2014/04/12 面试题
文秘专业个人求职信
2013/12/22 职场文书
物流管理专业职业生涯规划书
2014/01/06 职场文书
档案工作个人总结
2015/03/03 职场文书
离婚案件上诉状
2015/05/23 职场文书
垂直极限观后感
2015/06/08 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python