• javascript 面向对象编程(工厂模式、构造函数模式、原型模式)


    javascript 面向对象编程(工厂模式、构造函数模式、原型模式)

    CreateTime--2018年3月29日17:09:38

    Author:Marydon

    一、工厂模式

    /**
     * 工厂模式
     */
    function factoryFunction() {
        // 1.创建一个Object对象(人)
        var person = new Object();
        // 或者 var person = {};
        // 2.对象的属性(对应人的特征)
        person.name = "Marydon";
        person.qq = "2982586911";
        person.website = "www.cnblogs.com/Marydon20170307";
        // 3.对象的方法(对应人的行为)
        person.operation = function() {
            alert("正在演示工厂模式");        
        };
        return person;
    }

      调用:

    factoryFunction().operation();

      适用场景:

      个人不推荐使用,因为构造函数模式完全可以取代。 

    二、构造函数模式

    /**
     * 构造函数模式
     * @注意:首字母要大写,用于和普通函数区分
     */
    function ConstructorFunction() {
        this.name = "Marydon";
        this.qq = "2982586911";
        this.website = "www.cnblogs.com/Marydon20170307";
        // 这个两个this指的是同一对象哦!
        this.operation = function() {
            alert(this.name);        
        };
        
    }

      调用:

    // 创建对象,对象创建后,该对象里面的this指的就是cf
    var cf = new ConstructorFunction();
    cf.operation();// 弹出Marydon

      适用场景: 

      个人比较推荐使用

    三、原型模式

    /**
     * 原型模式
     * @注意:使用前,必须实例化
     */
    function prototypeFunction() {};
    prototypeFunction.prototype.name = "Marydon";
    prototypeFunction.prototype.qq = "2982586911";
    prototypeFunction.prototype.website = "www.cnblogs.com/Marydon20170307";
    
    prototypeFunction.prototype.operation = function() {
        alert("正在演示原型模式");        
    };

      调用:

    // 不能这样直接调用
    // prototypeFunction().operation();
    // 必须得先创建这个对象
    var pf = new prototypeFunction();

      适用场景: 

       给已经存在的对象添加方法时使用

      比如:String对象没有trim()方法,Date对象没有format()方法,对其进行自定义封装时,需要用到。

    四、还用一种经常使用 

    /**
     * 使用JSONObject创建
     */
    var jsonObjectFunction = {
        name :"Marydon",
        qq : "2982586911",
        website : "www.cnblogs.com/Marydon20170307",
        operation : function() {
            alert("正在演示JSON对象");        
        }
        
    };

      调用:

    // 直接调用
    jsonObjectFunction.operation();

      适用场景: 

       比较典型的就是ajax函数对象,另外,许多封装的插件也是使用的这种方式。 

    五、结语

       很多时候需要混合使用,最常见的是:构造函数+原型函数 模式

  • 相关阅读:
    原型链
    原型规则总结
    使用typeof能得到的哪些类型
    eslint 规则中文注释
    两张图片互相切换
    输入框获得焦点与失去焦点、阴影效果
    vue 写table的几种方式
    vue 注意事项
    angular 接口定义封装
    @NgModule
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/8671419.html
Copyright © 2020-2023  润新知