美文网首页程序员JavaScript 进阶营
JavaScript对象创建的几种方式

JavaScript对象创建的几种方式

作者: 毛三十 | 来源:发表于2017-08-25 17:23 被阅读0次

    1 工厂模式

    1.1 创建

    function createFruit(name,colors) {
        var o = new Object();
        o.name = name;
        o.colors = colors;
        o.getInfo = function () {
            console.log(this.name+"是"+this.colors+"的");
        }
        return o;
    }
    var apple = createFruit("苹果",["红色","黄色"]);
    

    1.2 说明

    利用水果工厂可以很容易的创建一种新的水果,每个新创建的水果都是包括两个属性和一个方法的Object。因为没有水果对象,所以不能通过instanceof得出苹果是水果的结论。

    2 构造函数模式

    2.1 创建

    function Fruit(name,colors) {
        this.name = name;
        this.colors = colors;
        this.getInfo = function () {
            console.log(this.name+"是"+this.colors+"的");
        }
    }
    var apple = new Fruit("苹果",["红色","黄色"]);
    

    2.2 说明

    利用构造函数模式可以解决对象识别问题,但其主要问题是每个方法在每个实例上重新创建一遍,没有做到方法的重用。

    3 原型模式

    3.1 创建

    function Fruit() {
    }
    Fruit.prototype.name = "水果";
    Fruit.prototype.colors = [];
    Fruit.prototype.getInfo = function () {
        console.log(this.name+"是"+this.colors+"的");
    }
    var apple = new Fruit();
    apple.name = "苹果";
    

    3.2 说明

    原型模式没办法向构造函数传递参数,原型中所有的属性是被多实例共享的,对于引用类型的共享属性的操作可能引起突出的问题。例如向苹果的颜色属性put一个"红色"(apple.colors.push("红色")),哪么所有水果通过原型访问到的颜色都是"红色",而这是很危险的。

    4 组合模式(构造函数与原型)

    4.1 创建

    function Fruit(name,colors) {
        this.name = name;
        this.colors = colors;
    }
    Fruit.prototype = {
        constructor : Fruit,
        getInfo : function () {
            console.log(this.name+"是"+this.colors+"的");
        }
    }
    var apple = new Fruit("苹果",["红色","黄色"]);
    

    4.2 说明

    组合模式是最常见的创建自定义对象的方式,构造函数模式用于定义实例属性,原型模式用于定义方法和共享属性。可以最大限度的节省内存。

    5 动态原型模式

    5.1 创建

    function Fruit(name,colors) {
        this.name = name;
        this.colors = colors;
        if(typeof  this.getInfo != "function") {
            Fruit.prototype.getInfo = function () {
                console.log(this.name+"是"+this.colors+"的");
            };
        }
    }
    var apple = new Fruit("苹果",["红色","黄色"]);
    

    5.2 说明

    很完美的方式,把所有信息都封装在构造函数中。只有在getInfo()方法不存在的情况下,才会将它添加到原型中。原型的这段代码只会在初次调用构造函数时才会执行。

    6 寄生构造函数模式

    6.1 创建

    function Fruit(name,colors) {
        var o = {};
        o.name = name;
        o.colors = colors;
        o.getInfo = function () {
            console.log(this.name+"是"+this.colors+"的");
        }
        return o;
    }
    var apple = new Fruit("苹果",["红色","黄色"]);
    

    6.2 说明

    这种方式和工厂模式代码其实是一样的,只是函数名采用了Fruit的首字母大写的形式,并且用new来进行初始化。这种模式可以在特殊的情况下用来为对象创建构造函数。

    7 稳妥构造函数模式

    7.1 创建

    function Fruit(name,colors) {
        var o = {};
        o.getInfo = function () {
            console.log(name+"是"+colors+"的");
        }
        return o;
    }
    var apple = Fruit("苹果",["红色","黄色"]);
    

    7.2 说明

    稳妥对象(durable objects)是由道格拉斯(douglas)发明。指的是没有公共属性,并且其方法也不引用this的对象。适合在安全环境中实用。

    8 摘要

    JavaScript自定义对象创建的几种方式,包括工厂模式、构造函数模式、原型模式、组合模式(构造函数与原型)、动态原型模式、寄生构造函数模式、稳妥构造函数模式。给出了所有7种方式的创建示例代码及其简单说明。这几种创建方式并没有绝对的好与坏,不同的方式适合于不同的应用场景,大家要灵活选择。

    相关文章

      网友评论

        本文标题:JavaScript对象创建的几种方式

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