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 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
vue绑定class与行间样式style详解
Aug 16 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
vue项目中引入Sass实例方法
Aug 27 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
Zend Framework页面缓存实例
2014/06/25 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php生成年月日下载列表的方法
2015/04/24 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
javascript基本类型详解
2014/11/28 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
2016/05/31 Javascript
Vue.js动态组件解析
2016/09/09 Javascript
js实现城市级联菜单的2种方法
2017/06/23 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
详解JavaScript的变量
2019/04/04 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
2020/07/29 Javascript
python定时器(Timer)用法简单实例
2015/06/04 Python
Python中的字符串查找操作方法总结
2016/06/27 Python
基于python进行桶排序与基数排序的总结
2018/05/29 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
keras 实现轻量级网络ShuffleNet教程
2020/06/19 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
Vans(范斯)德国官网:美国南加州的原创极限运动潮牌
2017/05/02 全球购物
护理专业自荐信
2013/12/03 职场文书
幼儿园实习自我鉴定
2013/12/15 职场文书
岗位竞聘演讲稿
2014/01/10 职场文书
学生喝酒检讨书
2014/02/06 职场文书
科级干部考察材料
2014/02/15 职场文书
小学安全教育材料
2014/02/17 职场文书
四群教育工作实施方案
2014/03/26 职场文书
事假请假条范文
2014/04/11 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2015毕业实习推荐信
2015/03/23 职场文书
行政处罚事先告知书
2015/07/01 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
python如何进行基准测试
2021/04/26 Python
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js