JS创建对象的几种模式

首页 > JS创建对象的几种模式 > 列表

JS创建对象的几种模式

  • Object构造函数模式
    • 先创建空Object对象,再动态添加属性/方法
    • 适用场景:起始时不确定对象内部数据
    • 问题:语句太多
var obj={}
obj.name="tom"
obj.age=23
  • 对象字面量模式
    • 使用{}创建对象,同时指定属性/方法
    • 适用场景:起始时对象内部数据是确定的
    • 问题:如果创建多个对象,有重复代码
var obj1={
    name:"tom",
    age:30,
    setName:function(name){
        this.name=name
    }
}
var obj2={
    name:"tom",
    age:30,
    setName:function(name){
        this.name=name
    }
}
obj1.setName("jack")

  • 工厂模式
    • 通过工厂函数动态创建对象并返回
    • 适用场景:需要创建多个对象
    • 问题:对象没有一个具体的类型,都是Object类型
function createPerson(name,age){
    var obj={
        name:name,
        age:age,
        setName:function(name){
            this.name=name
        }
    }
}
function createStudent(name,age,major){
    var obj={

    }
    return obj;
}--------------因为返回的都是object,所以不能区分类型
var p1=createPerson("tom",20)
var p2=createPerson("jack",30)
var s1=createPerson("rose",20,"it")

console.log(s1 instanceof Student )    false
  • 自定义构造函数模式
    • 自定义构造函数,通过new创建对象
    • 适用场景:需要创建多个类型确定的对象
    • 问题:每个对象都有相同的数据,浪费内存
function Person(name,age){
    this.name=name;
    this.age=age;
    this.setName=function(name){
        this.name=name
    }
}
var p1=new Person("tom",20)
  • 构造函数+原型的组合模式
    • 自定义构造函数,属性在函数中初始化,方法添加在原型上
    • 适用场景:需要创建多个类型确定的对象
function Student(name,age,major){
    this.name=name;
    this.age=age;
    this.major=major;
}
Student.prototype.setName=function(name){
    this.name=name
}
var p1=new Person("tom",20)