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 相关文章推荐
非主流的textarea自增长实现js代码
Dec 20 Javascript
JS 去除Array中的null值示例代码
Nov 20 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 jQuery
关于vue-cli 3配置打包优化要点(推荐)
Apr 22 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
教你使用vscode 搭建react-native开发环境
Jul 07 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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
IStream与TStream之间的相互转换
2008/08/01 PHP
php检查是否是ajax请求的方法
2015/04/16 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
PHP实现简易计算器功能
2020/08/28 PHP
php获取微信openid方法总结
2019/10/10 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
artDialog 4.1.5 Dreamweaver代码提示/补全插件 附下载
2012/07/31 Javascript
使用jquery实现div的tab切换实例代码
2013/05/27 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JavaScript中对象的不同创建方法
2016/08/12 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
2016/09/14 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
利用Javascript实现一套自定义事件机制
2017/12/14 Javascript
ES6入门教程之Array.from()方法
2019/03/23 Javascript
解决vue admin element noCache设置无效的问题
2019/11/12 Javascript
Vue中避免滥用this去读取data中数据
2021/03/02 Vue.js
Python中的生成器和yield详细介绍
2015/01/09 Python
Python元字符的用法实例解析
2018/01/17 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
django中的HTML控件及参数传递方法
2018/03/20 Python
详解django中使用定时任务的方法
2018/09/27 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
opencv-python 读取图像并转换颜色空间实例
2019/12/09 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
《美丽的田园》教学反思
2014/03/01 职场文书
2014年医院后勤工作总结
2014/12/06 职场文书
先进党支部申报材料
2014/12/24 职场文书
电视新闻稿
2015/07/17 职场文书
2015年科学教研组工作总结
2015/07/22 职场文书
董事长年会致辞
2015/07/29 职场文书
Python竟然能剪辑视频
2021/05/25 Python