JavaScript delete操作符应用实例


Posted in Javascript onJanuary 13, 2009

今天在看prototype代码时发现了delete这个操作符

unset: function(key) { 
var value = this._object[key]; 
delete this._object[key]; 
return value; 
}

查了一下手册,
delete 运算符
从对象中删除一个属性,或从数组中删除一个元素。
delete expression
expression 参数是一个有效的 JScript 表达式,通常是一个属性名或数组元素。
说明
如果 expression 的结果是一个对象,且在 expression 中指定的属性存在,而该对象又不允许它被删除,则返回 false。
在所有其他情况下,返回 true。
看到“从数组中删除一个元素”感觉不错,可ff里试了一下,似乎只能删除那个元素的值,而不是元素本身。不过从对象中删除一个属性是可以的。
又google了一下,发现有一篇文章讲得很详细,转载过来以免忘记:
Javascript的变量
实际上Javascript中,变量 = 对象属性,这是因为 Javascript 在执行脚本之前会创建一个Global对象,所有的全局变量都是这个Global对象的属性,执行函数时也会创建一个Activation对象,所有的局部变量都是这个Activation对象的属性。如下例:
var global = 42; 
this.global; // 42, 可以通过this来访问Global对象 
this.global2 = 12; 
global2; // 12 
function foo() { 
var local = 36; 
// 不过无法直接访问Activation, 
// 因此无法通过 foo.local 的方式来访问local变量 
}

delete操作符删除的对象
C++中也有delete操作符,它删除的是指针所指向的对象。例如:
// C++ 
class Object { 
public: 
Object *x; 
} 
Object o; 
o.x = new Object(); 
delete o.x; // 上一行new的Object对象将被释放

但Javascript的delete与C++不同,它不会删除o.x指向的对象,而是删除o.x属性本身。
// Javascript 
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标准。
“删除属性而不是删除对象”这一点,可以通过以下的代码来确认。
var o = {}; 
var a = { x: 10 }; 
o.a = a; 
delete o.a; // o.a属性被删除 
o.a; // undefined 
a.x; // 10, 因为{ x: 10 } 对象依然被 a 引用,所以不会被回收

另外,delete o.x 也可以写作 delete o["x"],两者效果相同。
对变量执行delete的情况
由于变量也是 Global 或者是 Activation 对象的属性,所以对变量的delete操作也是同样的结果。
var global = 42; 
delete global; // 删除Global.global 
function foo() { 
var local = 36; 
delete local; // 删除Activation.local 
}

能删除的属性和不能删除的属性
并不是所有的属性都能被delete。例如,prototype中声明的属性就无法被delete:
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也不会被删除

对象的预定义属性也无法删除。 可以认为这类属性带有DontDelete的特性。
var re = /abc/i; 
delete re.ignoreCase; 
re.ignoreCase; // true, ignoreCase无法删除

能删除的变量和不能删除的变量
通过var声明的变量和通过function声明的函数拥有DontDelete特性,无法被删除。
var x = 36; 
delete x; 
x; // 36, x没有被删除 
y = 12; 
delete y; 
y; // undefined 
function foo() { return 42; } 
delete foo; 
foo(); // 42

但是有一点例外,就是通过 eval 执行的代码中,通过var声明的变量虽然与正常的var声明变量同属于Global对象,但它们不具有DontDelete特性,能被删除。
eval("var x = 36;"); 
x; // 42 
delete x; 
x; // undefined

但是这也有一点例外,eval的代码中的函数内通过var定义的变量具有DontDelete,不能被删除。
eval("(function() { var x = 42; delete x; return x; })();"); 
// 返回 42

delete的返回值
delete是普通运算符,会返回true或false。规则为:当被delete的对象的属性存在并且拥有DontDelete时返回false,否则返回true。这里的一个特点就是,对象属性不存在时也返回true,所以返回值并非完全等同于删除成功与否。
function C() { this.x = 42; } 
C.prototype.y = 12; 
var o = new C(); 
delete o.x; // true 
o.x; // undefined 
"x" in o; // false 
// o.x存在并且没有DontDelete,返回true 
delete o.y; // true 
o.y; // 12 
// o自身没有o.y属性,所以返回true 
// 从这里也可以看到prototype链的存在,对象自身属性和prototype属性是不同的 
delete o; // false 
// Global.o拥有DontDelete特性所以返回false 
delete undefinedProperty; // true 
// Global没有名为undefinedProperty的属性因此返回true 
delete 42; // true 
// 42不是属性所以返回true。有的实现会抛出异常(违反ECMAScript标准) 
var x = 24; 
delete x++; // true 
x; // 25 
// 被删除的是x++的返回值(24),不是属性,所以返回true
Javascript 相关文章推荐
jquery checkbox,radio是否选中的判断代码
Mar 20 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
JQuery 使用attr方法实现下拉列表选中
Oct 13 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
webpack分离css单独打包的方法
Jun 12 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
解决vue-router 切换tab标签关闭时缓存问题
Jul 22 Javascript
vuex页面刷新导致数据丢失的解决方案
Dec 10 Vue.js
在网页里看flash的trace数据的js类
Jan 10 #Javascript
捕获关闭窗口的脚本
Jan 10 #Javascript
javascript 自动转到命名锚记
Jan 10 #Javascript
Javascript 生成指定范围数值随机数
Jan 09 #Javascript
Js 订制自己的AlertBox(信息提示框)
Jan 09 #Javascript
通用JS事件写法实现代码
Jan 07 #Javascript
javascript 表单的友好用户体现
Jan 07 #Javascript
You might like
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
利用PHP判断是否是连乘数字串的方法示例
2017/07/03 PHP
greybox——不开新窗口看新的网页
2007/02/20 Javascript
jquery 插件 人性化的消息显示
2008/01/21 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
Jquery倒数计时按钮setTimeout的实例代码
2013/07/04 Javascript
解决html按钮切换绑定不同函数后点击时执行多次函数问题
2014/05/14 Javascript
jQuery实现鼠标可拖动调整表格列宽度
2014/05/26 Javascript
jquery.validate使用时遇到的问题
2015/05/25 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
vue 国际化 vue-i18n 双语言 语言包
2018/06/07 Javascript
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python 爬虫之超链接 url中含有中文出错及解决办法
2017/08/03 Python
python中logging库的使用总结
2017/10/18 Python
Python编程实现从字典中提取子集的方法分析
2018/02/09 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
初中生自我鉴定
2014/02/04 职场文书
租车协议书
2015/01/27 职场文书
人事文员岗位职责
2015/02/04 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
学校德育工作总结2015
2015/05/11 职场文书
童年读书笔记
2015/06/26 职场文书
趣味运动会广播稿
2015/08/19 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js