Javascript中的delete操作符详细介绍


Posted in Javascript onJune 06, 2014

一、变量

说到javascript中的delete操作符,还是首先要搞清楚javascript中的变量和属性之间的关系。

javascript中,变量和对象属性关系非常微妙,甚至可以很多时候会被等同起来,因为 javascript 在执行脚本之前会创建一个global对象,在浏览器中就是window对象,所有的全局变量都是这个global对象的属性,执行函数时也会创建一个activation对象,所有的局部变量都是这个activation对象的属性。这些可以大家可以去了解一下javascript作用域和闭包。

 
//原型中声明的属性无法被删除var global = 1;
this.global; // 1, 可以通过this来访问global对象
this.global2 = 2;
global2; // 12
function foo() {
var local = 36;
// 不过无法直接访问activation,
// 因此无法通过 foo.local 的方式来访问local变量
}

似乎变量就等同于对象属性,其实不然,至少对于delete操作符来说还是不一样的。我的理解是变量声明是必须通过 var 语句来完成的,未通过var 语句声明的全局变量都是都是window对象的属性。这样就很容易的理解变量和对象属性的关系了。

二、delete操作符

delete操作符是用来删除对象属性的。对于引用类型的值,它也是删除对象属性的本身,不会删除属性指向的对象。如果有疑问可以看看基本类型和引用类型的值,或者测试下面的代码:

 
var o = {};
var a = { x: 10 };
o.a = a;
delete o.a; // o.a属性被删除
console.log(o.a); // undefined
console.log(a.x); // 10, 因为{ x: 10 } 对象依然被 a 引用,所以不会被回收

另外,delete o.x 也可以写作 delete o["x"],两者效果相同。

三、变量是不能删除的

通过var声明的变量和通过function声明的函数拥有dontdelete特性,是不能被删除。未通过var声明的全局变量(全局对象的属性)

 
var global = {
    a: 123,
    b: {
        c: 1345
    }
};
delete global; //无效
console.log(global)obj = {
    a: 123
};
delete obj; // 删除obj全局变量,window对象的obj属性
console.log(obj);//obj is not defined

 

四、原型中声明的属性和对象自带的属性无法被删除

原型prototype中声明的属性和对象自带的属性(其实这些属性也是在原型prototype中的)可以认为是带有dontdelete的特性的,无法被删除。例如

 
//原型中声明的属性无法被删除function obj() {
    this.x = 1;
}
obj.prototype.x = 2;
var o = new obj();
console.log(o.x); // 1, 构造函数中定义的o.x
delete o.x;
console.log(o.x); // 2, prototype中定义的o.x,即使再次执行delete o.x也不会被删除
//对象自带的属性无法被删除
var strings = "123456";
console.log(strings.length);//6
delete strings.length;
console.log(strings.length);//依然是6

五、eval语句下的几个例外

eval执行的代码中,通过var声明的变量虽然与正常的var声明变量同属于global对象,但它们不具有dontdelete特性,能被删除。但是eval的代码中的函数内通过var定义的变量具有dontdelete,不能被删除。

eval("var x = 42;");
x; // => 42
delete x;
x; // => referenceerror: x is not defined
eval("function f() { return 12; }");
f(); // => 12
delete f;
f(); // => referenceerror: f is not defined
//eval执行的代码中,通过var声明的变量虽然与正常的var声明变量同属于global对象,
// 但它们不具有dontdelete特性,能被删除。
eval("(function () {" +
    " var x = 42;" +
    " delete x;" +
    " return x;" +
    "})();")
// => 42
// eval的代码中的函数内通过var定义的变量具有dontdelete,不能被删除。

六、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 相关文章推荐
javascript数组快速打乱重排的方法
Jan 02 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
Underscore之Array_动力节点Java学院整理
Jul 10 Javascript
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
Sep 10 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 #Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 #Javascript
JavaScript代码编写中各种各样的坑和填坑方法
Jun 06 #Javascript
按钮接受回车事件的三种实现方法
Jun 06 #Javascript
jquery统计用户选中的复选框的个数
Jun 06 #Javascript
javascript中的throttle和debounce浅析
Jun 06 #Javascript
单击某一段文字改写文本颜色
Jun 06 #Javascript
You might like
php 抽象类的简单应用
2011/09/06 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
php array_map()函数实例用法
2021/03/03 PHP
关于IFRAME 自适应高度的研究
2006/07/20 Javascript
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
2007/08/31 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
JavaScript时间转换处理函数
2015/04/14 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
2015/10/12 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JS实现多物体运动的方法详解
2018/01/23 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
2018/05/30 jQuery
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Django框架orM与自定义SQL语句混合事务控制操作
2019/06/27 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
《诚实与信任》教学反思
2014/04/10 职场文书
投标承诺书怎么写
2014/05/24 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
民间借贷借条范本
2015/05/25 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
Spring Boot实战解决高并发数据入库之 Redis 缓存+MySQL 批量入库问题
2022/02/12 Redis
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers