JavaScript高级之对象创建的几种方式

Posted 2022-03-14 二木成林

第一种，Object构造函数模式

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

<script type="text/javascript">
    // 先创建空Object对象
    var p = new Object();
    console.log(p);// 此时内部数据是不确定的
    // 再动态添加属性和方法
    p.name = '张三';// 添加name属性
    p.age = 12;// 添加age属性
    p.setName = function (name) // 添加setName方法
        this.name = name;
    ;

    // 测试创建的对象
    console.log(p.name, p.age);// 张三 12
    p.setName('李四');
    console.log(p.name, p.age);// 李四 12
</script>

第二种，对象字面量

• 方法：使用 创建对象，同时指定属性和方法。
• 适用场景：初始时对象内部数据的确定的。
• 问题：如果创建多个对象，会有重复代码。

<script type="text/javascript">
    var p = 
        name: '张三',
        age: 12,
        setName: function (name) 
            this.name = name;
        
    ;

    // 测试创建的对象
    console.log(p.name, p.age);// 张三 12
    p.setName('李四');
    console.log(p.name, p.age);// 李四 12

    // 如果创建多个对象则会代码很重复
    var p2 = 
        name: '王五',
        age: 15,
        setName: function (name) 
            this.name = name;
        
    
</script>

第三种，工厂模式

• 方法：通过工厂函数动态创建对象并返回创建成功的对象。
• 适用场景：需要创建多个对象。
• 问题：对象没有一个具体的类型，都是Object类型的。

<script type="text/javascript">
    // 创建一个工厂函数，通过函数来动态创建对象，然后将创建的对象返回
    function createPerson(name, age) 
        var obj = 
            name: name,
            age: age,
            setName: function (name) 
                this.name = name;
            
        ;
        return obj;
    
    // 通过函数创建两个不同的对象，但p1和p2都是Object类型的
    var p1 = createPerson('张三', 12);
    var p2 = createPerson('李四', 15);

    function createFood(name, price) 
        var obj = 
            name: name,
            price: price
        ;
        return obj;
    
    // 但f1也是Object类型的
    var f1 = createFood('西红柿', 3.5);
</script>

第四种，自定义构造函数模式

• 方法：自定义构造函数，通过new关键字来创建对象。
• 适用对象：需要创建多个类型确定的对象。
• 问题：每个对象都有相同的数据，浪费内存。

<script type="text/javascript">
    // 使用构造函数创建声明对象类型
    function Person(name, age) 
        this.name = name;
        this.age = age;
        this.setName = function (name) 
            this.name = name;
        
    
    // 使用new关键字来创建对象
    var p1 = new Person('张三', 12);
    p1.setName('李四');
    console.log(p1.name, p1.age);
    // 如果再创建一个p2，那么p1对象和p2对象都有setName方法，但它们应该是公共的，而不是每个对象都占用一块内存空间
    var p2 = new Person('王五', 13);

    // 创建另一种类型的对象
    function Food(name, price) 
        this.name = name;
        this.price = price;
    
    var f1 = new Food('西红柿', 3.5);
    console.log(f1.name, f1.price);

    console.log(p1 instanceof Person);// true
    console.log(f1 instanceof Food);// true
</script>

第五种，构造函数与原型组合的模式

• 方法：自定义构造函数，属性在构造函数中初始化，而方法通过原型来进行添加。
• 适用场景：需要创建多个类型确定的对象。

<script type="text/javascript">
    // 在构造函数中初始化属性
    function Person(name, age) 
        this.name = name;
        this.age = age;
    
    // 通过原型来设置方法
    Person.prototype.setName = function (name) 
        this.name = name;
    ;

    var p1 = new Person('张三', 14);
    var p2 = new Person('李四', 15);
    console.log(p1, p2);
</script>