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 相关文章推荐
javascript脚本调试方法小结
Nov 24 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
firefox下input type=&quot;file&quot;的size是多大
Oct 24 Javascript
js浮动图片的动态效果
Jul 10 Javascript
js获取json元素数量的方法
Jan 27 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
Mac下安装vue
Apr 11 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 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中的fopen()函数用打开文件模式说明
2013/06/20 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
MooBox 基于Mootools的对话框插件
2012/01/20 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
jQuery.query.js 取参数的两点问题分析
2012/08/06 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
Spring MVC中Ajax实现二级联动的简单实例
2016/07/06 Javascript
JS+CSS实现下拉刷新/上拉加载插件
2017/03/31 Javascript
JS触摸与手势事件详解
2017/05/09 Javascript
JavaScript实现设置默认日期范围为最近40天的方法分析
2017/07/12 Javascript
JS数组操作中的经典算法实例讲解
2017/07/26 Javascript
浅谈es6中export和export default的作用及区别
2018/02/07 Javascript
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
深入探讨JavaScript的最基本部分之执行上下文
2019/02/12 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
2019/05/01 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
pyqt5自定义信号实例解析
2018/01/31 Python
python学习基础之循环import及import过程
2018/04/22 Python
dataframe 按条件替换某一列中的值方法
2019/01/29 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
La Senza官网:北美顶尖性感内衣品牌
2018/08/03 全球购物
美国家居装饰网上商店:Lulu & Georgia
2019/09/14 全球购物
多媒体教室标语
2014/06/26 职场文书
国际商务英语专业求职信
2014/07/08 职场文书
工地食品安全责任书
2015/05/09 职场文书
2019年幼儿园管理条例范本!
2019/07/17 职场文书
2019年家电促销广告语集锦
2019/10/21 职场文书
一小时迅速入门Mybatis之bind与多数据源支持 Java API
2021/09/15 Javascript