创建对象的演化:四种方式

一 构造函数形式创建对象

缺点:添加属性过于繁琐

var obj = new Object();
        obj.name = "libai";
        obj.age = 12;

        // 添加属性繁琐 -> 字面量形式
        var obj1 = {
    
    
            name: "libai",
            age: 12
        }
        var obj2 = {
    
    
            name: "libai",
            age: 12
        }
二 函数构建(工厂模式)

缺点:无法区分不同函数的相同属性名

function createCat(name, age){
    
    
    return {
    
    
        name,
        age
    }
}
var cat1 = createCat("Tom", 12);
var cat2 = createCat("Jack", 16);

function createDog(name, age){
    
    
    return {
    
    
        name,
        age
    }
}
var dog1 = createDog("金毛", 6);
var dog2 = createDog("黑毛", 6);

在这里插入图片描述

三 构造函数模式

缺点:无法为实例提供共享的属性和方法,浪费内存

 function Cat(name, age){
    
    
            this.name = name;
            this.age = age;
            this.hobby = ["eat fish", "eat mouse"];
            this.skill = function (){
    
    
                console.log("爬树");
            }
        }
        var cat3 = new Cat("蓝", 12);
        var cat4 = new Cat("红", 6);

        function Dog(name, age){
    
    
            this.name = name;
            this.age = age;
        }
        var dog3 = new Dog("流浪", 12);

        console.log(cat3, dog3);
        console.log(cat3.hobby === cat4.hobby); // false
        console.log(cat3.skill === cat4.skill); // false
四 构造函数+原型

优点:构造函数为实例添加私有属性,原型提供共有属性

 function Person(name, age){
    
    
            this.name = name;
            this.age = age;
            this.hobby = [];
        }
        Person.prototype.skill = ["eat", "sleep"];
        Person.prototype.run = function (){
    
    
            console.log("run");
        }

        var zs = new Person("张三", 12);
        var lb = new Person("李白", 16);
        console.log("zs.hobby === lb.hobby", zs.hobby === lb.hobby); // false
        console.log("zs.skill === lb.skill", zs.skill === lb.skill); // true
        console.log("zs.run === lb.run", zs.run === lb.run); // true
        lb.hobby.push("drink");
        console.log(zs.hobby);

猜你喜欢

转载自blog.csdn.net/weixin_47067248/article/details/107993299