JavaScript设计模式(二)——构造函数模式

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

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

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

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

        模式作用:

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

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

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

        注意事项:

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

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

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

               4.注意new的成本(继承)

三、构造函数模式的代码应用和总结

     我们现在假设有小张和小李两家,他们要找公司造门,下面就是这样一段JS代码,其中变量都是中文的拼音。 

<meta charset="utf-8"/>
<script type="text/javascript">
    //1.用于创建特定类型的对象
    //2.代码中的命名都是按照中文拼音的,为了方便大家解读,实际开发中不可取
    //3.js开发的时候尽可能写单引号,因为js内部会把双引号进行一个转化
    //4.js里面构造函数比较特殊的地方 new
    //5. 其他的语言当中 比如PHP 里面人家实现构造函数有一个关键字 A class
    //6. zaomen就是构造函数 他又充当了类的概念
    function zaomen(huawen) {
        if(!(this instanceof zaomen)){
          return new zaomen();
        };
        var _huawen = "普通";
        if(huawen){
            _huawen = huawen;
        }
        this.suo = "普通";
        this.huawen = _huawen;
        this.create = function () {
            return "【门锁】" + this.suo + "【花纹】" + this.huawen;
        }
    }
    var xiaozhang = zaomen(); //或者var xiaozhang = new zaomen();
    console.log("xiaozhang家的门" + xiaozhang.create());

    var xiaoli = new zaomen('绚丽');
    console.log("xiaoli家门" + xiaoli.create());
</script>

 让我们看一下最后他们造出了什么样的门:

上面是控制台的输出,所以概念加实例一目了然,那么构造函数模式可以结合单例模式,那又会怎样呢,下面的代码中AA是一家公司,BB也是一家公司,他们都可以帮助小李小张进行造门,下面是粗糙的代码

<meta charset="utf-8"/>
<script type="text/javascript">
    //1.用于创建特定类型的对象
    //2.代码中的命名都是按照中文拼音的,为了方便大家解读,实际开发中不可取
    //3.js开发的时候尽可能写单引号,因为js内部会把双引号进行一个转化
    //4.js里面构造函数比较特殊的地方 new
    //5. 其他的语言当中 比如PHP 里面人家实现构造函数有一个关键字 A class
    //6. zaomen就是构造函数 他又充当了类的概念
    var AA = {
        function:zaomen(huawen)
        //...代码省略
    }
    var AA = {
        function:zaomen(huawen)
        //...代码省略
    }


    var xiaozhang = new AA.zaomen();
    console.log("xiaozhang家的门" + xiaozhang.create());

    var xiaoli = new BB.zaomen('绚丽');
    console.log("xiaoli家门" + xiaoli.create());
</script>

完整十四种前端架构设计模式,请见我JavaScript架构分类下的其他博客

发布了65 篇原创文章 · 获赞 31 · 访问量 15万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 技术工厂 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览