首页 > 代码库 > ECMAScript5 ES5
ECMAScript5 ES5
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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/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 =http://www.mamicode.com/ 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 = http://www.mamicode.com/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