JS的设计模式之构造函数模式详解

这次给大家带来JS的设计模式之构造函数模式详解，使用JS构造函数模式的注意事项有哪些，下面就是实战案例，一起来看一下。

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

作用和注意事项 

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

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

可以传参进去，自己声明构造函数，赋予属性和方法

注意事项：

注意new的使用

区分与单例的区别

基本用法 
在JavaScript里，构造函数通常是认为用来实现实例的，JavaScript没有类的概念，但是有特殊的构造函数。我们通过使用new操作付，我们可以告诉javascript我们要创建的的一个新的对象并且新对象的成员都是构造函数里定义的。在构造函数里，this指向的是新创建的对象，基本语法如下：

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name;    this.output= function () {
        return this.name + ":" + this.year +"年"+ this.month+"月";
    };
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());1234567891011121314

这就是最简单的构造函数的方法，但是我们有没有发现一个问题，我们在继承的时候是不是感觉太麻烦了，所以我们可以通过原型prototype,将ouput方法添加到创建的对象上，来看下面的这一段代码

function PersonBir(name, year, month) {
    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());123456789101112

这样output单实例可以在PersonBir对象实例中共享使用，我们通过给构造函数命名时采用函数名大写来表示，以便于区分普通函数。

强制使用new操作符
对于构造函数new操作符的使用我们来看下面这些代码，我们通过判断this值的instanceof是是不是PersonBir达到强制使用new操作符，以达到目的。

function PersonBir(name, year, month) {
    //核心代码，如果为假，就创建一个新的实例返回。
    if(!(this instanceof PersonBir)){        return new PersonBir(name, year, month);
    }    this.month = month;    this.year = year;    this.name = name；
}
PersonBir.prototype.output=function(){
     return this.name + ":" + this.year +"年"+ this.month+"月";
}var ming= new PersonBir("小明", 1998, 5);var gang= new PersonBir("小刚", 2000, 4);
console.log(ming.output());
console.log(gang.output());

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

js设计模式之-单例模式的使用

前端为什么要使用模块化？

CSS的常见兼容性问题解决方案

Atas ialah kandungan terperinci JS的设计模式之构造函数模式详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!