ECMAScript5新特性之对象篇

1、Ojbect.create(O[,properties]):

var Person = {  
    name   : ‘hcc‘,  
    hungry : false,  
    play : function (){ 
              this.hungry = true; 
              return ‘I am playing!‘; 
           },  
    speak : function () { 
              return ‘I am speaking!‘; 
           }  
};  
var p = Object.create(Person);

我们发现这样创建对象的方式更加简化,以前是怎么创建呢,我们先回忆一下:

function Person(name) {  
    this.name   = name;                                               
    this.hungry = false;  
}  
Person.prototype = {  
    constructor : Person,  
    play : function () { 
             this.hungry = true; 
             return ‘I am playing!‘; 
           },  
    speak : function () { 
             return ‘I am speaking!‘; 
          }  
};

还很熟悉吧。当然,这种创建对象的方式还可以简化,形式如下:

var p = Object.create({  
    name   : ‘hcc‘,  
    hungry : false,  
    play   : function () { this.hungry = true; return ‘I am playing!‘; },  
    speak  : function () { return ‘I am speaking!‘; }  
}); 
console.info(p);

2、Object.defineProperty

当然也可以配置该对象的单个属性,并且可以配置属性的特性,比如说,writeable,enumable,configuable, get ,set

 Object.defineProperty( p, "age", {
     value: 24, // p.age = 24
     writable: false, //This perperty is not allowd to be writen.
     enumerable: true,
     configurable: true
});

访问该对象的age可以通过

console.info(p.age);

如你想象的一样,显示为24.如果我们想设置这个属性的值呢?

p.age = "33";
console.info(p.age);

结果是33吗?你可以把上面的代码拷贝到ff的控制台中运行下,结果并非你所愿,结果还是原始值24,

原因就是将该属性的writeable(Defaults to false)设置成了false,如果在设计是允许改变其值,可以改成true。我们再看下别的属性:

configurable : 如果为false,writeable,enumerable将不起作用。Defaults to false

enumerable : 如果为true,可以使用for (var prop in obj){}进行遍历。Defaults to false

再看下get,set的用法:

var Dog = {  
    name   : ‘dog‘  
};  
var dog = Object.create(Dog);  
  
Object.defineProperty(dog, ‘age‘, {  
    set : function (age) { this.humanYears = age * 7; },  
    get : function () { return this.humanYears / 7; },  
    enumerable : true  
});  
  
dog.age = 2;  
console.info(dog.humanYears);

当执行到dog.age = 2时,就调用set方法。

3、Ojbect.defineProperties

该方法可以给对象一次性定义多个属性,

var obj = {};
 
Object.defineProperties(obj, {
  "value": {
    value: true,
    writable: false
  },
  "name": {
    value: "John",
    writable: false
  }
});

4、Other Feature

(1)Object.getOwnPropertyDescriptor(): 获得对象自身的属性描述(value,configure,writeable等),不包括动态添加的:

var Dog = {  
    name   : ‘dog‘  
};  
Dog.age = "123";

Object.getOwnPropertyDescriptor(Dog, "name");  

Object.getOwnPropertyDescriptor(Dog, "123");

(2)Object.keys

获得对象的key值:

var obj = { name: "hcc", age: "http://ejohn.org/", address : "xi‘an" };
 
console.info(Object.keys(obj).join(","));

另:Object.keys基本等同于Object.getOwnPropertyNames(),后者返回的是字符串数组,前者返回的是对象的属性。

(3)Object.seal() and Object.isSealed()

seal的英文意思是“密封,封条”的意思。在这里就是阻止代码修改或删除对象的描述、增加属性、。功能基本等同Object.freeze()和Object.isFrozen(),只不过这两个方法使得属性不可编辑。

(4)检测是否是动态增加的对象

var obj = {};
obj.name = "hcc";

console.info(obj.name);
console.info(Object.isExtensible(obj));//检测是否是扩展的

Object.preventExtensions(obj);//阻止其扩展属性
console.info(Object.isExtensible(obj));//重新检测

obj.age = 23;
console.info(obj.age);

通过运行代码可以发现,当设置阻止对象扩展属性后,重新设置age属性,将不再起作用,所以obj.age的属性为undefined。

好了。ES5的基本特性就基本介绍完了,有问题请留言。

时间: 2024-10-10 20:30:11

ECMAScript5新特性之对象篇的相关文章

ECMAScript5新特性之属性描述符读写对象的属性

直接读写.使用Getter/Setter accessors 'use strict';var fruit = {}; Object.defineProperties(fruit,{ 'name' : { configurable : true, enumerable : true, get : function(){ console.log('Getter方法'); return name; }, set : function(val){ console.log('Setter方法'); na

《深入理解JavaScript》—— ECMAScript5 新特性

(1) 标准库的新功能 1. 元编程 ① 获取和设置原型 -- Object.create() -- Object.getPrototypeOf() ② 通过属性描述符管理属性特性 -- Object.defineProperty() -- Object.defineProperties() -- Object.create() -- Object.getOwnPropertyDescriptor() ③ 列出属性 -- Object.keys() -- Object.getOwnPropert

ECMASCRIPT5新特性(转载)

Function 1: Object.create 这是一个很重要的改动,现在我们终于可以得到一个原型链干净的对象了.以前要创建一个类 Js代码   function Cat(name) { this.name   = name; this.paws   = 4; this.hungry = false; this.eaten  = []; } Cat.prototype = { constructor : Cat, play        : function () { this.hungry

ECMAScript5新特性之Object.isExtensible、Object.preventExtensions

阻止对象扩展后: 1 不能添加属性.严格模式下,添加属性还会抛异常.2 可以修改属性的值.3 可以删除属性.4 可以修改属性描述符. var fruit = { name : '苹果', desc : '红富士' }; // console.log('isExtensible',Object.isExtensible(fruit)); // true Object.preventExtensions(fruit); console.log('isExtensible',Object.isExte

ECMAScript5新特性之isSealed、seal

封闭对象后: 1 不能增加.删除属性.2 可以修改属性.3 不能修改属性描述符.会抛异常. var fruit = { name : '苹果', desc : '红富士' }; // console.log('isSealed',Object.isSealed(fruit)); // false Object.seal(fruit); console.log('isSealed',Object.isSealed(fruit)); // true // fruit.address = '烟台';

ECMAScript5新特性之isFrozen、freeze

对象被冻结后: 1 不能添加属性. 2 不能删除属性. 3 不能修改属性.(赋值) 4 不能修改属性描述符.(会抛异常) var fruit = { name : '苹果', desc : '红富士' }; // console.log('isFrozen',Object.isFrozen(fruit)); // false Object.freeze(fruit); console.log('isFrozen',Object.isFrozen(fruit)); // true // fruit

总结CSS3新特性(媒体查询篇)

CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围的值,而media type仅仅是设备的匹配(所以media type 是一个单词,而media query 后边需要跟着一个数值,两者可以混合使用); media可用于link标签属性 [media]

ES6一些新特性记录

ES6一些新特性记录 1.箭头操作符 箭头操作符左边是需要输入的参数,右边是返回值 比如运用到js回调函数中可以使书写更加方便 var array=[1,3,5]; //标准写法 array.foreach(function(v,i,a){ console.log(v); }); //es6写法 array.foreach(v => console.log(v)); 又比如一块简单的代码: function (i){ return i + 1}     //es5写法 (i) => i + 1

使用 HTML5 History 新特性增强 Ajax 的体验(转)

一. 场景再现 如大家熟知,Ajax 可以实现页面的无刷新操作,但会造成两个与普通页面操作(有刷新地改变页面)有着明显差别的问题—— URL 没有修改以及无法使用前进.后退按钮.例如常见的 Ajax 分页,在第一页点击第二页的链接,Ajax 分页完成后浏览器地址栏上显示的 URL 依然是第一页的 URL,使用后退按钮也无法回到第一页.url 的改变代表一个标识,在传统的网页体验中,内容的变更伴随 url 的改变,url 的改变.前进和后退按钮三者之间更加形成一种独特的导航体验,而 Ajax 破坏