JavaScript this 深入理解

JavaScript this 核心机制解析

近期研读 prototype、Ext core 等 JavaScript 库源码，发现其大量运用此概念。直至阅读《JavaScript 王者归来》方对 this 有深刻理解。总结如下： 1. 函数调用者与所有者 JavaScript 函数存在调用者与所有者概念。调用者指调用函数的对象，通常指向调用当前函数的函数引用；顶层调用时 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");

改变 this 指向的方法

初始调用 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 指向）的方法是将函数引用赋值给某个对象的属性。

apply 与 call 的使用差异

此外，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://www.jb51.net/article/16863.htm

JavaScript this 深入理解 https://www.jb51.net/article/19425.htm

JAVASCRIPT THIS详解 面向对象 https://www.jb51.net/article/17584.htm

Javascript this指针 https://www.jb51.net/article/19434.htm

JavaScript中this关键字使用方法详解 https://www.jb51.net/article/7954.htm

Javascript this关键字使用分析 https://www.jb51.net/article/16235.htm