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点击弹出下拉菜单效果实例
Aug 12 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
动态更新highcharts数据的实现方法
May 28 Javascript
jQuery Form表单取值的方法
Jan 11 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
纯JS实现简单的日历
Jun 26 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
Nov 01 Javascript
Java Varargs 可变参数用法详解
Jan 28 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
长波有什么东西
2021/03/01 无线电
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php处理复杂xml数据示例
2016/07/11 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
javascript 动态table添加colspan\rowspan 参数的方法
2009/07/25 Javascript
JS分割字符串并放入数组的函数
2011/07/04 Javascript
javascript时间函数基础介绍
2013/03/28 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
JQuery实现超链接鼠标提示效果的方法
2015/06/10 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
基于Javascript实现弹出页面效果
2016/01/01 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
2017/12/20 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
使用vscode快速建立vue模板过程详解
2019/10/10 Javascript
vue实现给div绑定keyup的enter事件
2020/07/31 Javascript
jquery轮播图插件使用方法详解
2020/07/31 jQuery
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
[42:56]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python将人民币转换大写的脚本代码
2013/02/10 Python
python创建进程fork用法
2015/06/04 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python json 递归打印所有json子节点信息的例子
2020/02/27 Python
浅谈three.js中的needsUpdate的应用
2012/11/12 HTML / CSS
安全资料员岗位职责
2013/12/14 职场文书
促销活动计划书
2014/05/02 职场文书
电话客服工作职责
2014/07/27 职场文书
党的作风建设心得体会
2014/10/22 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
python实现批量移动文件
2021/04/05 Python
pytorch中的 .view()函数的用法介绍
2022/03/17 Python