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 相关文章推荐
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
jQuery中数据缓存$.data的用法及源码完全解析
Apr 29 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
jsTree使用记录实例
Dec 01 Javascript
简单实现js拖拽效果
Jul 25 Javascript
React Native验证码倒计时工具类分享
Oct 24 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
微信小程序new Date()方法失效问题解决方法
Jul 29 Javascript
layui表格 返回的数据状态异常的解决方法
Sep 10 Javascript
在网页里看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加密扩展库Mcrypt安装和实例
2013/11/10 PHP
Symfony实现行为和模板中取得request参数的方法
2016/03/17 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
Autocomplete Textbox Example javascript实现自动完成成功
2007/08/17 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
JavaScript+html5 canvas制作色彩斑斓的正方形效果
2016/01/27 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
2018/12/11 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
python对日志进行处理的实例代码
2018/10/06 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
HTML5拖拽API经典实例详解
2018/04/20 HTML / CSS
犹他州最古老的体育用品公司:Al’s
2020/12/18 全球购物
司机的工作范围及职责
2013/11/13 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
党员争先创优承诺书
2015/01/20 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年双拥工作总结
2015/04/08 职场文书
教师思想工作总结2015
2015/05/13 职场文书