js delete

在开始之前，先让我们看一段代码

Js代码  
  1. >>> var sum = function(a, b) {return a + b;}   
  2. >>> var add = sum;   
  3. >>> delete sum  
  4. true  
  5. >>> typeof sum;  
  6. "undefined"  

这段代码是Firebug控制台里的实际结果，初看这段代码，你觉得有什么问题？但我要说的是，删除sum应该是失败的，同时typeof sum的结果不应该是undefined，因为在Javascript里以这种方式声明的变量是无法被删除的。

那么问题出在哪里？为了回答这个问题，我们需要理解delete操作符在各种情况下的实现细节，然后再回过头来看Firebug的这个看似“诡异”的输出。

P.S 没有特殊声明的情况下，下文中所提到的Javascript都指的是ECMAScript规范。

 

1. 理论

 delete操作符通常用来删除对象的属性：

Js代码  
  1. var o = { x: 1 };   
  2. delete o.x; // true  
  3. o.x; // undefined  

 而不是一般的变量：

Js代码 
  1. var x = 1;   
  2. delete x; // false  
  3. x; // 1  

 或者是函数：

Js代码 
  1. function x(){}  
  2. delete x; // false  
  3. typeof x; // "function"  

 注意delete只有在无法删除的情况下才会返回false。

为了理解这一点，我们必须解释一下变量初始化以及变量属性的一些基本概念--很不幸的是很少有Javascript的书能讲到这些。如果你只想知其然而不是知其所以然的话，你完全可以跳过这一节。

 

代码的类型

在ECMAScript中，有三种可执行代码类型：全局代码、函数代码、eval代码。

1. 当一段代码被当做程序段运行的时候，它是在全局作用域下执行的，也就是全局代码。在浏览器环境下，通常<SCRIPT>元素就是一段全局代码。

2. 所有在function中声明的代码即是函数代码，最常见的是HTML元素的响应事件(<p onclick="...">)。

3. 传入内建的eval函数中的代码段称为eval代码，稍后我们会看到这种类型的特别性。

 

执行上下文(Execution Context)

在ECMAScript代码执行的时候，总是会有一个执行的上下文。这是一个比较抽象的概念，但可以帮助我们理解作用域以及变量初始化的相关过程。对于以上三种代码段类型，都有一个相应的执行上下文，比如函数代码有函数上下文，全局代码有全局上下文，等等。

 

逻辑上执行上下文相互间可以形成堆栈，在全局代码执行的最开始会有一个全局上下文，当调用一个函数的时候会进入相应函数的上下文，之后又可以再继续调用其他的函数亦或是递归调用自己，这时执行上下文的嵌套类似于函数调用栈。

 

Activation object / Variable object

每个执行上下文都和一个Variable object（变量对象）相关联 ，这也是一个抽象的概念，便于我们理解变量实例化机制：在源代码中声明的变量和方法实际上都是作为属性被加入到与当前上下文相关联的这个对象当中 。

 

当执行全局代码的时候，Variable object就是一个全局对象，也就是说所有全局变量和函数都是作为这个变量的属性存在。

Js代码    收藏代码
  1. /* 全局环境下，this所指向的就是这个全局对象 */  
  2. var GLOBAL_OBJECT = this;  
  3.   
  4. var foo = 1;  
  5. GLOBAL_OBJECT.foo; // 1  
  6. foo === GLOBAL_OBJECT.foo; // true  
  7.   
  8. function bar(){}  
  9. typeof GLOBAL_OBJECT.bar; // "function"  
  10. GLOBAL_OBJECT.bar === bar; // true  

 

那么对于在函数中声明的变量呢？情况是类似的，函数中声明的变量也是被当做相应上下文对象的属性，唯一的区别是在函数代码段中，这个对象被称为Activation object（活动对象）。每次进入一个函数调用都会新建一个新的活动对象。

 

在函数段中，并不是只有显式声明的变量和函数会成为活动对象的属性，对于每个函数中隐式存在的arguments对象（函数的参数列表）也是一样的。注意活动对象其实是一种内部机制，程序代码是无法访问到的。

Js代码    收藏代码
  1. (function(foo){  
  2.   
  3.   var bar = 2;  
  4.   function baz(){}  
  5.   
  6.   /* 
  7.   可以吧活动对象作为一个抽象的存在，在每进入一个函数的时候，默认的arguments对象以及传入的参数都会自动被设为活动对象的属性:  
  8.     ACTIVATION_OBJECT.arguments; // arguments变量 
  9.  
  10.   传入参数foo: 
  11.     ACTIVATION_OBJECT.foo; // 1 
  12.  
  13.     函数内声明的变量bar: 
  14.     ACTIVATION_OBJECT.bar; // 2 
  15.  
  16.     以及函数内定义的baz函数: 
  17.     typeof ACTIVATION_OBJECT.baz; // "function" 
  18.   */  
  19.   
  20. })(1);  

 最后，在evel代码段中定义的变量都是被加入到当前执行eval的上下文环境对象中，也就是说进入eval代码时并不会新建新的变量对象，而是沿用当前的环境。

 

Js代码    收藏代码
  1. var GLOBAL_OBJECT = this;  
  2.   
  3. /* foo被加入到当前变量对象中，也就是全局对象。 */  
  4.   
  5. eval('var foo = 1;');  
  6. GLOBAL_OBJECT.foo; // 1  
  7.   
  8. (function(){  
  9.   
  10.   /* bar被加入到当前这个函数的活动对象中。 */  
  11.   
  12.   eval('var bar = 1;');  
  13.   
  14.   /*  
  15.     可以抽象地表示为:  
  16.     ACTIVATION_OBJECT.bar; // 1 
  17.   */  
  18.   
  19. })();  

 

变量属性的标记

我们已经知道声明变量时发生了什么（他们都变成了当前上下文对象的属性），接下来我们就要看一下属性究竟是怎么样一回事。每一个变量属性都可以有以下任意多个属性: ReadOnly, DontEnum, DontDelete, Internal。你可以把这些当做标记，标明了变量属性可以持有的某种特性。这里我们最感兴趣的就是DontDelete标记。

 

在声明变量或者函数时，他们都变成了当前上下文对象的属性--对于函数代码来说是活动对象，对于全局代码来说则是变量对象，而值得注意的是这些属性在创建时都带有DontDelete标记，但是显式或者隐式的赋值语句所产生的属性并不会带有这个标记！这就是为什么有一些属性我们可以删除，但另一些却不可以：

Js代码    收藏代码
  1. var GLOBAL_OBJECT = this;  
  2.   
  3. /*  foo是被正常声明的，所以带有DontDelete标记，从而不能被删除！ */  
  4.   
  5. var foo = 1;  
  6. delete foo; // false  
  7. typeof foo; // "number"  
  8.   
  9. /* bar是作为函数被声明，一样带有DontDelete，不能被删除。 */  
  10.   
  11. function bar(){}  
  12. delete bar; // false  
  13. typeof bar; // "function"  
  14.   
  15. /*  baz是直接通过一个赋值而没有声明，不会持有DontDelete标记，才可以被删除！ */  
  16.   
  17. GLOBAL_OBJECT.baz = 'blah';  
  18. delete GLOBAL_OBJECT.baz; // true  
  19. typeof GLOBAL_OBJECT.baz; // "undefined"  

 

内建对象与DontDelete

DontDelete就是一个特殊的标记，用来表明某一个属性能否被删除。需要注意的是一些内建的对象是自动持有这个标记的，从而不能被删除，比如函数内的arguments，以及函数的length属性。

Js代码    收藏代码
  1. (function(){  
  2.   
  3.   /*arguments对象默认持有DontDelete标记，不能被删除。 */  
  4.   
  5.   delete arguments; // false  
  6.   typeof arguments; // "object"  
  7.   
  8.   /* 函数的length属性也一样 */  
  9.   
  10.   function f(){}  
  11.   delete f.length; // false  
  12.   typeof f.length; // "number"  
  13.   
  14. })();  

 函数的传入参数也是一样的:

Js代码    收藏代码
  1. (function(foo, bar){  
  2.   
  3.   delete foo; // false  
  4.   foo; // 1  
  5.   
  6.   delete bar; // false  
  7.   bar; // 'blah'  
  8.   
  9. })(1, 'blah');  

 

 非声明性赋值

你可能知道，非声明性的赋值语句会产生全局变量，进而变成全局变量对象的属性。所以根据上面的解释，非声明性的赋值所产生的对象是可以被删除的：

Js代码    收藏代码
  1. var GLOBAL_OBJECT = this;  
  2.   
  3. /* 通过声明的全局变量会持有DontDelete，无法被删除。 */  
  4. var foo = 1;  
  5.   
  6. /* 没有经过声明的变量赋值不会带DontDelete，可以被删除。 */  
  7. bar = 2;  
  8.   
  9. delete foo; // false  
  10. typeof foo; // "number"  
  11.   
  12. delete bar; // true  
  13. typeof bar; // "undefined"  

 

需要注意的是属性标记诸如DontDelete是在这个属性被创建的时候 产生的，之后对该属性的任何赋值都不会改变此属性的标记！

Js代码    收藏代码
  1. /* foo被声明时会带有DontDelete标记 */  
  2. function foo(){}  
  3.   
  4. /* 之后对foo的赋值无法改变他所带的标记！ */  
  5. foo = 1;  
  6. delete foo; // false  
  7. typeof foo; // "number"  
  8.   
  9. /* 当给一个还不存在的属性赋值的时候会创建一个不带任何标记的属性（包括DontDelete），进而可以被删除！ */  
  10.   
  11. this.bar = 1;  
  12. delete bar; // true  
  13. typeof bar; // "undefined"  

 

2. Firebug的困扰

现在再让我们回到最开始的问题，为什么在Firebug控制台里声明的变量可以被删除呢？这就要牵涉到eval代码段的特殊行为，也就是在eval中声明的变量创建时都不会带有DontDelete标记！

Js代码    收藏代码
  1. eval('var foo = 1;');  
  2. foo; // 1  
  3. delete foo; // true  
  4. typeof foo; // "undefined"  

 在函数内部也是一样的:

Js代码    收藏代码
  1. (function(){  
  2.   
  3.   eval('var foo = 1;');  
  4.   foo; // 1  
  5.   delete foo; // true  
  6.   typeof foo; // "undefined"  
  7.   
  8. })();  

 这就是导致Firebug"诡异"行为的罪魁祸首: 在Firebug控制台中的代码最终将通过eval执行，而不是作为全局代码或函数代码。显然地，这样声明出来的变量都不会带DontDelete标记，所以才能被删除！(译者:也不能太信任Firebug啊。)

 

3. Browsers Compliance

//译者:这一节讲了主流浏览器对一些delete的特殊情况的不同处理，篇幅所限暂不赘述，有兴趣的可以参看原文。

 

4. IE bugs

是的，你没有看错，整个这一节都是在讲IE的bug!

在IE6-8中，下面的代码会抛出错误（全局代码）:

Js代码    收藏代码
  1. this.x = 1;  
  2. delete x; // TypeError: Object doesn't support this action  
  3.   
  4. var x = 1;  
  5. delete this.x; // TypeError: Cannot delete 'this.x'  

 看起来似乎在IE里变量声明并不会在全局变量对象里产生相应的属性。还有更有趣的，对于显式赋值的属性总是会在删除时出错，并不是真正抛出错误，而是这些属性似乎都带有DontDelete标记，和我们的设想相反。

Js代码    收藏代码
  1. this.x = 1;  
  2.   
  3. delete this.x; // TypeError: Object doesn't support this action  
  4. typeof x; // "number" (没有被删除！)  
  5.   
  6. delete x; // TypeError: Object doesn't support this action  
  7. typeof x; // "number" (还是没有被删除！)  
 

但下面的代码表明，非声明性的赋值产生的属性确实是可以删除的:

Js代码    收藏代码
  1. x = 1;  
  2. delete x; // true  
  3. typeof x; // "undefined"  

 不过当你试图通过全局变量对象this来访问x的时候，错误又来了:

Js代码    收藏代码
  1. x = 1;  
  2. delete this.x; // TypeError: Cannot delete 'this.x'  

 总而言之，通过全局this变量去删除属性(delete this.x)总会出错，而直接删除该属性(delete x)时：如果x是通过全局this赋值产生会(this.x=1)导致错误；如果x通过显式声明创建(var x=1)则delete会像我们预料的那样无法删除并返回false；如果x通过非声明式赋值创建(x=1)则delete可以正常删除。

对于以上的问题，Garrett Smith 的一个解释是"IE的全局变量对象是通过JScript实现，而一般的全局变量是由host实现的。"(ref: Eric Lippert’s blog entry )

我们可以自己验证一下这个解释，注意this和window看上去是指向同一个对象，但是函数所返回的当前环境的变量对象却和this不同。

Js代码    收藏代码
  1. /* in Global code */  
  2. function getBase(){ return this; }  
  3.   
  4. getBase() === this.getBase(); // false  
  5. this.getBase() === this.getBase(); // true  
  6. window.getBase() === this.getBase(); // true  
  7. window.getBase() === getBase(); // false  

 

5. 错误的理解

 //译者: 大意为网上对Javascript一些行为有各种不同的解释，有的甚至可能完全矛盾，不要轻易相信别人的解释，试着自己去寻找问题的核心:)

 

6. delete与宿主对象(host objects)

delete的大致算法如下:

1. 如果操作对象不是一个引用，返回true

2. 如果当前上下文对象没有此名字的一个直接属性，返回true（上下文对象可以是全局对象或者函数内的活动对象）

3. 如果存在这样一个属性但是有DontDelete标记，返回false

4. 其他情况则删除该属性并返回true

 

然而有一个例外，即对于宿主对象而言，delete操作的结果是不可预料的。这并不奇怪，因为宿主对象根据不同浏览器的实现允许有不同的行为，这其中包括了delete。所以当处理宿主对象时，其结果是不可信的，比如在FF下:

Js代码    收藏代码
  1. /* "alert" 是window对象的一个属性 */  
  2. window.hasOwnProperty('alert'); // true  
  3.   
  4. delete window.alert; // true  
  5. typeof window.alert; // "function"，表明实际上并没有真正删除  

 总而言之，任何时候都不要相信宿主对象。

 

7. ES5 strict mode

为了能更早地发现一些应该被发现的问题，ECMAScript 5th edition 提出了strict mode的概念。下面是一个例子:

Js代码    收藏代码
  1. (function(foo){  
  2.   
  3.   "use strict"; // enable strict mode within this function  
  4.   
  5.   var bar;  
  6.   function baz(){}  
  7.   
  8.   delete foo; // SyntaxError (when deleting argument)  
  9.   delete bar; // SyntaxError (when deleting variable)  
  10.   delete baz; // SyntaxError (when deleting variable created with function declaration)  
  11.   
  12.   /* `length` of function instances has { [[Configurable]] : false } */  
  13.   
  14.   delete (function(){}).length; // TypeError  
  15.   
  16. })();  

 删除不存在的变量:

Js代码    收藏代码
  1. "use strict";  
  2. delete i_dont_exist; // SyntaxError  

 对未声明的变量赋值:

Js代码    收藏代码
  1. "use strict";  
  2. i_dont_exist = 1; // ReferenceError  

 可以看出，strict mode采用了更主动并且描述性的方法，而不是简单的忽略无效的删除操作。

 

8. 总结

  • 变量和函数的声明实际上都会成为全局对象或者当前函数活动对象的属性。
  • 属性都有一个DontDelete标记，用于表明该属性是否能被delete。
  • 变量和函数的声明创建的属性都会带有DontDelete标记。
  • 函数内建的arguments对象作为该函数活动对象的默认属性，创建时总会带有DontDelete标记。
  • 在eval代码块中声明的变量和方法都不带有DontDelete标记。
  • 对还不存在的变量或属性的直接赋值产生的对象不会带有任何标记，包括DontDelete。
  • 对于宿主对象而言，delete操作的结果有可能是不可预料的。
     

posted on 2017-03-22 14:36  signheart  阅读(315)  评论(0)  编辑  收藏  举报

导航