JS高级（9）—— 对象创建模式

骑猪看日落 2022-12-23 06:45 175阅读 0赞

#### 方式一：Object构造函数模式 ####

*  套路：先创建空Object对象，再动态添加属性/方法
 *  适用场景：起始时不确定对象内部数据
 *  问题：语句太多

// 先创建空Object对象
    var p = new Object();
    // 再动态添加属性/方法
    p.name = 'Tom';
    p.age = 12;
    p.setName = function (name) { 
      this.name = name
    };
    
    //测试
    console.log(p.name, p.age);
    p.setName('Bob');
    console.log(p.name, p.age)

![在这里插入图片描述][20201123113927488.png_pic_center]

#### 方式二：对象字面量模式 ####

*  套路：使用\{\}创建对象，同时指定属性 / 方法
 *  适用场景：起始时对象内部数据是确定的
 *  问题：如果创建多个对象，有重复代码

var p = { 
     name: 'Tom',
     age: 12,
     setName: function (name) { 
        this.name = name
      }
    };
    
    //测试
    console.log(p.name, p.age);
    p.setName('JACK');
    console.log(p.name, p.age);

![在这里插入图片描述][2020112311412181.png_pic_center]

#### 方式三：工厂模式 ####

*  套路：通过工厂函数动态创建对象并返回（返回一个对象的函数===>工厂函数）
 *  适用场景：需要创建多个对象
 *  问题：对象没有一个具体的类型，都是Object类型

![在这里插入图片描述][20201123114523985.png_pic_center]

#### 方式四：自定义构造函数模式 ####

*  套路：自定义构造函数，通过new创建对象
 *  适用场景：需要创建多个类型确定的对象
 *  问题：每个对象都有相同的数据, 浪费内存

//定义类型
    function Person(name, age) { 
      this.name = name;
      this.age = age;
      this.setName = function (name) { 
        this.name = name
      }
    }
    var p1 = new Person('Tom', 12);
    p1.setName('Jack');
    console.log(p1.name, p1.age);
    console.log(p1 instanceof Person);
    
    function Student (name, price) { 
      this.name = name;
      this.price = price;
    }
    var s = new Student('Bob', 13000);
    console.log(s instanceof Student);

![在这里插入图片描述][20201123114700954.png_pic_center]

#### 方式五：构造函数+原型的组合模式 ####

*  套路：自定义构造函数，属性在函数中初始化，方法添加到原型上
 *  适用场景：需要创建多个类型确定的对象

function Person(name, age) {  //在构造函数中只初始化一般函数
      this.name = name;
      this.age = age;
    }
    Person.prototype.setName = function (name) { 
      this.name = name
    };
    
    var p1 = new Person('Tom', 23);
    var p2 = new Person('Jack', 24);
    console.log(p1, p2)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

[20201123113927488.png_pic_center]: /images/20221120/012d784cd45f441d8329a781ddc82b0a.png
[2020112311412181.png_pic_center]: https://img-blog.csdnimg.cn/2020112311412181.png#pic_center
[20201123114523985.png_pic_center]: https://img-blog.csdnimg.cn/20201123114523985.png#pic_center
[20201123114700954.png_pic_center]: https://img-blog.csdnimg.cn/20201123114700954.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201123114916534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70#pic_center