ES6创建对象的几种方式

1）创建对象的方式不同

new Object() 通过构造函数来创建对象, 添加的属性是在自身实例下。

Object.create() es6创建对象的另一种方式，可以理解为继承一个对象, 添加的属性是在原型下。

Object.create()方法创建的对象时，属性是在原型下面的，也可以直接访问 b.rep // {rep: "apple"} ,

此时这个值不是吧b自身的，是它通过原型链 proto 来访问到b的值。

2）创建对象属性的性质不同

Object.create() 用第二个参数来创建非空对象的属性描述符默认是为false的，而构造函数或字面量方法创建的对象属性的描述符默认为true。看下图解析：

[图片上传失败...(image-ee8b47-1638233974390)]

3）创建空对象时不同

[图片上传失败...(image-45d6a0-1638233974390)]

当用构造函数或对象字面量方法创建空对象时，对象时有原型属性的，即有 _proto_

当用Object.create()方法创建空对象时，对象是没有原型属性的。

4） __proto__ 属性

JavaScript 的对象继承是通过原型链实现的。ES6 提供了更多原型对象的 *** 作方法。

__proto__ 属性（前后各两个下划线），用来读取或设置当前对象的prototype对象。目前只有浏览器环境必须部署有这个属手枯性，其他运行环境不一定要部署，因此不建议使用这个属性，而是使用下面这些来 Object.setPrototypeOf() （写 *** 作）、 Object.getPrototypeOf() （读 *** 作）、 Object.create() （生成 *** 作）代替。

[图片上传失败...(image-6a4995-1638233974390)]

如果是不用Object,create()方法御埋，我们是如何给对象原型添加属性和方法的？

------ 通过构造函数或者类，例如：

[图片上传失败...(image-6fb928-1638233974390)]

[图片上传失败...(image-deee8f-1638233974390)]

现在有 Object.create() 就简单的多了

[图片上传失败...(image-fbb13e-1638233974390)]

输出结果中看出，添加的方法是在原型上的。就类似于

4.1）原型属性的继承

这里结合一个例子来说说这几个方法的使用：

场景：拷贝一个构造函数的实例。

打印出 实例c 看看结构是怎样的

[图片上传失败...(image-f8e3d9-1638233974390)]

其中 color 属性在实例上，而其他的原型上。

现在来拷贝一个 实例 c2

因为 Object.assing 是不能拷贝到继毕拆洞承或原型上的方法的。所以 实例c2 没有 a 这个属性。那要怎么要才能拷贝到原型上的方法呢？

4.1.1）第一种方法

这样就实现了原型属性的拷贝。

Object.getPrototypeOf(c) 既 originProto 得到的是原型上的 //{a: 1, b: 2, c: 3}；

Object.create(originProto) 既 originProto2 既是创建了一个 {a: 1, b: 2, c: 3} 在原型上的新对象；

Object.assign(originProto2, c) 在源对象originProto2 上合并对象 c；

4.1.2）第二种方法 （推荐）

可以把Object.create()的参数理解为：第一个参数是放在新对象的原型上的，第二个参数是放在新对象的实例上的。

所以上面例子

Object.getPrototypeOf() 得到的是 c 对象的原型，然后作为第一个参数，所以会在新对象c2 的原型上。

Object.getOwnPropertyDescriptors() 得到是 c 对象自身属性(包括可枚举和不可枚举的)，作为第二个参数，放在 c2 的实例上。

为什么说推荐这个方法呢？ 因为Object.assign() 方法不能正确拷贝 get ，set 属性。

例如，我们给 c 实例添加一个 "colorGet" 属性，并设置该属性的get 描述符：

结果如下：

[图片上传失败...(image-60e708-1638233974390)]

这里没有拷贝到 "colorGet" 的 get 描述符，而是直接把获取到的值赋值给 "colorGet" 。

那对于 get 描述符要怎么获取呢？ Object.getOwnPropertyDescriptors就专为解决这问题而生。

而又因为要拷贝原型上的属性，所以结合Object.create、Object.getPrototypeOf 方法一起使用。即上面的第二种实现方法，如下：

结果如下：

[图片上传失败...(image-505bf1-1638233974390)]

此时已经成功的拷贝到了get描述符啦。

虽然说实际开发上很少会要去修改 get 描述符，但是知道多一种方法，遇到这种情况时就知道该怎么去解决了。

注意： 这些都只是一个层级的深拷贝。

上面实现 原型属性拷贝 中的两种方法中用到了 Object.getOwnPropertyDescriptors 、 Object.assing() 、 Object.create 、 Object.getPrototypeOf() 方法，通常这几种方法都有一起结合使用。

如果上面的例子还不理解，这里把他简单的拿到 对象的继承 来讲解。理解的话就可以忽略啦。

4.2）原型属性的继承

以前，继承另一个对象，常常写成下面这样。

ES6 规定 __proto__ 只有浏览器要部署，其他环境不用部署。如果去除 __proto__ ，可以用 Object.create() 和 Object.assign() 来实现。

但是 Object.assign() 无法正确拷贝get属性和set属性的问题。例如：

[图片上传失败...(image-55279a-1638233974390)]

上图中，obj 对象的 foo 属性是一个取值函数，Object.assign不会复制这个取值函数，只会拿到值以后，将这个值赋上去。

而 Object.getOwnPropertyDescriptors() 可以解决这个问题 实现get 、set 属性的正确拷贝，即方法3 ，如下：

[图片上传失败...(image-df3c31-1638233974390)]

说了那么多种拷贝方法，怎么去选择呢，还是要看实际应用中的情况:

如果只是拷贝 自身可枚举属性，就可以只用 Object.assign 方法；

如果是要拷贝原型上的属性，就需要 Object.assign , Object.create, Object.getPrototypeOf 方法结合使用

如果是拷贝get /set 属性，就需要 结合 Ojbect.getOwnPropertyDescriptors 方法

参考资料：

let proxy = new Proxy(target, handler)

tgarget ：要代理的目标对象。（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler ：定义拦截行为的配置对象（也是一个对象，其内部的属性均为执行 *** 作的函数）。

proxy的向光方法：

1、 set(target, key, value, receiver)   拦截对象属性的设置

target ：要代理的目标对象。

key ：要设置的属性名。

value ：要设置的属性值。

receiver ：proxy实例（可选参数，一般运粗裂不用）

例：

2、 get(target, key, receiver)  拦截对象属性的读取

target ：要代理的目标对象。

key ：属性名。

receiver：proxy 实例（可选参数，一般不用）

例：

3、 has(target, Key)  判断对象是否具有某个属性。

target ：要代理的目标对象。

key ：要设置的属性名。

4、 apply(target, thisArgs, args)  拦截函数的调用、call和apply *** 作

target ：目凳老标对象。

thisArgs ：目标对象的上下文对象（this）。

args ：目标对象的参数数组。

5、 construct(target, args，newTarget)  拦截new命令

target ：目标对象。

args ：构造函数的参数列表。

newTarget ：创建实例对象时，new命令作用的构旁闭造函数（下面例子的p）

具体可以参考阮一峰的这篇文章： ECMAScript 6 入门 - Proxy

---