从动态属性扩展视角解析 jQuery access 函数设计

动态扩展对象的基础实现

假设存在一个名为 employee 的对象，

 
function employee(){
this.e_id = 0;
this.e_name = "";
} 

此时，需要为该对象动态添加名为 "age" 的属性以及 "toString()" 方法，

 
var empObj = new employee();
empObj["age"] = 20;
empObj["toString"] = function() { return this.e_id.toString() + this.e_name; };

上述代码仅用一行即可完成任务，这得益于 JavaScript 语言本身的特性。然而，在实际开发中，我们通常希望在此基础上进行一定程度的封装与扩展，因此会将这一行简单的赋值操作抽离为一个独立的方法：

 
function dym_setprop(obj, key, value) {
if (obj && key) {
obj[key] = value;
} 
} 

引入函数回调机制

在此处，我们可以将思路暂时转向 C# 语言中的 employee 对象，参考如下：

在面向对象的编程范式中，对外暴露的通常是属性（包含 Get/Set 访问器）。那么，如何将这种机制引入到 JavaScript 中呢？回到 dym_setprop 函数内部，这意味着我们不能直接使用 obj[key]=value 进行直接赋值，而需要支持类似 Set 的行为逻辑。

 
function dym_setprop(obj, key, value, fn) {
if (obj && key) {
fn(obj, key, value);
} 
} 

这里的参数 fn 在 dym_setprop 中并不直接操作任何对象，而是通过函数 fn 来替代具体的操作代码。这种方式不仅支持了 Set 操作，还保留了极大的自由扩展空间。

继续深入分析 dym_setprop 方法，我们将关注点转移到参数 value 上。众所周知，value 既可以是值类型，也可以是函数。对于值类型，无需额外处理，直接赋值即可；而对于函数类型，则涉及两种不同的操作模式：

1、直接将函数引用赋给新扩展的属性

2、将函数执行后的返回值赋给新扩展的属性

 
function dym_setprop(obj, key, value, fn, exec, pass) {
if (obj && key) {
var temp = value;
if (exec) {
temp = value.call(obj, key, fn(obj, key));
} 
fn(obj, key, temp, pass);
} 
} 

在这段代码中，参数 exec 起到了选择上述两种操作模式的作用，而参数 pass 则是一个额外的执行参数。此外，读者可能会对 fn 产生疑惑，因为它在代码中出现了两次，区别仅在于参数个数不同。fn 究竟代表什么？再次回顾 C# 中的属性概念，它包含 Get 和 Set。在这里，fn(obj,key) 相当于执行 Get 操作，而 fn(obj,key,temp,pass) 则相当于执行 Set 操作。

例如，参考以下代码中 fn 的定义与使用方式：

 
employee.AccessProp = function(obj, key, value) {
if (value) {
obj[key] = value;
} 
} else {
return obj[key];
} 
} 
dym_setprop(empObj, "age", function(key, value) { return value + 10; }, employee.AccessProp, true);

阅读上述内容后，或许有人会感到困惑：简单的动态扩展对象程序为何要以这种方式编写？这似乎有些多此一举。事实上，如果你仅仅希望实现动态扩展对象，确实不建议采用上述 dym_setprop 的思路。然而，如果你试图从更抽象的角度思考问题，将 dym_setprop 内部的程序视为一个流程执行的模板，那么这是一种非常优秀的设计方式。因为 dym_setprop 内部不承担任何具体代码（如 obj[key]=value 或 obj[key]）的执行，所有具体执行逻辑均通过函数 fn 来替代，从而为具体执行提供了完全自由的空间。

jQuery access 函数源码解析

理解上述思路后，让我们进入本文的核心部分：jQuery 是如何实现动态扩展对象的？答案在于 access 函数。

function access( elems, key, value, exec, fn, pass ) {
var length = elems.length;
// Setting many attributes
if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value );
} 
return elems;
} 
// Setting one attribute
if ( value !== undefined ) {
// Optionally, function values get executed if exec is true
exec = !pass && exec && jQuery.isFunction(value);
for ( var i = 0; i < length; i++ ) {
fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
} 
return elems;
} 
// Getting an attribute
return length ? fn( elems[0], key ) : null;
} 

仔细研读 access 函数的代码，你一定会发现它与 dym_setprop 具有极高的相似度。它仅仅多出了一段代码：

 
if ( typeof key === "object" ) {
for ( var k in key ) {
access( elems, k, key[k], exec, fn, value );
} 
return elems;
}

显而易见，这段代码主要用于支持对 object 对象进行动态扩展属性。具体的执行流程可通过下图展示：

至此，文章主体部分已完成。本文尝试从个人视角推测 jQuery 开发者是如何设计出 access 函数以支持动态扩展对象的，并说明了 access 的执行流程。虽然这种推测未必完全准确，但这并不妨碍我对 jQuery 源码的研究与探索。