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

一、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
原文地址:https://www.cnblogs.com/wangbinweb/p/5613981.html