JS创建对象的几种方式

不少文章都是从设计模式的角度去回答，并没有从 JS 语言的角度出发。目前，JS 这门语言，创建对象不外乎以下几种方式：

对象字面量

 

对象字面量也是我们平时写代码最常使用的方式，用一附含有键值对的大括号去定义我们的对象及其内部属性

let obj = {
    key: 'value'
}

当然我们也可以直接用“｛｝”去定义一个空对象

 

 

使用构造对象

 

如果我们的对象存在一些公共的属性，那么使用对象字面量去定义就会比较浪费空间。

因此我们要使用构造对象，不论是构造函数语法，还是 ES6 的 class 语法，JS 本身是都是通过原型对象和原型链来实现属性的共享的，本质基本相同。

// 构造函数
function obj{
    this.ownKey = 'ownValue'
}
obj.prototype.key = 'value'


// class语法
class Obj{
    key = 'value'
    constructor(){
        this.ownKey = 'ownValue'
    }
}

Object.create()

 

Object.create 是 ECMAScript 5 新增的一个静态方法，用来创建一个实例对象。

Object.create()有两个形参，分别是 proto（新创建对象的原型对象）和 propertiesObject（参照 Object.defineProperties()的第二个参数的对象）。

如果熟悉 vue，对于 defineProperties 方法应该是比较了解了，可以基于添加一些属性描述符，可以让我们以更为细致地操作这个对象。

let protoObj = {
    key: 'value'
};
let obj = Object.create(protoObj, {
    foo: { value: 'bar' }
});