ECMAScript5 新特性(一)

rainsilence

浏览: 160579 次
性别:
来自: 上海

最近访客更多访客>>

zhang55090

iop118

cjh326419411

finit

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

prototype Chrome C#C++C

Function 1: Object.create

这是一个很重要的改动，现在我们终于可以得到一个原型链干净的对象了。以前要创建一个类

function Cat(name) {
	this.name   = name;                                                                                 
	this.paws   = 4;
	this.hungry = false;
	this.eaten  = [];
}
Cat.prototype = {
	constructor : Cat,
	play        : function () { this.hungry = true; return 'playing!'; },
      feed        : function (food) { this.eaten.push(food); this.hungry = false; },
	speak       : function () { return 'Meow'; }
};

必须要分两步走，但是现在可以不必了

var Dog = {
    name   : 'dog',
    paws   : 4,
    hungry : false,
    eaten  : null,
    play   : function () { this.hungry = true; return 'playing!'; },
    speak  : function () { return 'Woof!'; }
};
var dog = Object.create(Dog);

Object.create他还有第2个参数，是一个properties descriptor object ，关于这方面的详细解释，请看第2点。

另外：如果浏览器不支持Object.create，可以用这种方法代替

if (typeof Object.create !== 'function') {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 2: Object.defineProperty

如果你想为一个对象定义属性，那么就必须my_dog.age = 2; 用这种方法。但是在ECMAScript5中，提供了更好的包装方法Object.defineProperty

Parameters:

1.对象引用

2.属性名

3.修饰对象

修饰对象中的定义如下：

●　value: use this to set the value of a property. Defaults to undefined.

●　writable: use this boolean to define whether this is a read-only variable. If it’s writable, it’s true. Defaults to false.

●　configurable: use this boolean to define whether the type (value vs. method) of this property can be changed, or whether the property can be deleted. If it’s configurable, it’s true. Defaults to false.

●　enumerable: use this boolean to define whether this property is included when the properties of the object are enumerated (a for-in loop or the keys method). Defaults to false.

●　get: use this to define a custom getter method. Defaults to undefined.

●　set: use this to define a custom setter method. Defaults to undefined.

Sample:

var Dog = {
    name   : 'dog',
    paws   : 4
};
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;
dog.humanYears; // 14

以上代码让age和humanYears保存了同步，如果你不想对外界暴露humanYears，可以这样使用闭包:

Object.defineProperty(dog, 'age', (function () {
    var humanYears;

    return {
        set : function (age) { humanYears = age * 7; },
        get : function () { return humanYears / 7; },
        enumerable : true
    };

}()));

当然，也可以用在Object.create方法上面

var yourDog = Object.create(Dog, {
    age : {
        get : function () { /* . . . */ },
        set : function () { /* . . . */ },
        enumerable: true
    },
    gender : {
        value : 'female'
    }
});

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

Function 3: Object.defineProperties

当然，如果你想像Object.create方法那样一口气给对象加入很多属性的话，你可以用Object.defineProperties方法

Object.defineProperties(dog, {
    age : {
        get : function () { /* . . . */ },
        set : function () { /* . . . */ },
        enumerable: true
    },
    gender : {
        value : 'female'
    }
});

注意区别 Object.create和Object.defineProperties第一个参数的不同，Object.create是prototype，而Object.defineProperties是对象

Browser Support

○　Firefox 4

○　Internet Explorer 9

○　Safari 5

○　Chrome 5+

分享到：

ECMAScript5 新特性(二) | 模拟新浪围脖的间歇性向下滚动显示信息窗口

2011-01-23 21:22
浏览 4149
评论(21)
论坛回复 / 浏览 (19 / 8588)
分类:Web前端
查看更多

21 楼 jkxydp 2012-08-22

guyue 写道

经验证，各浏览器（IE10，Firefox12，opera11.60，chrome19，safari5）中configurable均未实现“
use this boolean to define whether the type (value vs. method) of this property can be changed”

据我验证，你的验证是错误的，最少chrome14就已经实现了。

20 楼 guyue 2012-03-18

19 楼 rainsilence 2011-01-28

<div class="quote_title">adaikiss 写道</div>
<div class="quote_div">
 
<pre name="code" class="js">改自OpenLayers框架...</pre>
<pre name="code" class="js">Class = function() {
var len = arguments.length;
var P = arguments[0];
var F = arguments[len - 1];

var C = typeof F.initialize == "function" ? F.initialize : function() {
P.apply(this, arguments);
};
if (len > 1) {
var newArgs = [ C, P ].concat(Array.prototype.slice.call(arguments)
.slice(1, len - 1), F);
inherit.apply(null, newArgs);
} else {
C.prototype = F;
C.prototype.superclass = [];
}
if(C.prototype.tsuperclass){
C.prototype.superclass = C.prototype.tsuperclass;
delete C.prototype.tsuperclass;
}
return C;
}</pre>
 
 
 
<pre name="code" class="js">inherit = function(C, P) {
var F = function() {
};
F.prototype = P.prototype;
C.prototype = new F;
C.prototype.tsuperclass = [];
addUnique(C.prototype.tsuperclass, P);
var i, l, o;
for (i = 2, l = arguments.length; i < l; i++) {
o = arguments[i];
//strict equal
if (typeof o === "function") {
addUnique(C.prototype.tsuperclass, o);
o = o.prototype;
}
extend(C.prototype, o);
}
};</pre>
 
 
 
<pre name="code" class="js">extend = function(destination, source) {
 destination = destination || {};
 if(source) {
 for(var property in source) {
 var value = source[property];
 if(value !== undefined) {
 destination[property] = value;
 }
 }

 /**
 * IE doesn't include the toString property when iterating over an object's
 * properties with the for(property in object) syntax. Explicitly check if
 * the source has its own toString property.
 */

 /*
 * FF/Windows < 2.0.0.13 reports "Illegal operation on WrappedNative
 * prototype object" when calling hawOwnProperty if the source object
 * is an instance of window.Event.
 */

 var sourceIsEvt = typeof window.Event == "function"
 && source instanceof window.Event;

 if(!sourceIsEvt
 && source.hasOwnProperty && source.hasOwnProperty('toString')) {
 destination.toString = source.toString;
 }
 }
 return destination;
};</pre>
 
 
 
<pre name="code" class="js">addUnique = function(current, obj){
if(!current||!obj){
return;
}
if(Kay.Util.indexOf(current, obj) != -1){
return;
}
current.push(obj);
};</pre>
 
有了以上四个方法, 就可以这样定义类了
 
 
<pre name="code" class="js"> var Dog = Class({</pre>
<pre name="code" class="js"> name:null,</pre>
<pre name="code" class="js"> bite:function(another){
 console.debug(this.name + ' bite ' + another.name + ' !');
 },
 getFeatures:function(){
 return '两只眼睛, 四只脚, 一条尾巴, 一张嘴';
 },
 initialize:function(options){
 extendz(options, this);
 //init
 }
});

var JAPADog = Class(Dog, {
 from:'鸡国',
 getFeatures:function(){
 return Dog.prototype.apply(this, arguments) + (this.from + '的');
 }
});

var doga = new Dog({name:'小犬惷一郞'});
var dogb = new JAPADog({name:'小犬笨二郞'});</pre>
doga.bite(dogb);</div>
 
A！B！C！openlayer会把代码改的这么恶心？？
 
另外，如果要实现继承，向上转型判断，以及自动调用父类函数请参照我的其他博客，比如：


<div style="color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; background-color: #ffffff; margin: 8px;">
<div class="quote_title" style="font-weight: bold; margin-top: 5px; margin-right: 0px; margin-bottom: 0px; margin-left: 15px; padding: 5px;"><a href="http://rainsilence.iteye.com/admin/blogs/604418">http://rainsilence.iteye.com/admin/blogs/604418</a></div>
</div>

18 楼 adaikiss 2011-01-28

<pre name="code" class="js">改自OpenLayers框架...</pre>
<pre name="code" class="js">Class = function() {
var len = arguments.length;
var P = arguments[0];
var F = arguments[len - 1];

var C = typeof F.initialize == "function" ? F.initialize : function() {
P.apply(this, arguments);
};
if (len > 1) {
var newArgs = [ C, P ].concat(Array.prototype.slice.call(arguments)
.slice(1, len - 1), F);
inherit.apply(null, newArgs);
} else {
C.prototype = F;
C.prototype.superclass = [];
}
if(C.prototype.tsuperclass){
C.prototype.superclass = C.prototype.tsuperclass;
delete C.prototype.tsuperclass;
}
return C;
}</pre>

 
 


<pre name="code" class="js">inherit = function(C, P) {
var F = function() {
};
F.prototype = P.prototype;
C.prototype = new F;
C.prototype.tsuperclass = [];
addUnique(C.prototype.tsuperclass, P);
var i, l, o;
for (i = 2, l = arguments.length; i < l; i++) {
o = arguments[i];
//strict equal
if (typeof o === "function") {
addUnique(C.prototype.tsuperclass, o);
o = o.prototype;
}
extend(C.prototype, o);
}
};</pre>

 
 


<pre name="code" class="js">extend = function(destination, source) {
 destination = destination || {};
 if(source) {
 for(var property in source) {
 var value = source[property];
 if(value !== undefined) {
 destination[property] = value;
 }
 }

 /**
 * IE doesn't include the toString property when iterating over an object's
 * properties with the for(property in object) syntax. Explicitly check if
 * the source has its own toString property.
 */

 /*
 * FF/Windows < 2.0.0.13 reports "Illegal operation on WrappedNative
 * prototype object" when calling hawOwnProperty if the source object
 * is an instance of window.Event.
 */

 var sourceIsEvt = typeof window.Event == "function"
 && source instanceof window.Event;

 if(!sourceIsEvt
 && source.hasOwnProperty && source.hasOwnProperty('toString')) {
 destination.toString = source.toString;
 }
 }
 return destination;
};</pre>

 
 


<pre name="code" class="js">addUnique = function(current, obj){
if(!current||!obj){
return;
}
if(Kay.Util.indexOf(current, obj) != -1){
return;
}
current.push(obj);
};</pre>

 
有了以上四个方法, 就可以这样定义类了


 
<pre name="code" class="js"> var Dog = Class({</pre>
<pre name="code" class="js"> name:null,</pre>
<pre name="code" class="js"> bite:function(another){
 console.debug(this.name + ' bite ' + another.name + ' !');
 },
 getFeatures:function(){
 return '两只眼睛, 四只脚, 一条尾巴, 一张嘴';
 },
 initialize:function(options){
 extendz(options, this);
 //init
 }
});

var JAPADog = Class(Dog, {
 from:'鸡国',
 getFeatures:function(){
 return Dog.prototype.apply(this, arguments) + (this.from + '的');
 }
});

var doga = new Dog({name:'小犬惷一郞'});
var dogb = new JAPADog({name:'小犬笨二郞'});</pre>
doga.bite(dogb);

17 楼 rainsilence 2011-01-25

能实现功能就行

16 楼 LeoChowComtop 2011-01-25

rainsilence 写道

即使是ie6，很多html5的功能还是可以用的

VML 而已

15 楼 Durian 2011-01-25

rainsilence 写道

即使是ie6，很多html5的功能还是可以用的

----------
我倒觉得完全不可用，倒是好事。早点淘汰。

14 楼 rainsilence 2011-01-25

我靠知音啊

13 楼 sangeshitou 2011-01-25

还是不爽，如果能这么些写就好了

var objDefinition = { "test" :  function(){} };var instance = new objDefinition();

12 楼 telyy123 2011-01-25

现在项目在需求阶段就应该向客户指明：IE7以上版本。。。。我们就是这么搞的

11 楼 xifo 2011-01-25

这个 ECMAScript5 在09年12月份就发布，怎么给弄成10年12月了？

10 楼 rainsilence 2011-01-24

即使是ie6，很多html5的功能还是可以用的

9 楼幻无极 2011-01-24

IE6应该让广大的程序员，全都抵制，从此开发不支持IE6的程序

8 楼 pfans 2011-01-24

学习新知识！希望IE6早点消失。

7 楼 rainsilence 2011-01-24

至少不会走4的旧路了。

6 楼 kyfxbl 2011-01-24

Browser Support
   ○　Firefox 4
   ○　Internet Explorer 9
   ○　Safari 5
   ○　Chrome 5+

哥哥，您的文章我仔细看了才回帖的。这些浏览器真的普及了吗。程序员用的多，不代表用户普及了。何况这些浏览器，就是在程序员群体中恐怕也不能说普及了。

5 楼 rainsilence 2011-01-24

我在每个特性的下面都给出了浏览器支持的情况。其实现在已经普及了

4 楼 kyfxbl 2011-01-24

新的类定义语法好像确实亲和了一点

以前用构造函数+原型链的方法要分2步走。用动态原型又不支持继承。相当麻烦，一般只好引入第三方框架。现在可以一步到位了还是不错的。

但是要等到浏览器支持估计还是要比较久的。

3 楼 kyfxbl 2011-01-24

rainsilence 写道

2010年12月开始，标准由3升级到5。4由于某些原因胎死腹中

悲剧，可怜的4，穿越了。

标准上个月才升级，那到浏览器支持还有的等呢，说不定5也会胎死腹中

2 楼 rainsilence 2011-01-24

2010年12月开始，标准由3升级到5。4由于某些原因胎死腹中

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论