如何创建一个JavaScript裸对象

所谓裸对象，即 naked object ，是指没有原型（spec中以[[proto]]内建属性表示）的对象。

JavaScript是少见的采用原型继承的语言。访问一个对象的属性时，会首先看它自己的属性，所谓 own property 是也，如果找不到，则在其原型中查找，再找不到就继续找这个原型的原型，这就构成所谓的原型链。

原型继承提供了一种很独特的共享信息的方式，不过也带来一些有趣的问题。比如with构造。

我在2011年w3ctech广州的演讲中提到过with构造的问题，所以在strict模式中with就被禁用了。

其中一个问题是，with(obj)时，obj如果是你不可掌控的对象，会引入无法控制的风险。所谓不可掌控，例如浏览器对象（像在演讲中举的event对象），或者第三方库的对象或可能被第三方库修改的对象（例如DOM对象就是如此，许多库会在上面加各种东西）。

这和原型有什么关系？很有关系！因为with不是仅仅查找own property，而是也会上溯原型链。

例子：

var name = 'hax'
with (console) {
  log('Hello ' + name)
}

注意，许多实现里 console.log 的 log 方法并非直接在 console 对象上，而是在 console 的原型上。

如此看上溯原型链似乎是件好事，但是考虑这个代码：

var name = 'hax', count = 3
with (console) {
  for (var i = 0; i < count; i++)
    log('Hello ' + name)
}

这代码在有些环境可以跑，如NodeJS；但在Chrome里就不行了，会死循环（我没高兴实验，欢迎小白鼠尝试）。虽然大家用的都是V8引擎，但是Chrome里的console上有一个count()方法。

更讨厌的是，几乎所有对象都有原型，一直到Object.prototype。考虑如下代码：

function constructor() {
  ...
}
with ({}) {
  var x = constructor() 
}

实际结果等价于 x = Object() ，因为 Object.prototype.constructor == Object 。

这也导致修改Object.prototype就可能干扰所有的 with 块。而Object.prototype是所有对象的原型，换句话说，几乎所有情况下都是不可掌控的。

【注意，确实是存在不以 Object.prototype 为原型的对象，比如某些环境里的host对象，但是显然它们也不属于你可掌控的对象。】

可见with的最初设计就有失误，如果是仅仅查找 own property 会好很多。不过现在已经不可能做这样的修改，所以只能想其他方式，比如如果我们真正的有 naked object，那么就可以做到对对象的完全掌控。


听上去不太可能，除了null和undefined，所有对象（包括number、string和boolean通常会自动装箱成包装对象）都是Object的实例，也就是有Object.prototype作为原型链的最末端。

不过ES5所增加的Object.create()方法就提供了这样一个能力！只要调用Object.create(null)就可以得到一个裸对象！这这不错。所以我们得到了一个相对安全的with方式如下：

with (Context({a: 1, b: 2})) {
  console.log(a, b)
}

function Context(obj) {
  var pds = {}
  var names = Object.getOwnPropertyNames(obj)
  for (var i = 0; i < names.length; i++) {
    pds[names[i]] = Object.getOwnPropertyDescriptor(obj, names[i])
  }
  return Object.create(null, pds)
}

不过，对于老的，没有Object.create方法的浏览器怎么办？

许多浏览器有 __proto__ 属性可以直接访问对象的 __proto__ 。所以NCZ写过一篇关于裸对象的文章：Naked JavaScript objects就提到这个方式。看上去其实比Object.create还要简单：

with({a: 1, b: 2, __proto__: null}) { ... }

不过还有一些老浏览器不支持 __proto__ ，例如IE。怎么办呢？


其实有办法。

可以发现，在整个JavaScript对象世界里，似乎所有的对象都有原型，但是有一个例外。

没错，那就是所有对象之源：Object.prototype 。它自己是没有原型的！

var root = Object.prototype
Object.getPrototypeOf(root) === null // true

如果我们把Object.prototype上的所有属性都delete掉，我们就得到了一个裸对象！

不过这样把Object.prototype给破坏，显然会影响我们的程序。好在咱有 iframe ！每个iframe的执行环境是独立的！于是可以每次创建一个iframe，把它里面的Object.prototype给拿来用！（听上去挺浪费的是吧……）

代码如下：

function nakedObject() {
	var iframe = document.createElement('iframe')
	iframe.width = iframe.height = 0
	iframe.style.display = 'none'
	document.appendChild(iframe)
	iframe.src = 'javascript:'
	var proto = iframe.contentWindow.Object.prototype
	iframe.parentNode.removeChild(iframe)
	iframe = null
	
	var props = [
		'constructor', 'hasOwnProperty', 'propertyIsEnumerable',
		'isPrototypeOf', 'toLocaleString', 'toString', 'valueOf' 
	]
	for (var i = 0; i < props.length; i++) {
		delete proto[props[i]]
	}
	return proto
}

不过这个技巧确实相当浪费，仅仅为了创建一个对象就建立了一整个iframe及其环境！那可相当于一个完整的网页！在IE中创建几千个这样的对象，就需要好几秒时间和几十兆内存！所以这个技巧只能用于真正需要的地方，比如with。虽然同样可以用于模拟Object.create(null)的行为，但是是否真的有这样的需求？或许更简单的方式是把一个普通对象上从Object.prototype继承来的属性遮蔽掉（即设为undefined），尽管这对于with来说不适合（原因请读者自己想），但是对于其他大多数情况可能就够用了。因此，我也不打算把这个trick提交给es5-shim项目，而只是仅用到我自己的一个项目中：my.js。

以上。

评论

5 楼 zhuzhuaijq 2012-10-25  

var o = Object.create(null);

o.__proto__ === null

4 楼 hax 2012-08-27  

p2227 写道

不用with就行了啊

99.9%的场合确实不应该用with，我的演讲里也是这样说的。但是确实有0.1%的场合可能要用。就是元编程，比如做模块系统。

3 楼 hax 2012-08-27  

myst729 写道

贺老你应该果断放弃对旧浏览器的支持……

在中国，面向大众的Web产品仍然要支持IE6，因为份额仍然在20%到30%左右。是否支持老浏览器，这是一个商业决策，不是技术决策。我个人估计跌到2%以下时（随便估计下还要3年左右吧）可以考虑放弃支持。不过还有IE8呢。这个就慢了。

2 楼 p2227 2012-08-27  

不用with就行了啊

1 楼 myst729 2012-08-27  

贺老你应该果断放弃对旧浏览器的支持……