特别声明:本文转载@bubkoo的《深入理解 JavaScript 中的 delete 操作符》一文,如需转载,烦请注明原文出处:http://bubkoo.com/2014/01/23/deep-in-delete
delete
操作符用于删除对象的属性。
似乎很多同学(包括我)对 delete
操作符都是似是而非,为什么有的属性可以被删除,有的却不能被删除?为什么能够删除对象的属性却不能删除变量或函数?在 eval
和 严格模式下,delete
操作符又有哪些特性?等等。。
本文将从基本概念到 ECMPScript 内部原理来学习 delete
操作符。
语法
表达式
delete object.property // 点操作符方式,常用方式
delete object['property'] // 字符串属性名方式
参数
object
:对象名称,或者返回一个对象的表达式property
:将要删除的属性
返回值
delete
操作符返回 true
或 false
。当被 delete
的对象的属性存在并且拥有 DontDelete
(对象属性的一个内部属性,拥有该内部属性表明该属性不能被删除) 时返回 false
(在严格模式下将抛出异常),否则返回 true
。需要注意的是,对象属性不存在时也返回 true
,所以返回值并非完全等同于删除成功与否。
delete
删除了什么
delete
操作符用来删除对象的属性,这里所说的属性实际上是属性本身,而不是属性指向的对象(对于引用类型来说)。所以,对于引用类型的值,delete
删除了对象属性的本身,不会删除属性指向的对象。
var o = {};
o.x = new Object();
delete o.x; // 上一行new的Object对象依然存在
o.x; // undefined,o的名为x的属性被删除了
在实际的 JavaScript中,delete o.x
之后,Object 对象会由于失去了引用而被垃圾回收, 所以 delete o.x
也就“相当于”删除了 o.x
所指向的对象,但这个动作并不是 ECMAScript 标准,也就是说,即使某个实现完全不删除 Object 对象,也不算是违反 ECMAScript 标准。
下面代码说明了 delete
只删除属性本身,而不会删除属性所指的对象:
var o = {};
var a = { x: 10 };
o.a = a;
delete o.a; // o.a属性被删除
o.a; // undefined
a.x; // 10, 因为{ x: 10 } 对象依然被 a 引用,所以不会被回收
虽然是一个小小的 delete
操作符,其行为却异常复杂。
为什么我们能删除一个对象的属性:
var x = { a: 1 };
delete x.a; // true
x.a; // undefined
但却不能删除一个变量:
var x = 1;
delete x; // false;
x; // 1
也不能删除一个函数:
function x() { };
delete x; // false;
typeof x; // "function"
要知道其中的原委,我们需要先了解一些基本概念。
代码类型
在 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
对象。因此,声明的全局函数和变量就成为全局对象的属性。
/* this 指代全局对象 */
var GLOBAL_OBJECT = this;
var foo = 1;
GLOBAL_OBJECT.foo; // 1
foo === GLOBAL_OBJECT.foo; // true
function bar(){}
typeof GLOBAL_OBJECT.bar; // "function"
GLOBAL_OBJECT.bar === bar; // true
局部变量(那些在函数代码中定义的变量)是怎么样的呢?当在函数代码的执行上下文时,活动对象 (Activation object) 成为当前执行上下文中的变量对象,在函数代码中申明的变量和函数成为活动对象的属性,并且函数的参数(形参名为属性名)和 Arguments 对象(arguments
为属性名)也将成为活动对象的属性。
注意,活动对象只是一个内部描述机制,在程序代码中不能直接访问。
(function(foo) {
var bar = 2;
function baz() {};
/*
抽象的过程
'arguments'对象成为所在函数的活化对象的属性:
ACTIVATION_OBJECT.arguments = arguments;
...参数 'foo'也是一样:
ACTIVATION_OBJECT.foo; // 1
...变量 'bar'也是一样:
ACTIVATION_OBJECT.bar; // 2
...函数 'baz'也是一样:
typeof ACTIVATION_OBJECT.baz; // "function"
*/
})(1);
在 eval
代码中申明的变量会根据 eval
所在的执行上下文来确定变量将成为哪个变量对象的属性。例如:
在全局环境中执行 eval
,那么变量将成为全局对象的属性:
var GLOBAL_OBJECT = this;
eval('var foo = 1');
GLOBAL_OBJECT.foo; // 1;
在函数作用域中执行 eval
,变量将成为活动对象的属性:
var GLOBAL_OBJECT = this;
(function () {
eval('var bar = 2;');
/*
抽象过程
ACTIVATION_OBJECT.bar; // 1
*/
})();
// 全局环境下不能访问 bar
this.bar // undefined
属性的内部属性
我们马上就接近本文主题了,从上面我们知道声明的变量成了变量对象(全局对象或活动对象)的属性,同时每个属性都可以拥有一个或多个内部属性:ReadOnly
、DontEnum
、DontDelete
和 Internal
。这里我们关注的是 DontDelete
这个内部属性,拥有这个内部属性的变量表明该变量不能使用 delete
操作符删除。
当被声明的变量和函数成为变量对象的属性时,这些属性在创建时就带上了 DontDelete
这个内部属性。然而,任何显式/隐式赋值的属性不生成 DontDelete
。这就是为什么我们能够删除一些属性,但有的却不能删除。
上面的分析可能不好理解,直接看下面的代码:
var GLOBAL_OBJECT = this;
/* 'foo'是全局对象的一个属性,
它通过变量声明而生成,因此拥有内部属性 DontDelete
这就是为什么它不能被删除
*/
var foo = 1;
delete foo; // false
typeof foo; // "number"
/* 'bar'是全局对象的一个属性,
它通过变量声明而生成,因此拥有 DontDelete
这就是为什么它同样不能被删除
*/
function bar() {};
delete bar; // false
typeof bar; // "function"
/* 'baz'也是全局对象的一个属性,
然而,它通过属性赋值而生成,因此没有DontDelete
这就是为什么它可以被删除
*/
GLOBAL_OBJECT.baz = "baz";
delete GLOBAL_OBJECT.baz; // true
typeof GLOBAL_OBJECT.baz; // "undefined"
内置对象和DontDelete
所以,某些属性不能被删除的根本原因在于:这些属性拥有内部属性 DontDelete
,该内部属性控制着该属性是否可以被删除。注意:内置对象的一些属性拥有内部属性 DontDelete
,因此不能被删除; 特殊的 arguments
变量(活化对象的属性)拥有 DontDelete
; 任何函数实例的 length
(返回形参长度)属性也拥有 DontDelete
:
(function() {
//不能删除'arguments',因为有DontDelete
delete arguments; // false;
typeof arguments; // "object"
//也不能删除函数的'length',因为有DontDelete
function f() {};
delete f.length; // false;
typeof f.length; // "number"
}) ();
与函数 arguments
相关联的属性也拥有 DontDelete
,同样不能被删除:
(function(foo, bar) {
delete foo; // false
foo; // 1
delete bar; // false
bar; // "bah"
}) (1, "bah");
未声明的变量赋值
我们知道,直接给未声明的变量赋值会成为全局对象的属性,除非这一属性在作用域链内的其他地方被找到。而我们之前提到过,属性赋值和变量声明的区别:后者生成 DontDelete
而前者不生成,这也就是为什么未声明的变量赋值可以被删除。
var GLOBAL_OBJECT = this;
/* 通过变量声明生成全局对象的属性,拥有 DontDelete */
var foo = 1;
/* 通过未声明的变量赋值生成全局对象的属性,没有 DontDelete */
bar = 2;
delete foo; // false
delete bar; // true
注意:内部属性是在属性生成时确定的,之后的赋值过程不会改变已有的属性的内部属性。理解这点非常重要。
/* 'foo'创建的同时生成 DontDelete */
function foo() {};
/* 之后的赋值过程不改变已有属性的内部属性,DontDelete仍然存在 */
foo = 1;
delete foo; // false;
typeof foo; // "number"
/* 但赋值一个不存在的属性时,创建了一个没有内部属性的属性,因此没有 DontDelete */
this.bar = 1;
delete bar; // true;
typeof bar; // "undefined"
原型中声明的属性和对象自带的属性
原型 prototype
中声明的属性和对象自带的属性(其实这些属性也是在原型 prototype
中的)可以认为是带有 DontDelete
特性的,无法被删除。例如:
//原型中声明的属性无法被删除
function C() { this.x = 42; }
C.prototype.x = 12;
var o = new C();
o.x; // 42, 构造函数中定义的o.x
delete o.x;
o.x; // 12, prototype中定义的o.x,即使再次执行delete o.x也不会被删除
//对象自带的属性无法被删除
var re = /abc/i;
delete re.ignoreCase;
re.ignoreCase; // true, ignoreCase无法删除
Eval 和 Firebug 控制台
在 console
中的所有文本都会被当做 eval
代码来解析和执行,而不是全局或函数代码。我之前说过,eval
在处理变量声明时有一个特殊的行为:在 eval
中声明的变量事实上没有 DontDelete
属性。所以,下面声明的所有变量最后都没有 DontDelete
这个内部属性,所以它们都能被删除。所以要小心普通的全局代码和 Firebug 控制台中代码的区别。
eval('var foo = 1;');
foo; // 1
delete foo; // true
typeof foo; // "undefined"
在函数代码中也是一样:
(function() {
eval('var foo = 1;');
foo; // 1
delete foo; // true
typeof foo; // "undefined"
}) ();
但是这也有一点例外,在 eval
代码中的函数内部通过 var
定义的变量具有 DontDelete
,不能被删除。
eval("(function() { var x = 42; delete x; return x; })();");
// 返回 42
浏览器兼容性
了解事物的工作原理是重要的,但实际的实现情况更重要。浏览器在创建和删除变量/属性时都遵守这些标准吗? 对于大部分来说,是的。
这里有一个简单的测试集来检查全局代码、函数代码和 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
,即使该属性通过变量或函数声明而生成。
function foo() { };
delete foo; // false;
typeof foo; // "function"
this.foo = 1;
delete foo; // true
typeof foo; // "undefined"
令人惊讶的是,IE5.5-8 也通过了绝大部分测试,除了删除非引用抛出错误(e.g. delete 1
,就像旧的 Safari)。 但是,虽然不能马上发现,事实上 IE 存在更严重的 bug,这些 bug 是关于全局对象。
IE bugs
在 IE 中(至少在 IE6-8 中),下面的表达式抛出异常(在全局代码中):
this.x = 1;
delete x; // TypeError: Object doesn't support this action
下面则是另一个:
var x =1;
delete this.x; // TypeError: Cannot delete 'this.x'
// 译者按:在IE8下抛出此异常,在IE6,7下抛出的是和上面一样的异常
这似乎说明,在 IE 中在全局代码中的变量声明并没有生成全局对象的同名属性。 通过赋值创建的属性(this.x = 1
)然后通过 delete x
删除时抛出异常; 通过变量声明(var x = 1
)创建的属性然后通过 delete this.x
删除时抛出另一个(译者按:在 IE6,7 下错误信息与上面的相同)。
但不只是这样,事实上通过显式赋值创建的属性在删除时总是抛出异常。 这不只是一个错误,而是创建的属性看上去拥有了 DontDelete
内部属性,而按规则应该是没有的:
this.x = 1;
delete this.x; // TypeError: Object doesn't support this action
delete x; // TypeError: Object doesn't support this action
另一方面,未声明的变量赋值(那些同样生成全局对象的属性)又确实在IE下能够正常删除:
x = 1;
delete x; // true
但如果你试图通过 this
关键字来进行删除(delete this.x
),那么上面的异常又将抛出:
x = 1;
delete this.x; //TypeError: Cannot delete 'this.x'
如果归纳一下,我们将发现在全局代码中 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 允许删除,并且删除后无法调用,姑且算’正常‘,尽管,从下面的讨论来看似乎却是不正常的,它们事实上删除了不能删除的属性,而前面的浏览器没有):
/* 'alert'是’window‘的一个直接属性(如果我们能够相信'hasOwnProperty') */
window.hasOwnProperty('alert'); // true
delete window.alert; // true
typeof window.alert; // "function"
delete window.alert
返回 true
,尽管这个属性没有任何条件可能产生这个结果(按照上面的算法):它解析为一个引用,因此不能在第一步返回 true
;它是 window
对象的直接属性,因此不能在第二步返回 true
;唯一能返回 true
的是当算法达到最后一步同时确实删除这个属性,而事实上它并没有被删除。(译者按:不,在 Opera 和 Safari 中确实被删除了…)。
所以这个故事告诉我们永远不要相信宿主对象。
ES5 严格模式
在 ES5 严格模式下,当删除操作指向一个变量/函数参数/函数声明的直接引用时抛出 SyntaxError。 此外,如果属性拥有内部属性 [[Configurable]] == false
,将抛出 TypeError:
(function(foo) {
"use strict"; //在函数中开启严格模式
var bar;
function baz;
delete foo; // SyntaxError,当删除函数参数时
delete bar; // SyntaxError,当删除变量时
delete baz; // SyntaxError,当删除由函数声明创建的变量时
/* function实例的length拥有[[Configurable]] : false */
delete (function() {}).length; // TypeError
}) ();
而且,在严格模式下,删除未声明的变量(换句话说,未解析的引用),同样抛出 SyntaxError;同时,在严格模式下未声明的赋值也将抛出异常 ReferenceError:
"use strict";
delete i_dont_exist; // SyntaxError
i_dont_exist_either = 1; // ReferenceError
看了之前给出的变量、函数声明和参数的例子,相信现在你也理解了,所有这些限制都是有其意义的。严格模式采取了更积极的和描述性的措施,而不只是忽略这些问题。
总结
下面是对于 JavaScript 中 delete
操作是如何工作的简短的总结:
- 变量和函数声明都是活化对象(Activation Object) 或全局对象(Global Object)的属性
- 属性拥有内部属性,其中
DontDelete
这个内部属性负责确定一个属性是否能够被删除 - 在全局或者函数代码中的变量和函数声明总是创建带有
DontDelete
特性的属性 - 函数参数总是活动对象的属性, 并且带有
DontDelete
- 在
Eval
代码中声明的变量和函数总是创建不带DontDelete
特性 的属性 - 新的未声明的属性在生成时带空的内部属性,因此也不带
DontDelete
特性 - 永远不要相信宿主对象对
delete
操作做出的反应
如果你想要对这里所描述的东西更加熟悉的话,请参阅 ECMA-262 3rd edition specification。