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的面向对象方法以及差别
Mar 31 Javascript
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
JQuery触发radio或checkbox的change事件
Dec 18 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
简述JS浏览器的三种弹窗
Jul 15 Javascript
layer弹出层全屏及关闭方法
Aug 17 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
详解一些适用于Node.js的命名约定
Dec 08 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
php获取某个目录大小的代码
2008/09/10 PHP
php MYSQL 数据备份类
2009/06/19 PHP
PHP结合jQuery.autocomplete插件实现输入自动完成提示的功能
2015/04/27 PHP
phpfpm的作用和用法
2019/10/10 PHP
PHP如何使用JWT做Api接口身份认证的实现
2020/02/03 PHP
javascript实现的基于金山词霸网络翻译的代码
2010/01/15 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
2012/10/15 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
2015/01/20 Javascript
jQuery实现可关闭固定于底(顶)部的工具条菜单效果
2015/11/06 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
Vue.Js中的$watch()方法总结
2017/03/23 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
详解JavaScript修改注册表的方法
2020/01/05 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
Python内置函数reversed()用法分析
2018/03/20 Python
PyQt5每天必学之布局管理
2018/04/19 Python
Python处理CSV与List的转换方法
2018/04/19 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
Python参数类型以及常见的坑详解
2019/07/08 Python
python实现从ftp上下载文件的实例方法
2020/07/19 Python
Python如何读写字节数据
2020/08/05 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
毕业生物理教师求职信
2013/10/17 职场文书
消防工作实施方案
2014/06/09 职场文书
材料物理专业求职信
2014/09/01 职场文书
2015年幼儿园后勤工作总结
2015/04/25 职场文书
会议主持词开场白
2015/05/28 职场文书
2015中学学校工作总结
2015/07/20 职场文书
干货干货!2019最新优秀创业计划书
2019/03/21 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
理解python中装饰器的作用
2021/07/21 Python