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 IE和FF兼容性问题汇总
Feb 09 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
浅谈 javascript 事件处理
Jan 04 Javascript
javascript实现全角半角检测的方法
Jul 23 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
Feb 03 Javascript
详解vue-router传参的两种方式
Sep 10 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
react 移动端实现列表左滑删除的示例代码
Jul 04 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
微信小程序开发之获取用户手机号码(php接口解密)
May 17 Javascript
iview实现图片上传功能
Jun 29 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
ThinkPHP自动验证失败的解决方法
2011/06/09 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP CURL采集百度搜寻结果图片不显示问题的解决方法
2017/02/03 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
本地对象Array的原型扩展实现代码
2010/12/04 Javascript
当达到输入长度时表单自动切换焦点
2014/04/06 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
vue-cli 如何打包上线的方法示例
2018/05/08 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
JS实现的A*寻路算法详解
2018/12/14 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
2019/07/03 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
详解python eval函数的妙用
2017/11/16 Python
Python如何生成树形图案
2018/01/03 Python
Python wxPython库使用wx.ListBox创建列表框示例
2018/09/03 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
python 实现简单的FTP程序
2019/12/27 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
英国第一摩托车和摩托车越野配件商店:GhostBikes
2019/03/10 全球购物
俄罗斯电子产品、计算机和家用电器购物网站:OLDI
2019/10/27 全球购物
英文留学推荐信范文
2014/01/25 职场文书
党校培训自我鉴定范文
2014/03/20 职场文书
产品设计开发计划书
2014/05/07 职场文书
群众路线教育实践活动剖析材料
2014/09/30 职场文书
深入理解Pytorch微调torchvision模型
2021/11/11 Python
服务器nginx权限被拒绝解决案例
2022/09/23 Servers