js设计模式：工厂模式构造函数模式原型模式混合模式

Posted 2020-07-29

一、js面向对象程序

var o1 = new Object();

    o1.name = "宾宾";

    o1.sex = "男";

    o1.age = "27";

o1.msg = function(){

    console.log("姓名："+this.name+"  性别："+this.sex+"  年龄："+this.age);

}

 

var o2 = new Object();

    o2.name = "倩倩";

    o2.sex = "女";

    o2.age = "20";

o2.msg = function(){

    console.log("姓名："+this.name+"  性别："+this.sex+"  年龄："+this.age);

}

//调用对象下面方法

o1.msg();

o2.msg();

//思考：如何让代码复用。

//为了解决这个，引用一种设计模式：工厂模式。就是在函数内部创建一个对象，给对象赋予属性和方法，在将对象返回即可。

 

二、 工厂模式

//工厂模式是软件工程领域一种广为人知的设计模式，而由于在ECMAScript中无法创建类，因此用函数封装以特定接口创建对象。其实现方法非常简单，也就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。

function Person(name,sex,age){

    var o = new Object();

        o.name = name;

        o.sex = sex;

        o.age = age;

    o.getName = function () {

        console.log(this.name);

    }

    o.msg = function(){

        console.log("姓名："+this.name+"  性别："+this.sex+"  年龄："+this.age);

    }

    return o;

}

var person1 = Person("彬彬","男","26");

//var myArray=new Array()；

var person2 = Person("倩倩","女","26");

person1.msg();

person1.getName();

person2.msg();

//思考：我们创建的对象和系统对象有什么区别？？

//为了解决这个：我们需要在外面new一个函数就可以了，这就引出了js另一种设计模式：构造函数模式

 

三、构造函数模式

//此模式特点：当new去调用一个函数，这个时候函数里面的this就是创建出来的对象，而且函数返回值直接就是this，这就叫隐式返回

function Person(name,sex,age){

    this.name = name;

    this.sex = sex;

    this.age = age;

    this.getName = function () {

        console.log(this.name);

    }

    this.msg = function(){

        console.log("姓名："+this.name+"  性别："+this.sex+"  年龄："+this.age);

    }

}

var person1 = new Person("彬彬1","男","26");

var person2 = new Person("倩倩1","女","26");

person1.msg();

person1.getName();

person2.msg();

console.log(person1.msg == person2.msg);//false

//思考：如何在提供性能？？也就是让公用的属性和方法在内存中只存在一份？？

//解决问题方法：这里用到js设计模式中另外一种模式：原型模式。就是将公用的属性和方法加载在原型上（prototype）。

 

 

四、js原型模式

//原型（prototype）要写在构造函数下面。

//原型相当于CSS中Class,普通方法和属性相当于标签元素里的style。所以原型的优先级要普通方法和属性。

function Person(){

}

Person.prototype.name = "彬彬";

Person.prototype.sex = "男";

Person.prototype.age = "10";

Person.prototype.msg = function(){

    console.log("姓名："+this.name+"  性别："+this.sex+"  年龄："+this.age);

}

var person1 = new Person();

person1.msg();

var person2 = new Person();

person2.name = "晃晃";

person2.msg();

//思考：这种修改属性比较麻烦？？？

//解决问题方法：把属性写在构造函数内，方法采用原型模式写，着就叫JS混合的模式

 

 

五、构造函数+原型的js混合的模式（推荐）

function Person(name,sex,age){

    this.name = name;

    this.sex = sex;

    if(age){

        this.age = age; //优先级高于原型

    }

}

Person.prototype.age = 10;

Person.prototype.getName = function(){

    console.log(this.name);

}

Person.prototype.msg = function(){

    console.log("姓名："+this.name+"  性别："+this.sex+"  年龄："+this.age);

}

var person1 = new Person("彬彬1","男",80);

var person2 = new Person("倩倩1","女");

person1.msg();

person1.getName();

person2.msg();

console.log(person1.msg == person2.msg);//true