【前端整理】创建对象的3种常见方式

162 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第4天,点击查看活动详情

温故而知新,可以为师矣!

1.构造函数创建对象(常用)

场景

当需要重复创建相同类型的对象,比如给小说里不同的人物创建对象。

结构

//构造函数
function Character(name,profession,sequence) {
    //定义属性
    this.name = name;
    this.profession = profession;
    this.sequence = sequence;
}
//定义方法
Character.prototype.intro = function () {
    console.log(`我是${this.sequence}序列的非凡者。`);
}
//实例化对象
const c1 = new Character('克莱恩','侦探','占卜家');
c1.intro();    //我是占卜家序列的非凡者。

特点

  1. 使用构造函数的定义和普通函数类似,但一般构造函数名首字母要大写。
  2. 借助原型来定义方法,可以减少内存冗余(多个实例共用一套原型方法)
  3. 必须使用new关键字来创建实例。
  4. console.log打印原型时可以看到他的构造函数名,而不仅是Object(用instanceof关键词也可以显示)

image.png

image.png

2.字面量创建(常用)

场景

自己练习,或者快速写代码时。

结构

const c2 = {
    name: '罗塞尔大帝',
    profession: '日记家',
    sequence: '黑皇帝',
    intro: function () {
        console.log(`我是${this.sequence}序列的非凡者。`);
    }
}
c2.intro();     //我是黑皇帝序列的非凡者。

特点

  1. 结构简单
  2. 无法复用,重复创建结构类似的对象会代码冗余。
  3. 会作为原型对象使用(看下面的例子)。

3. Object.create()方法创建对象

场景

当需要继承父类,或者对对象的属性有限制时使用这样的方法创建一个新实例对象。

结构

Object.create(原型对象,属性对象)

这个方法有两个参数,第一个参数当成是新建实例对象的原型对象,第二个参数为一个对象,对象里的属性作为新建实例对象的属性。

看个例子:

const transporter = Object.create(c2,{  //c2为上文定义的对象

    //定义新实例对象的属性,以及属性是否可删改
    trueName : {
        //设置属性的值
        value: '黄涛',
        //属性值是否可以修改
        writable: true,
        //属性是否可以删除
        configurable: true,
        //属性是否可以枚举(遍历)
        enumerable: true,
    },
    origin:{
        value: 'China',
        writable: false,
        configurable: false,
        enumerable: false,
    }
})
console.log(transporter.trueName);  //黄涛

解释一下,这里的第一个参数c2被设置为了新对象transporter的原型,使用console.log(transporter)打印可以看到:

image.png

或者直接看transporter的__proto__属性:(就是c2)

image.png

而Object.create()的第二个参数可写可不写,写了就是给新实例对象添加属性的,而且这些属性可以设置其是否可修改,可迭代,可删除。

从语义层面上这样定义是很有必要的,比如黄涛的故乡就是不可迭代的,因为这是俺们穿越者的秘密!也不可修改,因为穿越后故乡是回不去的。

特点

  1. 通过将已存在的对象设为第一个参数,可以实现继承。
  2. 在创建新对象的同事,扩展属性的设置