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 广告后加载,加载完页面再加载广告
Nov 25 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
ES6的Fetch异步请求的实现方法
Dec 07 Javascript
详细介绍解决vue和jsp结合的方法
Feb 06 Javascript
leaflet加载geojson叠加显示功能代码
Feb 21 Javascript
vue组件系列之TagsInput详解
May 14 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中的日期处理方法集锦
2007/01/02 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php简单实现文件或图片强制下载的方法
2016/12/06 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
JQUERY操作JSON实例代码
2010/02/09 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
2016/10/27 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
[50:21]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/19 DOTA
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python 序列的方法总结
2016/10/18 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
python argparse模块通过后台传递参数实例
2020/04/20 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
Lookfantastic台湾:英国彩妆美发保养购物网
2018/03/26 全球购物
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
2015年生产车间工作总结
2015/04/22 职场文书
apache基于端口创建虚拟主机的示例
2021/04/22 Servers
Python中的min及返回最小值索引的操作
2021/05/10 Python
MySQL 存储过程的优缺点分析
2021/05/20 MySQL
CentOS 7安装mysql5.7使用XtraBackUp备份工具命令详解
2022/04/12 MySQL