delete 操作符用于删除对象的属性。
似乎很多同学(包括我)对 delete 操作符都是似是而非,为什么有的属性可以被删除,有的却不能被删除?为什么能够删除对象的属性却不能删除变量或函数?在 eval 和 严格模式下,delete 操作符又有哪些特性?等等。。
本文将从基本概念到 ECMPScript 内部原理来学习 delete 操作符。
语法
表达式
1 | delete object.property // 点操作符方式,常用方式 |
参数
- object - 对象名称,或者返回一个对象的表达式
- property - 将要删除的属性
返回值
delete 操作符返回 true 或 false。当被 delete 的对象的属性存在并且拥有 DontDelete (对象属性的一个内部属性,拥有该内部属性表明该属性不能被删除) 时返回 false(在严格模式下将抛出异常),否则返回 true。需要注意的是,对象属性不存在时也返回 true,所以返回值并非完全等同于删除成功与否。
delete 删除了什么
delete 操作符用来删除对象的属性,这里所说的属性实际上是属性本身,而不是属性指向的对象(对于引用类型来说)。所以,对于引用类型的值,delete 删除了对象属性的本身,不会删除属性指向的对象。
1 | var o = {}; |
在实际的 JavaScrip t中,delete o.x
之后,Object 对象会由于失去了引用而被垃圾回收, 所以 delete o.x
也就“相当于”删除了 o.x
所指向的对象,但这个动作并不是 ECMAScript 标准,也就是说,即使某个实现完全不删除 Object 对象,也不算是违反 ECMAScript 标准。
下面代码说明了 delete 只删除属性本身,而不会删除属性所指的对象:
1 | var o = {}; |
虽然是一个小小的 delete 操作符,其行为却异常复杂。
为什么我们能删除一个对象的属性:
1 | var x = { a: 1 }; |
但却不能删除一个变量:
1 | var x = 1; |
也不能删除一个函数:
1 | function x() { }; |
要知道其中的原委,我们需要先了解一些基本概念。
代码类型
在 ECMAScript 中,有 3 种不同类型的可执行代码:
- 全局代码 (Global code) - 当一段源代码被看成程序 (Program) 时,它将会在全局作用域内执行,并且被认为是全局代码。在浏览器环境中,脚本元素的内容通常被解释为程序,因此被作为全局代码来执行。
- 函数代码 (Function code) - 在一段函数中直接执行的代码就被认为是一段函数代码,在浏览器环境下,节点的事件属性(如
<a onclick="..."
)通常都作为函数代码来解析和执行。 - Eval代码 (Eval code) - 被内置函数
eval
执行的代码文本被解释成 Eval 代码
执行上下文 (Execution context)
代码的执行都是在特定的执行上下文中进行的,对于以上三种代码类型都有一个执行上下文与其对应。比如,当一个函数被执行时,程序控制就进入了函数代码执行上下文;当一段全局代码被执行时,程序控制就进入了全局代码执行上下文,等等。
执行上下文在逻辑上是一个栈(stack)。首先可能有一段全局代码,它拥有属于自己的执行上下文;在这段代码中可能调用一个函数,这个函数同样拥有属于自己的执行上下文;这个函数可能调用另一个函数,等等。即使当函数递归调用自己时,在每一步调用中仍然进入了不同的执行上下文。
执行上下文与作用域链和闭包等概念息息相关,欲深入了解执行上下文可以查阅作用域链和闭包的相关资料。
活动对象 (Activation object) / 变量对象 (Variable Object)
每个执行上下文都有一个与之相关联的变量对象 (Variable object),在某个执行上下文中申明的变量和函数将被当着属性 (properties) 附加到这个变量对象上面。
当在全局代码的执行上下文时,全局对象 (Global object) 成为当前执行上下文的变量对象,在浏览器中就是 window 对象。因此,声明的全局函数和变量就成为全局对象的属性。
1 | /* this 指代全局对象 */ |
局部变量(那些在函数代码中定义的变量)是怎么样的呢?当在函数代码的执行上下文时,活动对象 (Activation object) 成为当前执行上下文中的变量对象,在函数代码中申明的变量和函数成为活动对象的属性,并且函数的参数(形参名为属性名)和 Arguments 对象(arguments 为属性名)也将成为活动对象的属性。
注意,活动对象只是一个内部描述机制,在程序代码中不能直接访问。
1 | (function(foo) { |
在 eval 代码中申明的变量会根据 eval 所在的执行上下文来确定变量将成为哪个变量对象的属性。例如:
在全局环境中执行 eval,那么变量将成为全局对象的属性:
1 | var GLOBAL_OBJECT = this; |
在函数作用域中执行 eval,变量将成为活动对象的属性:
1 | var GLOBAL_OBJECT = this; |
属性的内部属性
我们马上就接近本文主题了,从上面我们知道声明的变量成了变量对象(全局对象或活动对象)的属性,同时每个属性都可以拥有一个或多个内部属性:ReadOnly
、DontEnum
、DontDelete
和 Internal
。这里我们关注的是 DontDelete
这个内部属性,拥有这个内部属性的变量表明该变量不能使用 delete 操作符删除。
当被声明的变量和函数成为变量对象的属性时,这些属性在创建时就带上了 DontDelete 这个内部属性。然而,任何显式/隐式赋值的属性不生成 DontDelete。这就是为什么我们能够删除一些属性,但有的却不能删除。
上面的分析可能不好理解,直接看下面的代码:
1 | var GLOBAL_OBJECT = this; |
内置对象和DontDelete
所以,某些属性不能被删除的根本原因在于:这些属性拥有内部属性 DontDelete
,该内部属性控制着该属性是否可以被删除。注意:内置对象的一些属性拥有内部属性 DontDelete
,因此不能被删除; 特殊的 arguments 变量(活化对象的属性)拥有 DontDelete
; 任何函数实例的 length (返回形参长度)属性也拥有 DontDelete
:
1 | (function() { |
与函数 arguments 相关联的属性也拥有 DontDelete,同样不能被删除:
1 | (function(foo, bar) { |
未声明的变量赋值
我们知道,直接给未声明的变量赋值会成为全局对象的属性,除非这一属性在作用域链内的其他地方被找到。而我们之前提到过,属性赋值和变量声明的区别:后者生成 DontDelete
而前者不生成,这也就是为什么未声明的变量赋值可以被删除。
1 | var GLOBAL_OBJECT = this; |
注意:内部属性是在属性生成时确定的,之后的赋值过程不会改变已有的属性的内部属性。理解这点非常重要。
1 | /* 'foo'创建的同时生成 DontDelete */ |
原型中声明的属性和对象自带的属性
原型 prototype 中声明的属性和对象自带的属性(其实这些属性也是在原型 prototype 中的)可以认为是带有 DontDelete 特性的,无法被删除。例如:
1 | //原型中声明的属性无法被删除 |
Eval 和 Firebug 控制台
**在 console 中的所有文本都会被当做 eval 代码来解析和执行,而不是全局或函数代码。**我之前说过,eval 在处理变量声明时有一个特殊的行为:在 eval 中声明的变量事实上没有 DontDelete 属性。所以,下面声明的所有变量最后都没有 DontDelete 这个内部属性,所以它们都能被删除。所以要小心普通的全局代码和 Firebug 控制台中代码的区别。
1 | eval('var foo = 1;'); |
在函数代码中也是一样:
1 | (function() { |
但是这也有一点例外,在 eval 代码中的函数内部通过 var
定义的变量具有 DontDelete,不能被删除。
1 | eval("(function() { var x = 42; delete x; return x; })();"); |
浏览器兼容性
了解事物的工作原理是重要的,但实际的实现情况更重要。浏览器在创建和删除变量/属性时都遵守这些标准吗? 对于大部分来说,是的。
这里有一个简单的测试集来检查全局代码、函数代码和 Eval 代码的遵守情况。 测试单元同时检测了 delete 操作的返回值和属性是否像预期那样被删除。delete 的返回值并不像它的实际结果那样重要,delete 操作返回 true 或 false 并不重要, 重要的是拥有/没有 DontDelete 的属性是否被删除。
现代浏览器总的来说还是遵守删除规则的,以下浏览器全部通过测试: Opera 7.54+,Firefox 1.0+,Safari 3.1.2+,Chrome 4+。
Safari 2.x 和 3.0.4 在删除函数 arguments 时存在问题,似乎这些属性在创建时不带 DontDelete,因此可以被删除。Safari 2.x 还有其他问题——删除无引用时(例如 delete 1)抛出错误(译者按:IE 同样有);函数声明生成了可删除的属性(奇怪的是变量声明则正常);eval 中的变量声明变成不可删除(而 eval 中的函数声明则正常)。
与 Safari 类似,Konqueror(3.5,而非4.3)在 delete 无引用和删除 arguments 是也存在同样问题。
Gecko DontDelete bug
Gecko 1.8.x 浏览器—— Firefox 2.x, Camino 1.x, Seamonkey 1.x, etc. ——存在一个有趣的 bug:显式赋值值给一个属性能移除它的 DontDelete,即使该属性通过变量或函数声明而生成。
1 | function foo() { }; |
令人惊讶的是,IE5.5-8 也通过了绝大部分测试,除了删除非引用抛出错误(e.g. delete 1,就像旧的 Safari)。 但是,虽然不能马上发现,事实上 IE 存在更严重的 bug,这些 bug 是关于全局对象。
IE bugs
在 IE 中(至少在 IE6-8 中),下面的表达式抛出异常(在全局代码中):
1 | this.x = 1; |
下面则是另一个:
1 | var x =1; |
这似乎说明,在 IE 中在全局代码中的变量声明并没有生成全局对象的同名属性。 通过赋值创建的属性(this.x = 1)然后通过 delete x 删除时抛出异常; 通过变量声明(var x = 1)创建的属性然后通过 delete this.x 删除时抛出另一个(译者按:在 IE6,7 下错误信息与上面的相同)。
但不只是这样,事实上通过显式赋值创建的属性在删除时总是抛出异常。 这不只是一个错误,而是创建的属性看上去拥有了 DontDelete 内部属性,而按规则应该是没有的:
1 | this.x = 1; |
另一方面,未声明的变量赋值(那些同样生成全局对象的属性)又确实在IE下能够正常删除:
1 | x = 1; |
但如果你试图通过 this 关键字来进行删除(delete this.x),那么上面的异常又将抛出:
1 | x = 1; |
如果归纳一下,我们将发现在全局代码中 delete this.x
永远不会成功。当通过显式赋值来生成属性(this.x = 1)时抛出一个异常; 当通过声明/非声明变量的方式(var x = 1 or x = 1)生成属性时抛出另一个异常。而另一方面,delete x 只有在显示赋值生成属性(this.x = 1)时才抛出异常。
宿主对象(Host Object)
小小总结一下 delete 操作符:
- 如果操作数不是引用类型,则返回
true
- 如果对象没有同名的直接属性,返回
true
(对象可以是活动对象或全局对象) - 如果属性存在但是有 DontDelete 特性, 返回
false
- 其它情况,删除属性并且返回
true
然而,对于宿主对象(host object)的 delete 操作的行为却可能是不可预料的。
我们已经看到了在IE中的一些问题:当删除某些对象(那些实现为了宿主对象)属性时抛出异常。 一些版本的 firefox 当试图删除 window.location 时抛出异常(译者按:IE 同样抛出)。 同样,在一些宿主对象中你也不能相信 delete 的返回值, 例如下面发生在 firefox 中的(译者按:chrome 中同样结果;IE 中抛出异常;opera 和 safari 允许删除,并且删除后无法调用,姑且算’正常‘,尽管,从下面的讨论来看似乎却是不正常的,它们事实上删除了不能删除的属性,而前面的浏览器没有):
1 | /* 'alert'是’window‘的一个直接属性(如果我们能够相信'hasOwnProperty') */ |
delete window.alert
返回 true
,尽管这个属性没有任何条件可能产生这个结果(按照上面的算法):它解析为一个引用,因此不能在第一步返回 true
;它是 window 对象的直接属性,因此不能在第二步返回 true;唯一能返回 true 的是当算法达到最后一步同时确实删除这个属性,而事实上它并没有被删除。(译者按:不,在 opera 和 safari 中确实被删除了…)。
所以这个故事告诉我们永远不要相信宿主对象。
ES5 严格模式
在 ES5 严格模式下,当删除操作指向一个变量/函数参数/函数声明的直接引用时抛出 SyntaxError。 此外,如果属性拥有内部属性 [[Configurable]] == false,将抛出 TypeError:
1 | (function(foo) { |
而且,在严格模式下,删除未声明的变量(换句话说,未解析的引用),同样抛出 SyntaxError;同时,在严格模式下未声明的赋值也将抛出异常 ReferenceError:
1 | ; |
看了之前给出的变量、函数声明和参数的例子,相信现在你也理解了,所有这些限制都是有其意义的。严格模式采取了更积极的和描述性的措施,而不只是忽略这些问题。
总结
下面是对于 JavaScript 中 delete 操作是如何工作的简短的总结:
- 变量和函数声明都是活化对象(Activation Object) 或全局对象(Global Object)的属性
- 属性拥有内部属性,其中 DontDelete 这个内部属性负责确定一个属性是否能够被删除
- 在全局或者函数代码中的变量和函数声明总是创建带有 DontDelete 特性的属性
- 函数参数总是活动对象的属性, 并且带有 DontDelete
- 在 Eval 代码中声明的变量和函数总是创建不带 DontDelete 特性 的属性
- 新的未声明的属性在生成时带空的内部属性,因此也不带 DontDelete 特性
- 永远不要相信宿主对象对 delete 操作做出的反应
如果你想要对这里所描述的东西更加熟悉的话,请参阅 ECMA-262 3rd edition specification。