JavaScript this 深入理解


Posted in Javascript onJuly 30, 2009

最近一段时间看了很多JavaScript 的库源码, 如 prototype, Ext core 等。这些库中大量应用到了这一概念。直到昨天翻了一下《JavaScript王者归来》这本书才算对this有一个深刻的理解。
大至归结一下:
1. 函数调用者与所有者
JavaScript 中函数(function) 存在调用者 与 所有者这两个概念,调用者是指调用函数的对象,通常是一个指向调用了当前函数的函数的引用,如果是顶层调用,那么caller=null, 大部分浏览器的JavaScript实现 可以用 caller 这个属性获得(这不是 ECMAScript 规范的一部分,所有还是慎用)。 从以下的代码能够很好的理解这点:

function a(){ 
alert('fun a caller=' + a.caller); 
} 
function b(){ 
a(); 
} 
a(); 
b();

-----------
运行结果可以看到两个对话框:
1.
fun a caller=null;
2.
fun a caller=function b(){
a();
}
--------------------------
而对于所有者,则是指调用函数的对象(一个动态的概念), 在函数体中的this就是指向了函数的所有者。在这里的this 与 Java 以及 C++ 中的 this指针是完全不同的两个概念,很多人忽略了这一点,这也是导致 JavaScript中的this无法很好理解的原因之一。看看以下的例子:
var oa = { 
x:1, 
y:2 
} 
var ob = { 
x:11, 
y:12 
} 
function a(w){ 
alert(w + "=" + this.x + "," + this.y) 
} 
a("?"); 
oa.fun = a; 
oa.fun("a"); 
ob.fun = a; 
ob.fun("b");

---------
一开始的调用 a() 这时未指定所有者,一般这种情况 this 是指向浏览器的顶层元素 window 的, 而window中未定义x 与 y 属性。
所以结果显示为: ?=undefined,undefined
oa.fun = a; oa.fun("a"); 将函数引用赋值给对像a的属性fun, 这时再调用函数的所有者变成了a, 则结果显示为:a=1,2
同理 ob.fun("b")则显示:b=11,12。
在JavaScript中要改变一个函数的所有者(this)的方法就是将函数引用赋值给一个对象的属性。
同是在Function对象中也提供了两个原型函数可以实现这一功能: apply, call, 这两个函数的第一个参数就是要指定的所有者对象,它们间的唯一区别就是apply将其后的要传递给函数的形参封装到数组中,或者直接用 arguments对象。而call则直接将形参跟在其后。
因此上面的 oa.fun=a; oa.fun("a") 可以改写成 a.apply(oa, ["a"]) 或 a.call(oa, "a");
ob.fun=b; ob.fun("b") 可以改写成 a.apply(ob, ["b"]) 或 b.call(ob, "b");
知道了以上这此,对于 this 的作用域及其使用就很好理解了。

下面是一些参考文档
javascript this用法小结
https://3water.com/article/16863.htm

JavaScript this 深入理解
https://3water.com/article/19425.htm

JAVASCRIPT THIS详解 面向对象
https://3water.com/article/17584.htm

Javascript this指针
https://3water.com/article/19434.htm

JavaScript中this关键字使用方法详解
https://3water.com/article/7954.htm

Javascript this关键字使用分析
https://3water.com/article/16235.htm

Javascript 相关文章推荐
javascript中的继承实例代码
Apr 27 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
jQuery晃动层特效实现方法
Mar 09 Javascript
基于jquery实现三级下拉菜单
May 10 Javascript
Bootstrap轮播插件简单使用方法介绍
Jun 21 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
webpack自动打包和热更新的实现方法
Jun 24 Javascript
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
Google Map API更新实现用户自定义标注坐标
Jul 29 #Javascript
JavaScript Konami Code 实现代码
Jul 29 #Javascript
JavaScript 获取事件对象的注意点
Jul 29 #Javascript
javascript CSS画图之基础篇
Jul 29 #Javascript
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 #Javascript
JavaScript 设计模式学习 Factory
Jul 29 #Javascript
JQuery UI皮肤定制
Jul 27 #Javascript
You might like
暴雪前总裁遗憾:没尽早追赶Dota 取消星际争霸幽灵
2020/03/08 星际争霸
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
php 输出缓冲 Output Control用法实例详解
2020/03/03 PHP
prettify 代码高亮着色器google出品
2010/12/28 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
2014/12/15 Javascript
jquery插件unobtrusive实现片段式加载
2015/06/15 Javascript
两种JS实现屏蔽鼠标右键的方法
2020/08/20 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
字符串反转_JavaScript
2016/04/28 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
Angular.js中$resource高大上的数据交互详解
2017/07/30 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
2019/05/06 Javascript
原生JS实现拖拽效果
2020/12/04 Javascript
vue添加自定义右键菜单的完整实例
2020/12/08 Vue.js
基python实现多线程网页爬虫
2015/09/06 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
Python操作rabbitMQ的示例代码
2019/03/19 Python
python图像和办公文档处理总结
2019/05/28 Python
基于matplotlib xticks用法详解
2020/04/16 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python 使用生成器代替线程的方法
2020/08/04 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
英国外籍人士的在线超市:British Corner Shop
2019/06/03 全球购物
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
班级学雷锋活动总结
2014/06/26 职场文书
入党现实表现材料
2014/12/23 职场文书
师德师风个人总结
2015/02/06 职场文书
红色经典电影观后感
2015/06/18 职场文书
小学运动会报道稿
2015/07/22 职场文书