码迷,mamicode.com
首页 > 其他好文 > 详细

ECMAScript5 ES5

时间:2014-08-24 22:17:13      阅读:351      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   java   os   使用   io   for   

ECMAScript5新增一系列新的方法(API接口),新的浏览器中大部分是被支持的(IE9,Chrome,FirFor),有少量API不是所有浏览器都支 持

ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化,IE9不支持严谨模式,但IE10是支持的。

 

Object.create(prototype, descriptors)

以指定的原型创建对象,并且可以(可选)的设置对象的属性

    function Poker(style, title, value) {  
        this.Style = style;  
        this.Title = title;  
        this.Value = value;  
    }  
      
    var pokerA = Object.create(new Poker("club", "A", 14));  
      
    alert(Poker.constructor); //function Function() { [native code] }  
    alert(new Poker().constructor); //function Poker(style, title, value) {  
                                    //            this.Style = style;  
                                    //            this.Title = title;  
                                    //            this.Value = value;  
                                    //        }  
    alert(Poker.constructor.prototype); //function Empty() {}  
    alert(Poker.prototype == new Poker().constructor.prototype); // true  
    alert(Poker.constructor.prototype == new Poker().constructor.prototype); // false  
    alert(new Poker().propertye); //undefined  
      
    alert(Poker.prototype == pokerA.constructor.prototype); //true  
    alert(Poker.constructor.prototype == pokerA.constructor.prototype); // false  
    alert(new Poker("club", "A", 14).Value); //14  
    alert(pokerA.Value); //14  

用Object.create构造的对象和用构造函数构造的对象在结果上没有什么差异。用 Object.create的好处是原型链干净,网上有有给出了以下没有Object.create的浏览器的解决同样解决方案。以下代码不但说明了 Object.create的技术内幕,同时可以支持低版本的IE同样可以实现干净的原型。

    if (typeof Object.create !== ‘function‘) {  
        Object.create = function(o) {  
            function F() { }  
            F.prototype = o;  
            return new F();  
        };  
    }  
      
    function Poker(style, title, value) {  
        this.Style = style;  
        this.Title = title;  
        this.Value = value;  
    }  
      
    var pokerA = Object.create(new Poker("club", "A", 14));  
      
    alert(Poker.constructor); //function Function() { [native code] }  
    alert(new Poker().constructor); //function Poker(style, title, value) {  
                                    //            this.Style = style;  
                                    //            this.Title = title;  
                                    //            this.Value = value;  
                                    //        }  
    alert(Poker.constructor.prototype); //function Empty() {}  
    alert(Poker.prototype == new Poker().constructor.prototype); // true  
    alert(Poker.constructor.prototype == new Poker().constructor.prototype); // false  
    alert(new Poker().propertye); //undefined  
      
    alert(Poker.prototype == pokerA.constructor.prototype); //true  
    alert(Poker.constructor.prototype == pokerA.constructor.prototype); // false  
    alert(new Poker("club", "A", 14).Value); //14  
    alert(pokerA.Value); //14  

 

Object.defineProperty(object, propertyname, descriptor)

对指定的对象的一个属性设置丰富的值控制


Object.defineProperties(object, descriptors)

对指定的对象的一组属性提供丰富的值控制

 function setPokerState(poker, proValue) {  
        if (arguments[0] instanceof Poker) {  
            Object.defineProperty(arguments[0], //为一个对象设置一个属性  
            "State", //属性名称是字符串  
            {//一组修饰对象  
            value: proValue, //值 默认是undefined  
            writable: true, //值是否只读 默认是false  
            enumerable: false, //值是否可以被枚举 默认false  
            configurable: true//属性是否可以被改说删除 默认false  
        }  
        )  
    }  
}  
  
var PokerA = Object.create(new Poker("club", "A", 14));  
setPokerState(PokerA, 5);  
alert(PokerA.State);  

如果我们需要对赋值或取值有更多出来,可以给定set和get函数,不过set/get不能和value、writable同时使用。

    function setPokerState(poker, proValue) {  
        if (arguments[0] instanceof Poker) {  
            Object.defineProperty(arguments[0], //为一个对象设置一个属性  
        "State", //属性名称是字符串  
        {//一组修饰对象  
        enumerable: false, //值是否可以被枚举 默认false  
        configurable: true, //属性是否可以被改说删除 默认false  
        set: function(x) {  
            this.state = x <= 5 ? x : 5;  
        },  
        get: function() {  
            return this.state;  
        }  
    }  
    )  
        }  
    }  
      
    var PokerA = Object.create(new Poker("club", "A", 14));  
    PokerA.State=10;  

如果我需要设置多个属性的话,请看下面代码演示

    Object.defineProperties(  
                        PokerA,  
                        {  
                            "backgroundImg": {  
                                value: "images\\common\\hide.png",  
                                enumerable: false, //不可以for 遍历    
                                writable: false//只读    
                            },  
                            "forgroundImg": {  
                                value: "images\\spade\\K.png",  
                                enumerable: false, //不可以for 遍历    
                                writable: false//只读    
                            },  
                            Image: {  
                                get: function() {  
                                    return this.State == 0 ? this.backgroundImg : this.forgroundImg;  
                                },  
                                enumerable: true  
      
                            }  
                        }  
                        );  

 

如果要了解对象有哪些属性被定义了,可以使用以下API

Object.getOwnPropertyDescriptor(object, propertyname)
返回属性的定义
Object.getOwnPropertyNames(object)
返回所有属性的名称,哪怕说是不能枚举的属性

    alert(Object.getOwnPropertyNames(PokerA).length); //4  
      
    var names = Object.getOwnPropertyNames(PokerA);  
    for (var i = 0; i < names.length; i++) {  
        alert(names[i] + "\n" +  
        Object.getOwnPropertyDescriptor(PokerA, names[i])  
        );  
    }  

 

可以约定对象不能再扩展,但属性的值可以改,也可以删除

Object.preventExtensions(object)
防止新的属性添加到对象
Object.isExtensible(object)
是否可添加属性到对象

    alert(Object.isExtensible(PokerA)); //true  
    Object.preventExtensions(PokerA);  
    alert(Object.isExtensible(PokerA)); //false  

Object.seal(object)
不能添加和删除属性
Object.isSealed(object)

    alert(Object.isSealed(PokerA)); //true  
    Object.seal(PokerA);  
    alert(Object.isSealed(PokerA)); //false  

Object.freeze(object)
防止现有属性和属性值的修改,并防止新特性的添加。
Object.isFrozen(object)

 

最后如果想要得到对象原型,可以用

Object.getPrototypeOf(object)

 

关于object的就差不多上面这些了。然后看下ECMAScript5再其他对象上的扩展的一些静态成员

Array.isArray

    alert(Array.isArray([])); //true  
    alert(Array.isArray({})); //false  

Array.IndexOf

Array.lastIndexOf

 

    alert(["Hello", "javaScript", "ECMAScript", "HTML5"].indexOf("javaScript"));//1  
    alert(["Hello", "javaScript", "ECMAScript", "HTML5"].lastIndexOf("javaScript"));//1  

Array.every

对数组的每个元素进行一个callback的条件检查,查看是否存在有不符合条件的元素。类似linq的all

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    alert(arr1.every(  
                    function(item, index) {  
                        return item.length < 5;  
                    }  
                    )  
                    ); //false  
    alert(arr1.every(  
                    function(item, index) {  
                        return item.length < 10;  
                    }  
                    )  
                    )//true  

Array.some

是判断数组有没有符合条件的元素,类似linq的any

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    alert(arr1.some(  
                    function(item, index) {  
                        return item.length < 5;  
                    }  
                    )  
                    ); //true  
    alert(arr1.some(  
                    function(item, index) {  
                        return item.length < 10;  
                    }  
                    )  
                    )//true  

如果需要对每一个元素执行一段处理性的代码可以用

Array.forEach

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    arr1.forEach(  
    function(item, index) {  
        if (index % 2 == 0) {  
            arr1[index] = "name:" + item;  
        }  
    }  
    );  
      
    arr1.forEach(  
    function(item, index) {  
        alert(item);  
    }  
    );  

其实forEach最好是直接处理值,如果要改变数组最好用

Array.map

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    var arr2 = arr1.map(  
    function(item, index) {  
        if (item.indexOf("ll") > -1) {  
            return item;  
        }  
    }  
    );  
      
    arr2.forEach(  
    function(item, index) {  
        alert(item);  
    }  
    );  

如果是要过滤数组的话,可以用

Array.filter

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    var arr2 = arr1.filter(  
    function(item, index) {  
        if (item.indexOf("ll") > -1) {  
            return true;  
        }  
    }  
    );  
      
    arr2.forEach(  
    function(item, index) {  
        alert(item);  
    }  
    );  

如果要做叠加器处理可以用

Array.reduce

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    var arr2 = arr1.reduce(  
    function(item, next) {  
        return item + "][" + next;  
    }  
    );  
      
    alert("[" + arr2 + "]");//[Charles][Mark][Bill][Vincent][William][Joseph]  

还有一个反向处理

Array.reduceRight

    var arr1 = "Charles,Mark,Bill,Vincent,William,Joseph".split(",");  
    var arr2 = arr1.reduceRight(  
    function(item, next) {  
        return item + "][" + next;  
    }  
    );  
      
    alert("[" + arr2 + "]"); //[Joseph][William][Vincent][Bill][Mark][Charles]  

现在Array的处理都接近linq了!!!

 

Date().toJSON()

    alert(new Date().toJSON());  
    alert(new Date(2012, 11, 12).toJSON()); //2012-12-11T16:00:00.000Z  
alert("[" + "   Hello ".trim() + "]"); //[Hello]  

 

ECMAScript5 ES5

标签:des   style   blog   color   java   os   使用   io   for   

原文地址:http://www.cnblogs.com/Watcher/p/3933545.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!