JS面向对象的数据属性的用法
2015-05-11 10:07
162 查看
面向对象的语言有一个标志,即拥有类的概念,抽象实例对象的公共属性与方法,基于类可以创建任意多个实例对象,一般具有封装、继承、多态的特性!但JS中对象与纯面向对象语言中的对象是不同的,ECMA标准定义JS中对象:无序属性的集合,其属性可以包含基本值、对象或者函数。可以简单理解为JS的对象是一组无序的值,其中的属性或方法都有一个名字,根据这个名字可以访问相映射的值(值可以是基本值/对象/方法)。
第一种:基于Object对象
第二种:对象字面量方式(比较清楚的查找对象包含的属性及方法)
JS的对象可以使用‘.’操作符动态的扩展其属性,可以使用’delete’操作符或将属性值设置为’undefined’来删除属性。如下:
ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接访问)。ECMAScript中有两种属性:数据属性和访问器属性
1、数据属性:
数据属性指包含一个数据值的位置,可在该位置读取或写入值,该属性有4个供述其行为的特性:
[[configurable]]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;
[[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
[[Writable]]:表示是否可修改属性的值。默认true;
[[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性,其值为’My name’,对该值的修改都反正在这个位置
要修改对象属性的默认特征(默认都为true),可调用Object.defineProperty()方法,它接收三个参数:属性所在对象,属性名和一个描述符对象(必须是:configurable、enumberable、writable和value,可设置一个或多个值)。
如下
d600
:(浏览器支持:IE9+、Firefox 4+、Chrome、Safari5+)
可以看出,delete及重置person.name的值都没有生效,这就是因为调用defineProperty函数修改了对象属性的特征;值得注意的是一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:can't redefine non-configurable property);
它主要包括一对getter和setter函数,在读取访问器属性时,会调用getter返回有效值;写入访问器属性时,调用setter,写入新值;该属性有以下4个特征:
[[Configurable]]:是否可通过delete操作符删除重新定义属性;
[[Numberable]]:是否可通过for-in循环查找该属性;
[[Get]]:读取属性时调用,默认:undefined;
[[Set]]:写入属性时调用,默认:undefined;
访问器属性不能直接定义,必须使用defineProperty()来定义,如下:
从上面可知,定义访问器属性时getter与setter函数不是必须的,并且,在定义getter与setter时不能指定属性的configurable及writable特性;
此外,ECMA-262(5)还提供了一个Object.defineProperties()方法,可以用来一次性定义多个属性的特性:
上述代码使用Object.defineProperties()方法同时定义了_age及isAudlt两个属性的特性
此外,使用Object.getOwnPropertyDescriptor()方法可以取得给定属性的特性:
对于数据属性,可以取得:configurable,enumberable,writable和value;
对于访问器属性,可以取得:configurable,enumberable,get和set
一、创建对象:
第一种:基于Object对象var person = new Object();
person.name = 'My Name';
person.age = 18;
person.getName = function(){
return this.name;
}
第二种:对象字面量方式(比较清楚的查找对象包含的属性及方法)
var person = {
name : 'My name',
age : 18,
getName : function(){
return this.name;
}
}
JS的对象可以使用‘.’操作符动态的扩展其属性,可以使用’delete’操作符或将属性值设置为’undefined’来删除属性。如下:
person.newAtt=’new Attr’;//添加属性
alert(person.newAtt);//new Attr
delete person.age;
alert(person.age);//undefined(删除属性后值为undefined);
二、数据属性
ECMA-262第5版定义了JS对象属性中特征(用于JS引擎,外部无法直接访问)。ECMAScript中有两种属性:数据属性和访问器属性1、数据属性:
数据属性指包含一个数据值的位置,可在该位置读取或写入值,该属性有4个供述其行为的特性:
[[configurable]]:表示能否使用delete操作符删除从而重新定义,或能否修改为访问器属性。默认为true;
[[Enumberable]]:表示是否可通过for-in循环返回属性。默认true;
[[Writable]]:表示是否可修改属性的值。默认true;
[[Value]]:包含该属性的数据值。读取/写入都是该值。默认为undefined;如上面实例对象person中定义了name属性,其值为’My name’,对该值的修改都反正在这个位置
要修改对象属性的默认特征(默认都为true),可调用Object.defineProperty()方法,它接收三个参数:属性所在对象,属性名和一个描述符对象(必须是:configurable、enumberable、writable和value,可设置一个或多个值)。
如下
d600
:(浏览器支持:IE9+、Firefox 4+、Chrome、Safari5+)
var person = {};
Object.defineProperty(person, 'name', {
configurable: false,
writable: false,
value: 'Jack'
});
alert(person.name);//Jack
delete person.name;
person.name = 'lily';
alert(person.name);//Jack
可以看出,delete及重置person.name的值都没有生效,这就是因为调用defineProperty函数修改了对象属性的特征;值得注意的是一旦将configurable设置为false,则无法再使用defineProperty将其修改为true(执行会报错:can't redefine non-configurable property);
2、访问器属性:
它主要包括一对getter和setter函数,在读取访问器属性时,会调用getter返回有效值;写入访问器属性时,调用setter,写入新值;该属性有以下4个特征:[[Configurable]]:是否可通过delete操作符删除重新定义属性;
[[Numberable]]:是否可通过for-in循环查找该属性;
[[Get]]:读取属性时调用,默认:undefined;
[[Set]]:写入属性时调用,默认:undefined;
访问器属性不能直接定义,必须使用defineProperty()来定义,如下:
var person = {
_age: 18
};
Object.defineProperty(person, 'isAdult', {
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
});
alert(person.isAdult?'成年':'未成年');//成年
从上面可知,定义访问器属性时getter与setter函数不是必须的,并且,在定义getter与setter时不能指定属性的configurable及writable特性;
此外,ECMA-262(5)还提供了一个Object.defineProperties()方法,可以用来一次性定义多个属性的特性:
var person = {};
Object.defineProperties(person,{
_age:{
value:19
},
isAdult:{
get: function () {
if (this._age >= 18) {
return true;
} else {
return false;
}
}
}
});
alert(person.isAdult?'成年':'未成年');//成年
上述代码使用Object.defineProperties()方法同时定义了_age及isAudlt两个属性的特性
此外,使用Object.getOwnPropertyDescriptor()方法可以取得给定属性的特性:
var descriptor = Object.getOwnPropertyDescriptor(person,'_age');
alert(descriptor.value);//19
对于数据属性,可以取得:configurable,enumberable,writable和value;
对于访问器属性,可以取得:configurable,enumberable,get和set
相关文章推荐
- vue.js计算属性用法(computed)技巧,依赖其他vue实例的数据
- js面向对象一些不为人知的属性类型
- 利用JS面向对象+模块化封装集AJAX请求、基本数据校验、URL参数截取等功能于一身的通用工具模块
- Vue.js数据绑定之data属性
- Angular.js基本概念和用法--(一双向数据绑定)
- JS对象数据属性 && Object.defineProperty函数
- Angular.js用法(三):ajax获取数据并循环显示
- js面向对象之公有、私有、静态属性和方法详解
- graphviz.js的图形及属性简单用法
- js中object对象的constructor属性用法
- javascript封装判断全数据类型方法, toString方法, 对象的枚举(in, instanceof, hasOwnProperty的用法), arguments类数组属性
- js面向对象之公有、私有、静态属性和方法详解
- js面向对象---基本的概念、属性、方法
- JS中"属性"的用法
- js导出数据,浏览器(内核必须支持<a> download 属性或Blob对象创建)兼容
- Angular.js指令学习中一些重要属性的用法教程
- JS中Array数组的三大属性用法
- JS中关于frameElement属性的用法
- 【Node.js-4】jade介绍、include、传递数据、定义变量、for等高级用法、ejs
- js中判断数据类型的属性typeof、instanceof、 constructor、 prototype