ECMAScript5之Object学习笔记(一)

2023-04-24,,

随着IE的逐步追赶,目前到IE11已经能够很好的支持ECMAScript5标准了,其他的现代浏览器像firefox,chrome,opera就更不用说了。

再加上nodejs使得javascript在后台开发中得到施展的舞台,这很自然的激发了我对ECMAScript5相关的特性的求知欲望。

以此展开,写一个ECMAScript5新特性的学习笔记

先来看看Object

Object.create(proto[, propertiesObject])

create方法通过指定的原型对象(prototype object)和属性(properties)来创建一个新的对象。

proto:即为新创建对象的prototype

propertiesObject:带属性描述的属性对象(姑且这么翻译)

create方法能够让我们方便的通过prototype原型链来实现“继承”:

     // super class
var Human = function(cfg) {
this.gender = cfg.gender;
this.name = cfg.name;
}; Human.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
}; // sub class
var Citizen = function(cfg) {
this.country = cfg.country;
// call super constructor
Human.call(this, cfg);
}; // prototype chain inherit
Citizen.prototype = Object.create(Human.prototype);
// override constructor
Citizen.prototype.constructor = Citizen; // overwrite super class method
Citizen.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name + ' from ' + this.country);
}; var h = new Human({
gender: 'female',
name: 'lucy'
});
h.sayHello();
console.log( h instanceof Human ); var c = new Citizen({
gender: 'male',
name: 'Andrew',
country: 'USA'
});
c.sayHello();
console.log( c instanceof Citizen);

Object.defineProperty(obj, prop, descriptor)

defineProperty方法直接在一个对象上定义一个新属性,或者更改一个已存在的属性,返回对象本身。

obj:对象

prop: 属性名

descriptor: 属性描述对象

用code来做直观说明:

 /*
enumerable 是否可列举 默认:false
writable 是否可写 默认:false
configurable是否可配置 默认:false
value 默认:undefined 访问器
get 默认:undefined
set 默认:undefined
*/
var o = {}; // enumerable 是否可列举
Object.defineProperty(o, 'a', {
value: 1,
enumerable: false
}); Object.defineProperty(o, 'b', {
value: 2,
enumerable: true
}); Object.defineProperty(o, 'c', {
value: 3
// enumerable默认false
}); o.d = 4; for(var prop in o) {
// 输出b、d
console.log(prop);
} // writable 是否可写(更改值)
// 这个特性在定义常量时比较有用
Object.defineProperty(o, 'e', {
value: 10,
writable: false
}); console.log(o.e); //
o.e = 15; // 一般没错误抛出,若是在strict mode(严格模式下)会抛出错误
console.log(o.e); // // configurable 是否可配置
Object.defineProperty(o, 'f', {
configurable: true,
get: function() { return 10; }
}); // 如果configurable为false,那么下面这些redefine(重定义)操作都会报TypeError
// 如果configurable为true,那么下面这些操作均能成功,delete操作也能删除e属性
Object.defineProperty(o, 'f', { configurable: true }); // TypeError
Object.defineProperty(o, 'f', { enumerable: true }); // TypeError
Object.defineProperty(o, 'f', { set: function() {} }); // TypeError
Object.defineProperty(o, 'f', { get: function() {return 10;}}); //TypeError
Object.defineProperty(o, 'f', { value: 12}); // TypeError console.log(o.f); //
delete o.f; // nothing happens
console.log(o.f); // // get, set访问器
// 注意:有get、set的情况下,不能同存在value,writable属性,否则会报错
var variable = 10;
Object.defineProperty(o, 'g', {
get: function() {
return variable;
},
set: function(val) {
variable = val;
}
}); console.log(o.g); //
o.g = 14; // set(14)
console.log(o.g); // // 补充:
o.h = 1;
// 相当于:
Object.defineProperty(o, 'h', {
value: 1,
writable: true,
configurable: true,
enumerable: true
}) ; Object.defineProperty(o, 'h', { value: 1 });
// 相当于:
Object.defineProperty(o, 'h', {
value: 1,
writable: false,
configurable: false,
enumerable: false
});

object.defineProperties(obj, props)

这个与defineProperty的区别在于一下子可以定义多个属性,就再不展开了。

第一部分暂时到这里结束 : ),感兴趣的同学可以直接去MDN进行了解,请点击这里。

ECMAScript5之Object学习笔记(一)的相关教程结束。

《ECMAScript5之Object学习笔记(一).doc》

下载本文的Word格式文档,以方便收藏与打印。