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 相关文章推荐
jquery关于图形报表的运用实现代码
Jan 06 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
js带按钮的提示框可供选择示例代码
Sep 17 Javascript
JsRender实用入门教程
Oct 31 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 Javascript
js正则表达式replace替换变量方法
May 21 Javascript
node中使用es5/6以及支持性与性能对比
Aug 11 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
详解新手使用vue-router传参时注意事项
Jun 06 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
在数据量大(超过10万)的情况下
2007/01/15 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
php实现购物车功能(下)
2016/01/05 PHP
PHP实现简易blog的制作
2016/10/24 PHP
Yii框架的布局文件实例分析
2019/09/04 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
2012/04/07 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
Backbone.js中的集合详解
2015/01/14 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
vue购物车插件编写代码
2017/11/27 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
JS实现可用滑块滑动的缓动图代码
2019/09/01 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
python二叉树的实现实例
2013/11/21 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
运用PyTorch动手搭建一个共享单车预测器
2019/08/06 Python
pandas统计重复值次数的方法实现
2021/02/20 Python
Java提供了哪些企业应用编程接口
2015/02/13 面试题
一套C++笔试题面试题
2012/06/06 面试题
出国留学自荐信
2013/10/25 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
聘任通知书
2015/09/21 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android