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 相关文章推荐
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
js字符串转换成数字与数字转换成字符串的实现方法
Jan 08 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
Jan 09 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
微信小程序实现横向增长表格的方法
Jul 24 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
微信小程序商品详情页底部弹出框
Nov 22 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 smarty的预保留变量总结
2008/12/04 PHP
PHP中多维数组的foreach遍历示例
2014/06/13 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
javascript获取当前ip的代码
2009/05/10 Javascript
Javascript 强制类型转换函数
2009/05/17 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析
2014/06/09 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
Vue混入mixins滚动触底的方法
2019/11/22 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python利用selenium进行浏览器爬虫
2019/04/25 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
把Anaconda中的环境导入到Pycharm里面的方法步骤
2020/10/30 Python
美国排名第一的在线葡萄酒商店:Wine.com
2016/09/07 全球购物
李维斯德国官方网上商店:Levi’s德国
2016/09/10 全球购物
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
乌克兰网上珠宝商店:GoldSoveren
2020/03/31 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
幼儿园托班开学寄语
2014/01/18 职场文书
专题组织生活会方案
2014/06/15 职场文书
绿色校园广播稿
2014/10/13 职场文书
婚前协议书标准版
2014/10/19 职场文书
小学入学感言
2015/08/01 职场文书
Requests什么的通通爬不了的Python超强反爬虫方案!
2021/05/20 Python
MySQL学习必备条件查询数据
2022/03/25 MySQL