js中的内部属性与delete操作符介绍


Posted in Javascript onAugust 10, 2015

在讲解Configurable之前,我们首先来看一道面试题:

a = 1;
console.log( window.a ); // 1
console.log( delete window.a ); // true
console.log( window.a ); // undefined

var b = 2;
console.log( window.b ); // 2
console.log( delete window.b ); // false
console.log( window.b ); // 2

从上面的这道题可以看出两个的区别:在没有使用var声明变量时,使用delete关键词是可以进行删除的,再次获取时值就是undefined了;在使用var声明的变量,使用delete是不能删除的,再获取时值依然是2。

1. delete操作符

使用delete删除变量或属性时,删除成功返回true,否则返回false。如上面的例子中,delete无法删除变量a时,则返回false;而delete能成功删除变量b,则返回true。

除了上述的两种情况,还有其他的各种常用变量也有能被delete删除的,也有不能被删除的。我们先不管delete这些变量时,为什么会产生这样的结果,这里只看他的返回值:

删除delete数组中其中的一个元素:

// 使用for~in是循环不到的,直接忽略到该元素
// 使用for()可以得到该元素,但是值是undefined
var arr = [1, 2, 3, 4];
console.log( arr );     	// [1, 2, 3, 4]
console.log( delete arr[2] );	// true,删除成功
console.log( arr );      	// [1, 2, undefined, 4]

删除function类型的变量:

// chrome 不能删除;火狐可以删除
function func(){
}
console.log( func );
console.log( delete func );
console.log( func );

删除function.length,该length是获取形参的个数:

function func1(a, b){
}
console.log( func1.length );   	// 2
console.log( delete func1.length );	// true,删除成功
console.log( func1.length );   	// 0

删除常用变量:

console.log( delete NaN );  	// false,删除失败
console.log( delete undefined );// false
console.log( delete Infinity );	// false
console.log( delete null );  	// true,删除成功

删除prototype,而不是删除prototype上的属性:

function Person(){
}
Person.prototype.name = "蚊子";
console.log( delete Person.prototype );	// false,无法删除
console.log( delete Object.prototype );	// false

删除数组和字符串的length时:

var arr = [1, 2, 3, 4];
console.log( arr.length );    	// 4
console.log( delete arr.length ); 	// false,删除失败
console.log( arr.length );    	// 4

var str = 'abcdefg';
console.log( str.length );    	// 7
console.log( delete str.length ); 	// false,删除失败
console.log( str.length );    	// 7

删除obj中的属性时:

var obj = {name:'wenzi', age:25};
console.log( obj.name );   	// wenzi
console.log( delete obj.name );	// true,删除成功
console.log( obj.name );   	// undefined
console.log( obj );      	// { age:25 }

删除实例对象中的属性时,从以下的输出结果可以看出,使用delete删除属性时,删除的仅仅是实例对象本身的属性,而不能删除prototype上的属性,即使再删一次也是删除掉不的;若要删除prototype上的属性的属性或方法,只能是:delete Person.prototype.name

function Person(){
  this.name = 'wenzi';
}
Person.prototype.name = '蚊子';
var student = new Person();
console.log( student.name );    // wenzi
console.log( delete student.name ); // true,删除成功
console.log( student.name );    // 蚊子
console.log( delete student.name ); // true
console.log( student.name );    // 蚊子
console.log( delete Person.prototype.name );// true,删除成功
console.log( student.name );    // undefined

2. js的内部属性

在上面的例子中,有的变量或属性能够删除成功,而有的变量或属性则无法进行删除,那是什么决定这个变量或属性能不能被删除呢。

ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接访问)。ECMAScript中有两种属性:数据属性和访问器属性。

2.1 数据属性

数据属性指包含一个数据值的位置,可在该位置读取或写入值,该属性有4个供述其行为的特性:

  • [[configurable]]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;
  • [[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
  • [[Writable]]:表示是否可修改属性的值。默认true;
  • [[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象Person中定义了name属性,其值为'wenzi',对该值的修改都反正在这个位置

要修改对象属性的默认特征(默认都为true),可调用Object.defineProperty()方法,它接收三个参数:属性所在对象,属性名和一个描述符对象(必须是:configurable、enumberable、writable和value,可设置一个或多个值)。

如下:

var person = {};
Object.defineProperty(person, 'name', {
  configurable: false,	// 不可删除,且不能修改为访问器属性
  writable: false,		// 不可修改
  value: 'wenzi'			// name的值为wenzi
});
console.log( person.name);			// wenzi
console.log( delete person.name );	// false,无法删除
person.name = 'lily';
console.log( person.name );			// wenzi

可以看出,delete及重置person.name的值都没有生效,这就是因为调用defineProperty函数修改了对象属性的特征;值得注意的是一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:Uncaught TypeError: Cannot redefine property: name);

2.2 访问器属性

它主要包括一对getter和setter函数,在读取访问器属性时,会调用getter返回有效值;写入访问器属性时,调用setter,写入新值;该属性有以下4个特征:

  • [[Configurable]]:是否可通过delete操作符删除重新定义属性;
  • [[Numberable]]:是否可通过for-in循环查找该属性;
  • [[Get]]:读取属性时自动调用,默认:undefined;
  • [[Set]]:写入属性时自动调用,默认:undefined;

访问器属性不能直接定义,必须使用defineProperty()来定义,如下:

var person = {
  _age: 18
};
Object.defineProperty(person, 'isAdult', {
	Configurable : false,
  get: function () {
    if (this._age >= 18) {
      return true;
    } else {
      return false;
    }
  }
});
console.log( person.isAdult ); // true

不过还是有一点需要额外注意一下,Object.defineProperty()方法设置属性时,不能同时声明访问器属性(set和get)和数据属性(writable或者value)。意思就是,某个属性设置了writable或者value属性,那么这个属性就不能声明get和set了,反之亦然。

如若像下面的方式进行定义,访问器属性和数据属性同时存在:

var o = {};
Object.defineProperty(o, 'name', {
  value: 'wenzi',
  set: function(name) {
    myName = name;
  },
  get: function() {
    return myName;
  }
});

上面的代码看起来貌似是没有什么问题,但是真正执行时会报错,报错如下:

Uncaught TypeError: Invalid property. A property cannot both have accessors and be writable or have a value

对于数据属性,可以取得:configurable,enumberable,writable和value;

对于访问器属性,可以取得:configurable,enumberable,get和set。

由此我们可知:一个变量或属性是否可以被删除,是由其内部属性Configurable进行控制的,若Configurable为true,则该变量或属性可以被删除,否则不能被删除。

可是我们应该怎么获取这个Configurable值呢,总不能用delete试试能不能删除吧。有办法滴!!

2.3 获取内部属性

ES5为我们提供了Object.getOwnPropertyDescriptor(object, property)来获取内部属性。

如:

var person = {name:'wenzi'};
var desp = Object.getOwnPropertyDescriptor(person, 'name'); // person中的name属性
console.log( desp );	// {value: "wenzi", writable: true, enumerable: true, configurable: true}

通过Object.getOwnPropertyDescriptor(object, property)我们能够获取到4个内部属性,configurable控制着变量或属性是否可被删除。这个例子中,person.name的configurable是true,则说明是可以被删除的:

console.log( person.name );			// wenzi
console.log( delete person.name );	// true,删除成功
console.log( person.name );			// undefined

我们再回到最开始的那个面试题:

a = 1;
var desp = Object.getOwnPropertyDescriptor(window, 'a');
console.log( desp.configurable ); 	// true,可以删除

var b = 2;
var desp = Object.getOwnPropertyDescriptor(window, 'b');
console.log( desp.configurable ); 	// false,不能删除

跟我们使用delete操作删除变量时产生的结果是一样的。

3. 总结

别看一个简简单单的delete操作,里面其实包含了很多的原理!

Javascript 相关文章推荐
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
Sep 14 Javascript
JqGrid web打印实现代码
May 31 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
JQuery实现展开关闭层的方法
Feb 17 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
javascript设计模式Constructor(构造器)模式
Aug 19 Javascript
vue中导出Excel表格的实现代码
Oct 18 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
Vue通过provide inject实现组件通信
Sep 03 Javascript
vue3.0+vue-router+element-plus初实践
Dec 02 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
Aug 09 #Javascript
javascript中对变量类型的判断方法
Aug 09 #Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 #Javascript
jquery实现页面虚拟键盘特效
Aug 08 #Javascript
Jquery实现顶部弹出框特效
Aug 08 #Javascript
Jquery数字上下滚动动态切换插件
Aug 08 #Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 #Javascript
You might like
php网页版聊天软件实现代码
2016/08/12 PHP
PHP面向对象程序设计模拟一般面向对象语言中的方法重载(overload)示例
2019/06/13 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JavaScript 创建对象
2009/07/17 Javascript
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
JavaScript的public、private和privileged模式
2009/12/28 Javascript
JS实现图片预加载无需等待
2012/12/21 Javascript
通过js为元素添加多项样式,浏览器全兼容写法
2014/08/30 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
node.js缺少mysql模块运行报错的解决方法
2016/11/13 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
Vue+SpringBoot开发V部落博客管理平台
2017/12/27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
2018/01/23 jQuery
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
JS canvas实现画板和签字板功能
2021/02/23 Javascript
跟老齐学Python之dict()的操作方法
2014/09/24 Python
Python编程中的文件读写及相关的文件对象方法讲解
2016/01/19 Python
JSON Web Tokens的实现原理
2017/04/02 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
如何搭建pytorch环境的方法步骤
2020/05/06 Python
Python中格式化字符串的四种实现
2020/05/26 Python
Python必须了解的35个关键词
2020/07/16 Python
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
2014银行授权委托书样本
2014/10/04 职场文书
单位作风建设自查报告
2014/10/23 职场文书
本科毕业论文指导教师评语
2014/12/30 职场文书
小学生思想品德评语
2014/12/31 职场文书
英语导游欢迎词
2015/09/30 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书