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中的继承实例代码
Apr 27 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
基于jQuery仿淘宝产品图片放大镜特效
Oct 19 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
Sep 20 Javascript
Bootstrap3 Grid system原理及应用详解
Sep 30 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
Dec 21 Javascript
vue组件实例解析
Jan 10 Javascript
jquery实现input框获取焦点的简单实例
Jan 26 Javascript
详解AngularJS 模块化
Jun 14 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 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更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php分页函数示例代码分享
2014/02/24 PHP
php多重接口的实现方法
2015/06/20 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
jQuery学习5 jQuery事件模型
2010/02/07 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
新手vue构建单页面应用实例代码
2017/09/18 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
2018/12/03 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
[48:23]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#1COL VS EG第一局
2016/03/05 DOTA
分析Python中解析构建数据知识
2018/01/20 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python三引号输出方法
2019/02/27 Python
详解python编译器和解释器的区别
2019/06/24 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
pytorch 限制GPU使用效率详解(计算效率)
2020/06/27 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
2013/11/18 HTML / CSS
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
EM Cosmetics官网:由彩妆大神Michelle Phan创办的独立品牌
2020/04/27 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
战友聚会邀请函
2014/01/18 职场文书
小学体育教学反思
2014/01/31 职场文书
《盲人摸象》教学反思
2014/02/16 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
八年级历史教学反思
2016/02/19 职场文书
解决Pytorch半精度浮点型网络训练的问题
2021/05/24 Python
如何判断pytorch是否支持GPU加速
2021/06/01 Python
python3+PyQt5+Qt Designer实现界面可视化
2021/06/10 Python
Java完整实现记事本代码
2022/06/16 Java/Android