所谓裸对象,即 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。
以上。
分享到:
相关推荐
创建了一个裸后端来演示使用 JavaScript 的身份验证和 JWT。 后端是使用NodeJS,Express,MongoDB创建的。 我还使用 Postman 来测试我的端点。 方法论/项目管理: 敏捷编码实践: OOP(面向对象编程) 编程语言/...
是的,另一个 Observable for Javascript 实现。 为什么是另一个 Observable? Javascript 有很多 Observable 的实现——为什么还有一个呢? 在某种程度上,作为在实际项目中学习 Javascript 的一部分。 因为我...
查看fjs.cpp进行一个小示例,但实际上只是包含“ fjs.h”,然后您就可以访问JSParser对象。 实例化它,然后调用parse方法,该方法需要一个字符代码,然后您就可以离开! 还有一些方法可以注册c ++
最后,数据存储在一个数组中并且始终可以访问。 用法 var target = [] var v1 = [1,2,3] var v2 = [4,5,6] v().add( v1, v2 ) // Returns the new array [5,7,9] v(target).add( v1, v2 ) // Sets the target to ...
裸对象安装一个 Node 加载器钩子,它转换每个加载的 JavaScript 文件并将<>语法扩展为Object.create(null) var foo = < > ; foo.bar = 'bar'; // use just like normal objects 因为裸对象不继承自 Object...
使用了裸对象datastore来进行元素存储; 实现了两种得到字典长度的方法,一种为变量跟踪,一种为实时计算。 代码: function(){ use strict; function Dictionary(){ this._size = 0; this.datastore = ...
不同的是,现在他真的把你的对象从一个地方带到了另一个地方。 moveTo.js 的主要功能是从一个对象移动到另一个对象的动画。 它的工作原理是“去哪里?放哪里?”用法参数和构造: $(sourceElm).moveTo(targetElm [,...
supercaliheatmapwidget ...描述 交互式R日历热图的名副其实的Mary Poppins。 为什么? 真的不需要Vue或React 对相似的github日历事物...cal_margin :为日历热图参数构造一个裕量对象 cal_names :为日历小部件构造一个
相反,这是一个尝试切入问题的实质,并查看是否存在更简单的方法来进行实验 来自任何节点的不可变状态转换 稳定state属性 过渡结果的惰性评估 允许通用类型(参数化类型)的数组和对象类型 “查询”或收集当前状态...
我开始构建一个神奇的沙箱-基本上是一个装满沙子的箱子,还有一台深度相机扫描其地形。 因此,我可以在Rhino的3D模型中看到毫秒内物理模型的变化,可以立即对其进行分析。 为此,我需要将Kinect相机中的深度帧放入...
返回一个对象: users - 所有被爬取的用户的对象。 components - component.json的数组。 获取/日志 返回更新的事件源流。 获取/:用户 返回用户的所有组件。 补丁/:用户 更新用户的所有组件。 GET /:user/:repo...
addForce ( [ 15 , 15 ] ) 而对于裸对象,它可能看起来像这样: var p = { position : [ 25 , 25 ] , previous : [ 25 , 25 ] , acceleration : [ 0 , 0 ] , mass : 1 //defaults to 1.0 radius : 25 //defaults to...
产品后端用于管理产品的数据库和 REST API 后端#使用... }}如果交易由于某种原因失败,结果将如下所示: { "status": -1, "errorMessage": "..."}#端点##getProductByName getProductByName返回一个基于名称的 Produ
仅支持当前ES6模块语法的一个子集。 具体来说,仅支持默认导入和默认导出。 不包括命名的导入,多个导出和裸导入(有关更多信息,请参阅此页面的后面)。 因此,必须遵守以下约定:所有JS文件都应导出默认对象,...