深入剖析js命名空间函数namespace

浏览数：20 / 时间：2015年06月09日

在看阿里员工写的开源数据库连接池的druid的源代码时，发现了其中在jquery的原代码中有定义了一个命名空间的函数：$.namespace()，其代码如下：

技术分享

网址为：https://github.com/alibaba/druid/blob/master/src/main/resources/support/http/resources/js/jquery.min.js

使用方法为：

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$.namespace("druid.index");
druid.index=function(){
	var i,j;	// 定义变量
	return {
		login:function(){
			//login 方法的实现
		},
		submit:function(){
			// submit 方法的实现
		}
	}
}

//使用命名空间的函数
druid.index.login();
druid.index.submit();

这样的话，就不会在全局变量区，引入很多的函数，将所有要使用的函数已经变量都放入了命名空间druid.index中，避免了不同js库中的函数名的冲突。

但是namespace函数的定义如何理解呢？

$.namespace = function() {  
	   var a=arguments, o=null, i, j, d;  
	   for (i=0; i<a.length; i=i+1) {  
	      d=a[i].split(".");  
	      o=window;  
	      for (j=0; j<d.length; j=j+1) {  
	         o[d[j]]=o[d[j]] || {};  
	         o=o[d[j]];  
	      }  
	   }  
	return o;  
};

思考了很久，才明白他其实是利用了全局window对象的不可覆盖性，来达到目的的。比如我们看下面的代码：

console.log(window);
window = {};
console.log(window);
window = null;
console.log(window);
window = undefined;
console.log(window);

打印的结果都是 window, 而不会是 null 或者 undefined。也就是说window是个极其特殊的对象，他是不可覆盖的。

我们利用firebug来调试看看命名空间到底是如何实现的，我们一步一步的接近目标，先看如下代码：

(function(){  
	var o = window;
	console.log(o);	// 打印Window	
	o.druid={};
	console.log(o);	// 打印Window
	console.log(o.druid);	// 打印 Object {}
})();

firebug中显示的对象为：

技术分享

上面这个结果应该很好理解，因为 o指向了window，所以o.index = {}; 也就相当于 window.index = {}; 在window上定义了一个名叫index的对象。

下面我们在上面的代码上加码，在前进一步，接着看：

(function(){  
	var o = window;
	console.log(o);	// 打印Window	
	o.druid={};
	console.log(o);	// 打印Window
	console.log(o.druid);	// 打印 Object {}

	o = o.druid;
	console.log(o);	// 打印 Object {}
	console.log(window);	// 打印Window
	console.log(o.druid);	// 打印  undefined
})();

对应firebug中对象和上一步一样，没有变化：

技术分享

上面的代码中：o = o.druid; 之后，因为 o 是指向 window，为什么console.log(o); 打印 Object {}；而 console.log(window); 打印输出Window呢？这里的原因就是 window 的不可覆盖性！也就是说 o = o.druid 导致o被空对象覆盖了，按照道理因为 o 指向window，那么window也应该指向了一个空对象，但是因为widnow不可覆盖，所以这里，仅仅覆了o，而没有同时覆window对象，因为window不可覆盖。

o = o.druid; 执行之后，o 不再执行window对象了，而是指向了window.druid对象，那么最后的console.log(o.druid);为什么打印输出 undefined 呢？很简单，因为 o 已经指向了 window.druid; 而window.druid是个空对象，其下并没有个druid的属性，所以自然就打印输出 undefined 了。

也就是说最后的console.log(o.druid); 就相当于 console.log(window.druid.druid);

好，理解了上面的代码，我们在加上一段代码：

(function(){  
	var o = window;
	console.log(o);	// 打印Window	
	o.druid={};
	console.log(o);	// 打印Window
	console.log(o.druid);	// 打印 Object {}

	o = o.druid;
	console.log(o);	// 打印 Object {}
	console.log(window);	// 打印Window
	console.log(o.druid);	// 打印  undefined

	o.index = {};
	console.log(o.index);	// 打印 Object {}
	o = o.index;
	console.log(o.index);	//  undefined
})();

对应的firebug中显示的对象为：

技术分享