JS的裸对象

所谓裸对象，即 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来说不适合（原因请读者自己想），但是对于其他大多数情况可能就够用了。