(转)es6中object.create()和object.assign()

今天学习javascript面向对象,在学习Obejct方法时了解到create方法,偶像想起之前使用的assign方法,顺带查找一番,感觉这篇博客讲解详细,遂转载。

先简单提一下装饰器函数,许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为。目前,es6中有个提案将这项功能,引入了 ECMAScript。而在ts中则完全支持装饰器。这段时间看ng2看得到我头大。

Object.assing(target,…sources)

参考自微软的开发者社区。

用途:将来自一个或多个源对象中的值复制到一个目标对象。

语法:Object.assign(target, …sources );

参数:  target, 必需。可枚举属性复制到的对象。
            …sources,必需。从其中复制可枚举属性的对象。
异常: 如果存在分配错误,此函数将引发 TypeError,这将终止复制操作。如果目标属性不可写,则将引发 TypeError
备注:null 或 undefined 源被视为空对象一样对待,不会对目标对象产生任何影响。

/*合并对象*/

例1,
var first = { name: "Bob" };
var last = { lastName: "Smith" };

var person = Object.assign(first, last);
console.log(person);/*{ name: 'Bob', lastName: 'Smith' }*/

/*克隆对象*/
例2,
var obj = { person: "Bob Smith"};
var clone = Object.assign({}, obj);
console.log(obj);/*{ person: 'Bob Smith' }*/

这里探究备注内容,"nullundefined 源被视为空对象一样对待,不会对目标对象产生任何影响。"
var test=null;
var test1=Object.assign({},test);
console.log(test1);/*{}*/

var test2=undefined;
var test4=Object.assign({},test2);
console.log(test4);/*{}*/

通过以上可以看出,test1和test4依然空对象,印证了备注里面的内容。

 

Object.create(prototype,descriptors)

用途:创建一个具有指定原型且可选择性地包含指定属性的对象。

参数:prototype       必需。  要用作原型的对象。  可以为 null

          descriptors     可选。  包含一个或多个属性描述符的 JavaScript 对象。

“数据属性”是可获取且可设置值的属性。  数据属性描述符包含 value 特性,以及 writableenumerable 和 configurable 特性。  如果未指定最后三个特性,则它们默认为 false。  只要检索或设置该值,“访问器属性”就会调用用户提供的函数。  访问器属性描述符包含 set 特性和/或 get 特性。

返回值:一个具有指定的内部原型且包含指定的属性(如果有)的新对象。
 
异常:  如果满足下列任一条件,则将引发 TypeError 异常:
  • prototype 参数不是对象且不为 null
  • descriptors 参数中的描述符具有 value 或 writable 特性,并具有 get 或 set 特性。
  • descriptors 参数中的描述符具有不为函数的 get 或 set 特性。

备注:若要停止原型链,可以使用采用了 null prototype 参数的函数。  所创建的对象将没有原型。

创建使用null原型的对象并添加两个可枚举的属性。

例1,

var newObj = Object.create(null, {
            size: {
                value: "large",
                enumerable: true
            },
            shape: {
                value: "round",
                enumerable: true
            }
        });

document.write(newObj.size + "<br/>");/*large*/
document.write(newObj.shape + "<br/>");/*round*/
document.write(Object.getPrototypeOf(newObj));/*null*/



创建一个具有与 Object 对象相同的内部原型的对象。 该对象具有与使用对象文本创建的对象相同的原型。
Object.getPrototypeOf 函数可获取原始对象的原型。 若要获取对象的属性描述符,可以使用Object.getOwnPropertyDescriptor 函数 

例2,
var firstLine = { x: undefined, y: undefined };

var secondLine = Object.create(Object.prototype, {
        x: {
                value: undefined, 
                writable: true, 
                configurable: true, 
                enumerable: true
            },
            y: {
                value: undefined, 
                writable: true, 
                configurable: true, 
                enumerable: true
            }
});

document.write("first line prototype = " + Object.getPrototypeOf(firstLine));/*first line prototype = [object Object])*/
document.write("<br/>");
document.write("second line prototype = " + Object.getPrototypeOf(secondLine));/*first line prototype = [object Object]*/


创建一个具有与 Shape 对象相同的内部原型的对象。
例3,
// Create the shape object.
var Shape = { twoDimensional: true, color: undefined, hasLineSegments: undefined };

var Square = Object.create(Object.getPrototypeOf(Shape)); 

要区分数据属性还是访问器属性。
以下是那数据属性作为例子说明,配合访问器属性的Object.create()用法暂时还木有搞定。
例4,
var Shape = { twoDimensional: true, color: undefined, hasLineSegments: undefined };

var Square = Object.create(Object.getPrototypeOf(Shape),{xiaoming:{
   value:"hello,world",
   writable:true,

}});
Square.xiaoming="xiaohua";
console.log(Square.xiaoming);/*xiaohua8*/
如果默认writable、enumerable、configurable都是false。

原文出处: http://www.onlyfordream.cn/2018/03/19/es6%E4%B8%ADobject-create%E5%92%8Cobject-assign/

posted on 2019-02-16 14:35  m合肥  阅读(5122)  评论(0编辑  收藏  举报

导航