美文网首页JS
JS学习——js创建对象的方法

JS学习——js创建对象的方法

作者: 锤子爱砸房子 | 来源:发表于2017-10-27 21:32 被阅读0次

    一.直接创建

    通过键值对的形式将对象中的属性和方法连接起来

    var person = {
        name : '张三',
        age : 18,
        sayHi : function () {
            alert('hello');
        }
    }
    

    此方法是最简单的创建对象的方法,一般用于创建少数对象,但是一旦需要创建多个对象,就得复制粘贴代码了,所以对于批量创建同一对象使用此方法不实用

    二.使用工厂模式创建对象

    使用工厂模式创建对象能有效解决直接上述直接创建多个不同对象的问题,节省代码

    function createPerson (name, age) {
        // 创建一个空对象
        var per = new Object();
        per.name = name;
        per.age = age;
        per.sayHi = function () {
            alert('hello');
        }
        // 把创建好的对象返回出去
        return per;
    }
    var person1 = createPerson('张三', 18)
    ......
    

    通过创建一个空对象,在空对象中加入相关属性和属性值,最后记得返回出创建的对象

    三.使用构造函数创建对象

    我们现在已经能够创建多个对象了,但是会存在一个问题,每次创建一个空对象(pre)会在内存中开辟一个空间,再建立一个对象(person1)就会在此开辟一个空间,虽然空对象会在函数执行完成后释放,但是创建过程中相当于使用了两倍的空间去生成一个对象
    为了减少对内存空间的使用于是就有了使用构造函数创建对象的方法

    function CreatePerson (name, age) {
       this.name = name;
       this.age = age;
       this.sayHi = function () {
           alert('hello');
       }
    }
    var person = new CreatePerson('张三', 18);
    

    当引擎执行到new关键字时,首先会在内存中开辟一个空间用来储存创建的对象,同时会将地址返还给person。而构造函数中的this指针的指向取决于调用者,即this指向的为新对象(person
    但是,这种方法同样存在一些缺陷,每次创建对象的时候都会重新创建sayHi属性,对于相同的属性我们希望只需要创建一遍,以后调用就行

    四.通过原型创建对象

    此方法就是为了改进对于相同的属性

    function CreatePerson (name, age) {
        this.name  = name;
        this.age  = age;
        CreatePerson.prototype.sayHi  = function () {
            alert('hello');
        };
    }
    

    把所有对象公有的属性和所有方法全部存在原型中,以达到节约内存的目的;同时把各自对象值不同的属性,放在实例中,由对象自己开辟内存空间,维护自己独有的值

    五.动态原型创建对象

    function CreatePerson (name, age) {
        this.name = name;
        this.age = age;
        if (typeof(CreatePerson.prototype.sayHi) != 'function') {
            CreatePerson.prototype.sayHi = function () {
                alert('我的名字是:' + this.name);
            }
        }
    }
    

    对原型创建对象进一步优化,加入一个判断条件,判断已创建的原型中是否存在某个属性,让后来创建的对象可以直接引用公有属性

    相关文章

      网友评论

        本文标题:JS学习——js创建对象的方法

        本文链接:https://www.haomeiwen.com/subject/htgdpxtx.html