6

碉堡了!ECMAScript 5的Object.create方法

 3 years ago
source link: https://yanhaijing.com/javascript/2015/05/12/extend-of-object-create/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
碉堡了!ECMAScript 5的Object.create方法
12 May 2015
号外号外:我的新书《React状态管理与同构实战》出版啦!!!快点我查看

一直对ES5处于了解的阶段,没有深入实践过,最近研究发现Object.create方法有些缺陷,呵呵。

什么!!!你还不知道这个方法,难道你还停留在上个世纪,骚年是时候学习ES5了,因为ES6马上出来的。如果你记不清楚这个方法的语法了,那么我建议你阅读一下这篇文章

好了言归正传,先来看看Object.create的语法:

Object.create(proto [, propertiesObject ])

期第二个参数的涉及我很不满意,其必须为属性描述符,众所周知属性描述符这东西,写起来有些蹩脚,而且,咱又不写公共库,有些特性也用不到,我希望其能接受普通对象,并且接受多个对象,有点类似mixin的意思,所以我扩展了一下create,姑且就放到Object.creates上吧,如果你不赞成这种方法,可以随意放置。

Object.creates的语法如下:

Object.creates(proto, [object...])

第一个参数和Object.create的第一个参数一样,后面有一个或多个,对象,其可以将后面对象的属性extend到前面去,是不是有点jq的extend的意思,差不多就是这个意思。

借助Object.getOwnPropertyDescriptor和Object.defineProperty我们可以获取对象属性的属性描述符,然后赋给目标对象,从而实现只传入对象的目的,具体代码如下:

Object.creates = function (proto) {
    var obj = Object.create(proto);
    //如果只有一个参数
    if (arguments.length < 2) return obj;
	
    [].slice.call(arguments, 1).forEach(function (copy) {
        Object.getOwnPropertyNames(copy).forEach(function (prop) {
            Object.defineProperty(obj, prop, Object.getOwnPropertyDescriptor(copy, prop));
        });
    });
    return obj;
}

代码使用了es5中很多数组相关的方法,如果你还不了解,可以看下这篇文章

下面是一个例子,可以看出比Object.create简单多了。

Object.creates(Object.prototype, {a: 1, b: 2}, {c: 3}, {a: 4});
// > Object {a: 4, b: 2, c: 3}

从例子中可以看到,后面的对象的属性,覆盖了前面对象的属性,这符合第一直觉。

其实我开始比较抵制es5的create方法,因为我觉的它很繁琐,要定义那么多其实不那么常用的东西,所以我写了这个方法。我觉得它很好用,如果你有什么想法,那在评论里和我一起讨论吧。

原文网址:http://yanhaijing.com/javascript/2015/05/12/extend-of-object-create/

微信公众号:颜海镜关注微信公众号 颜海镜微信支付二维码赞赏支持 微信扫一扫

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK