JavaScript 设计模式之构造函数模式

一、构造函数模式概念解读

  1.构造函数模式概念文字解读

      构造函数用于创建特定类型的对象——不仅声明了使用的对象，构造函数还可以接受参数以便第一次创建对象的时候设置对象的成员值。你可以自定义自己的构造函数，然后在里面声明自定义类型对象的属性或方法。

      在JavaScript 里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。通过new 关键字来调用自定义的构造函数，在构造函数内部，this 关键字引用的是新创建的对象。

  2.构造函数模式概念拟物化解读

     门创建出来是要归属于某个人的，即，有使用对象（小王或小李）。门可以有多把钥匙。门可以有各种花边和形状。

    （厂家原始的门，客户要求的门）

二、构造函数模式的作用和注意事项

  模式作用：

    1.用于创建特定类型的对象。

    2.第一次声明的时候给对象赋值。

    3.自己声明构造函数，赋予属性和方法。

  注意事项：

    1.声明函数的时候处理业务逻辑。

    2.区分和单例的区别，配合单例实现初始化。

    3.构造函数建议大写字母开头。

    4. 注意new 的成本。（继承）尽量把公用的功能放到原型上去，具体再扩展。

 

三、构造函数模式的代码实战和总结

 1.一个通俗的例子

<meta charset="utf-8"/>
<script type="text/javascript">
     //1.用于创建特定类型的对象
     //2.js开发的时候写单引号
     //造门
     function makeDoor(){
         //instanceof 指向当前父类
        if (!(this instanceof makeDoor)) {
                return makeDoor();
        };

         this.lock="普通";  //门上的锁
         this.figure="普通"; //门上的花纹
        this.create=function(){   //开始产门
            return  "【锁头】"+this.lock+"【花纹】"+this.figure;
        }
     }
     var xiaozhangjia=new makeDoor(); //小张家需要建门,
     //此处如果没有new ，会出现
     //“JS_singleton.html:46 Uncaught RangeError: Maximum call stack size exceeded”
     //堆栈溢出的错误。
     alert("xiaozhangjia"+xiaozhangjia.create());  //开始产门
</script>

 

 2.与单例模式配合的例子

<meta charset="utf-8"/>
<script type="text/javascript">
     //1.用于创建特定类型的对象
     //2.js开发的时候写单引号

    //声明一个AA公司,造门;将造门放到AA进来，略改一下语法
    var AA={      
     //造门
     function:makeDoor(figure){
         //instanceof 指向当前父类
        if (!(this instanceof makeDoor)) {
                return new makeDoor();
        };
        var _figure = "普通";
        if (figure) {
            _figure= figure;
        };

         this.lock="普通";  //门上的锁
         this.figure=_figure; //门上的花纹
        this.create=function(){   //开始产门
            return  "【锁头】"+this.lock+"【花纹】"+this.figure
        }
    
 }    
     //声明一个BB公司,也可以造门

    var BB={      
     //造门
     function : makeDoor(figure){
         //instanceof 指向当前父类
        if (!(this instanceof makeDoor)) {
                return new makeDoor();
        };
        var _figure = "普通";
        if (figure) {
            _figure= figure;
        };

         this.lock="普通";  //门上的锁
         this.figure=_figure; //门上的花纹
        this.create=function(){   //开始产门
            return  "【锁头】"+this.lock+"【花纹】"+this.figure
        }
    
    }
    var xiaozhangjia=new AA.makeDoor(); //小张家需要建门,
     //此处如果没有new ，会出现
     //“JS_singleton.html:46 Uncaught RangeError: Maximum call stack size exceeded”
     //堆栈溢出的错误。
     alert("xiaozhangjia"+xiaozhangjia.create());  //开始产门

     var xiaolijia =new BB.makeDoor('绚丽');//小李家也需要建门,
     alert("xiaolijia"+xiaolijia.create());
</script>