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 相关文章推荐
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
使用Math.floor与Math.random取随机整数的方法详解
May 07 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
JavaScript中Array方法你该知道的正确打开方法
Sep 11 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 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脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
javascript模拟select,jselect的方法实现
2012/11/08 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
如何动态的导入js文件具体该怎么实现
2014/01/14 Javascript
js实现跟随鼠标移动且带关闭功能的图片广告实例
2015/02/26 Javascript
JS实现网页滚动条感应鼠标变色的方法
2015/02/26 Javascript
JQuery显示隐藏DIV的方法及代码实例
2015/04/16 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
详解element-ui中form验证杂记
2019/03/04 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
[03:17]2016完美“圣”典风云人物:冷冷专访
2016/12/08 DOTA
利用Fn.py库在Python中进行函数式编程
2015/04/22 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
Python使用pip安装pySerial串口通讯模块
2018/04/20 Python
详解python while 函数及while和for的区别
2018/09/07 Python
基于python实现名片管理系统
2018/11/30 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
python随机生成库faker库api实例详解
2019/11/28 Python
pytorch  网络参数 weight bias 初始化详解
2020/06/24 Python
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
毕业自我鉴定
2013/11/05 职场文书
护理专科毕业生自荐书范文
2014/02/19 职场文书
公休请假条
2014/04/11 职场文书
大学社团活动总结
2014/04/26 职场文书
2014年建筑工作总结
2014/11/26 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
redis限流的实际应用
2021/04/24 Redis
php去除deprecated的实例方法
2021/11/17 PHP