• 【设计模式+原型理解】第一章:使用Javascript来巧妙实现经典的设计模式


            刚开始学习设计模式之前,我是没想说要学习设计模式的,我只是因为想学习JS中的原型prototype知识,一开始我想JS中为什么要存在原型这个东西?于是慢慢通过原型而接触到设计模式,后来发现我这个过程是非常正确的,即先学习设计模式,然后在剖析原型及其原理

            我一开始,都是通过针对原型的知识点去看去学,发现还是理解不了,就算理解了原型,可以说只是停留在表面的知道,你并不懂得如何运用原型?后来,我通过用设计模式的角度去理解原型prototype,我才焕然大悟

            但是在这一篇章里面,并没有说到原型、原型模式,因为如果你要进入设计模式的角度去理解原型,你就必须得了解一下用JS来实现单例模式、工厂模式和构造函数模式,看看Javascript是如果巧妙地实现各种设计模式。

       

        【单例模式】

    var person1 = {
        "name": "psg",
        "age": 24  
    };
    var person2 = {
        "name": "fsf",
        "age": 22
    };
    console.log(person1.name); // ->page
    console.log(person1.age); // ->24
    console.log(person2 .name); // ->fsf
    console.log(person2 .age); // ->22

            上面的person1与person2都不是基本数据类型,都是对象数据类型,对象数据类型的作用:把描述同一个事物(同一个对象)的属性和方法放在一个内存空间下,起到了分组的作用(例如person1与person2,都是两个独立开来的栈内存,里面的属性和方法互不影响) -> 于是,我们把这种分组编写代码的模式叫做“单例模式”。

       

        -> 在“单例模式”中,我们叫person1、person2叫做命名空间

        单例模式是一种项目开发中经常使用的模式,因为项目中我们可以使用单例模式进行“模块化”开发。

        命名空间的作用,看下面代码

    // searchRender 是一个命名空间
    var searchRender = {
        change: function() {
            this.clickEvent(); //这里this你暂时看不出来是谁,因为只有执行的时候,才知道
        }  ,
        clickEvent: function() {
    
        }
    };
    // 但是想要使用searchRender里面的change方法,你必须如下调用
    serachRender.clickEvent();
    // 所以change方法里面的this,只能是searchRender
    

        如果你学的比较深入,看上面的代码你就能看出命名空间的作用是什么了,就是能灵活运用this。

        这里使用this的好处:当命名空间改名字的时候,你并不用改里面的调用者,因为this就代表命名空间。

        总结

        ->单例模式解决了分组的问题

        ->但是单例模式的弊端也很明显,因为他仍然是手工作业模式,效率比较低,于是“工厂模式”就站出来解决了这个问题,因为工厂模式可以批量生产

       【工厂模式】

    function createJsPerson(name, age) {
        var obj = {};
        obj.name = name;
        obj.age = age;
        obj.writeJs = function() {
            console.log("My name is " + this.name + ", i can write js.");
        };
        return obj;
    }
    var p1 = createJsPerson("psg", 24);
    var p2 = createJsPerson("fsf", 22)
    p1.writeJs(); // ->My name is psg, i can write js.
    p2.writeJs(); // ->My name is fsf, i can write js.
    

        这样写,可以减少重复代码的产出,你只需要写好公共的代码,把他放进一个方法里面,然后通过接受不同的参数,可以创建不同的对象,效率比单例模式高多了!

        接下来,讲一下“构造函数模式”,它的样子跟“工厂模式”非常相似

        

        【构造函数模式】

    function CreateJsPerson(name, age) {
        // var obj = {};
        this.name = name;
        this.age = age;
        this.writeJs = function() {
            console.log("My name is " + this.name + ", i can write js.");
        }
        // return obj;
    }
    var p = new CreateJsPerson("psg", 24);
    p.writeJs();  // -> My name is psg, i can write js.
    

           看到没有,CreateJsPerson这个方法,根本不会像工厂模式那样最后返回给你一个对象,它不需要,因为当你通过使用new关键字,浏览器会在后台中自己新建一个对象,然后通过this来指向该新建对象,最后自动默认返回一个对象给你

           ->其实我们有时也会不经意用到使用构造函数模式新进实例,例如创建一个数组

    // 创建一个数组
    var ary = []; // 字面量方式
    var arry = new Array(); // 实例创建的方式-》构造函数模式执行的方式
    

      

       

        ->知识点一: 构造函数模式和工厂模式的区别?

        1)执行的时候

        普通函数执行 -> createJsPerson() -> 这时候,createJsPerson是一个普通函数名

        构造函数模式 -> new CreateJsPerson() -> 通过new执行后,CreateJsPerson就是一个类 -> 开头大写是因为约定了,大写开头的函数就是表示一个类

                                   new  出来的返回值(p),就是CreateJsPerson这个类的一个实例

        2)在函数执行的时候

        相同点 -> 都是形成私有作用域,然后形参赋值 -> 预解释 -> 代码从上到下执行(类和普通函数一样,它也有普通函数的一面)

        不同点 -> 在代码执行之前, 不用自己再手动创建对象,浏览器会默认的创建一个对象数据类型的值(类的实例),并作为函数返回值自动返回。

       

         ->知识点二: 构造函数也是函数数据类型

            在JS中,所有类都是函数数据类型,createJsPerson是函数数据类型, new CreateJsPerson也是函数数据类型,CreateJsPerson它通过new执行变成了一类,但它本身也是一个普通的函数。

            但是,JS中所有类的实例都是对象数据类型。

         ->知识点三: 如果给构造函数里面添加私有变量,它返回值(实例)会存在此变量吗?

    unction Fn() {
        var num = 10;
    }
    var obj = new Fn;
    console.log(num); // -> undefined
    console.log(obj.num); // -> undefined
    

        上面例子可以看出,这里的num只是函数私有作用域里面的一个私有变量,它跟实例没有任何关系。

         ->知识点四: 如果给构造函数直接返回一个对象,或者直接返回一个基本数据类型,那个实例到底还是不是浏览器默认返回的实例呢?

        1)手动添加自动返回基本数据类型

    function Fn() {
        var num = 10;
        return 100; // 代码无效
    }
    var f1 = new Fn;
    console.log(f1); // -> Object,这个Object就是空的,也是浏览器默认返回的对象
    // 也就是说,return 100 这句代码无效

        2)手动添加自动返回对象数据类型

    function Fn() {
        var num = 10;
        return {name: 'psg'}; // 代码有效
    }
    var f1 = new Fn;
    console.log(f1); // -> Object,这个Object就是 {name: 'psg'}
    // 也就是说,强制返回的手动添加的实例对象,完全KO覆盖掉浏览器默认返回的实例对象
    

        总结上面两点在构造函数模式当中,浏览器会默认把我们的实例返回(返回的是一个对象数据类型的值)
        // 但是如果我们手动返回值,分两种情况
               // ******情况一,返回的是一个基本数据类型的值,当前实例不变
               // 例如: return 100
               // 那么浏览器返回的值仍然是浏览器默认创建的对象
               // ******情况二,返回的是一个引用数据类型的值,当前实例会被自己返回的值覆盖掉
               // 例如: return {name: "psg"}
               // 那么原先浏览器返回的默认值,将会被自己的手动创建返回的对象给覆盖掉。注意,一定要是对象哦

     

         ->知识点五: 检测某一个实例是否属于这个类 -> instanceof

        下面这个例子很有意思!!结合了知识点四。

    function Fn() {
        var num = 10;
        // return 100
        return {name: 'psg'}
    }
    var f1 = new Fn;
    console.log(f1 instanceof Fn); // ->false , 因为f1不是浏览器创建的默认实例
    

      

         ->知识点六:检测某个属性是否属于某个实例,检测某个属性是否为该对象的公有属性?

    function Fn1() {
        this.x = 100;
        this.getX = function() {
            console.log(this.x);
        }
    }
    var fun1 = new Fn1;
    var fun2 = new Fn1;
    console.log(fun1.getX() === fun2.getX());
    // -> fun1和fun2都是Fn1这个类的实例,都拥有x和getX这两个属性,但是这两个属性是各自私有的属性
    // 但是如何检测某一个属性是否属于某一个实例
    // in: 检测某一个属性是否属于某一个实例,不管是私有属性还是公有属性,用in都是用来检测这个属性是否属于这个对象
    console.log("getX" in fun1); // -> true
    
    // hasOwnProperty: 用来检测某个属性是否为这个对象的私有属性,这个方法只能检测私有的属性
    console.log(fun1.hasOwnProperty("getX")); // -> true
    
    // 思考,检测某一个属性是否为该对象的“公有属性”,自己写一个 hasPubProperty
    
    function hasPubProperty(obj, attr) {
        // 首先保证它是一个对象的属性,并且不是私有属性,那就肯定就是公有属性了
        return ((attr in obj) && !obj.hasOwnProperty(attr));
    }
    
    console.log(hasPubProperty(fun1, "getX")); // -> false;
    

      

           这一章,主要讲了单例模式、工厂模式和构造函数模式,同时也因为工厂模式与构造函数模式代码上非常相似,但是实现原理完全不相同,所以也讲了构造函数模式实例化对象的原理过程,以及他们两的区别。

           下一章 的《【设计模式+原型理解】第二章:JS中为什么要存在原型prototype这个东西?》会讲到原型模式,准确来说是基于构造函数模式的原型模式,因为只有讲到构造函数模式,你才知道构造函数的优缺点,原型模式就是为了解决并改进构造函数的。

           待续....

  • 相关阅读:
    【BZOJ1831】[AHOI2008]逆序对(动态规划)
    【agc030f】Permutation and Minimum(动态规划)
    【BZOJ3167】[HEOI2013]SAO(动态规划)
    【CF802C】Heidi and Library(网络流)
    【CF671D】Roads in Yusland(贪心,左偏树)
    对偶问题
    【BZOJ2324】[ZJOI2011]营救皮卡丘(网络流,费用流)
    【BZOJ3691】游行(网络流)
    【CF908G】New Year and Original Order(动态规划)
    【CF809C】Find a car(动态规划)
  • 原文地址:https://www.cnblogs.com/pengshengguang/p/10403690.html
Copyright © 2020-2023  润新知