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 相关文章推荐
jQuery 学习 几种常用方法
Jun 11 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
javascript实现复制与粘贴操作实例
Oct 16 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
Textarea输入字数限制实例(兼容iOS&安卓)
Jul 06 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
vue渲染时闪烁{{}}的问题及解决方法
Mar 28 Javascript
JavaScript实现邮箱后缀提示功能的示例代码
Dec 13 Javascript
全面分析JavaScript 继承
May 30 Javascript
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
url decode problem 解决方法
2011/12/26 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
php生出随机字符串
2017/07/06 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP命令空间namespace及use的用法小结
2017/11/27 PHP
简单实用的js调试logger组件实现代码
2010/11/20 Javascript
JavaScript高级程序设计 读书笔记之八 Function类及闭包
2012/02/27 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
JS获取地址栏参数的小例子
2013/08/23 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
2015/10/25 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
2015/12/08 Javascript
JS+CSS实现DIV层的展开、收缩效果
2016/01/28 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
python实现socket客户端和服务端简单示例
2014/02/24 Python
浅谈Python中copy()方法的使用
2015/05/21 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
python实现播放音频和录音功能示例代码
2018/12/30 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
HTML5实现自带进度条和滑块滑杆效果
2018/04/17 HTML / CSS
精致的手工皮鞋:Shoe Embassy
2019/11/08 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
如何现实servlet的单线程模式
2014/08/05 面试题
外语专业毕业生个人的自荐信
2013/11/19 职场文书
创业计划书怎样才能打动风投
2014/01/01 职场文书
30年同学聚会感言
2014/01/30 职场文书
检讨书之工作不认真
2019/08/14 职场文书