js工厂模式、原型模式、构造模式、组合模式

目录

一、工厂模式

        优点

        缺点

        代码演示

二、构造函数模式

        优点

        缺点

        代码演示：

三、原型模式

        优点

        缺点

        代码演示

 四、组合模型

        代码演示

---

一、工厂模式

        优点

                工厂模式是为了减少重复的代码，将实例对象进行封装，避免重复代码的产生

        缺点

                创建的所有对象类型均为Object类型，没有办法知道对象到底是属于Person还是Dog

        代码演示

function newPerson(name,age,gender) {
    var p  = new Object();  //在函数里面封装对象
    p.name = name;
    p.age = age;
    p.gender = gender;
    p.sayName = function () {
        console.log(this.name);
    };
    return p;
}
var p1 = newPerson("zs",11,"女");
var p2 = newPerson("ls",17,"男");
console.log(p1);
p1.sayName();
console.log(p1.age);
console.log(p2);
p2.sayName();

function newDog(name,age,gender) {
    var d = new Object();
    d.name = name;4
    d.age = age;
    d.gender = gender;
    d.sayAge = function(){
        console.log("年龄为"+this.age);
    }
    return d;
}
var d1 = newDog('ww',20,'女');

d1.say = function(){
    console.log("hello");
}
console.log(d1);
d1.sayAge();
console.log(typeof d1);//均为object
console.log(typeof p1);//均为object

结果：

 

       

       

二、构造函数模式

        构造函数模式是为了解决工厂模式中关于对象均为object类型这个问题

        优点

                可以区分每个类

        缺点

                1.每个方法都要在实例上创建，没有必要

                2.虽然可以将方法提取出来，提取到全局范围内，然后将引用传递给对象中的函数属性，但是全局函数太多，体现不了类的封装性。             

 

        代码演示：

//将方法提取到全局范围中
function sayHi() {
    console.log("sayHi");
}


function Person(name,age,gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function () {
        console.log(this.name);
    };
    this.sayHi = sayHi;
}

var p1 = new Person("zs",15);
var p2  = new Person("ls",11,"女");
console.log(p1);
p1.sayName();
console.log(typeof p1);
console.log(p1 instanceof Object);
console.log();

 结果：

三、原型模式

每创建一个函数，内部都会有一个显性原型属性prototype，指向原型对象，原型对象也有一个constructor属性，指向函数，函数通过实例化创建对象后，这个对象内部也有一个隐性原型属性__proto__指向原型对象。该实例对象能够拥有原型对象中的所有属性和方法。

        优点

                比较适合共享的函数和共享的方法的创建

        缺点

                所有实例在默认情况下都将取得相同的属性值，这种共享对于函数来说非常合适，但是包含引用数据类型的值就不太好

        代码演示

function Person() {};
Person.prototype.name = "tom";
Person.prototype.age = "22";
Person.prototype.sayName = function () {
    console.log(this.name);
}
Person.prototype.likes = ['吃饭','读书','睡觉'];
var p1 = new Person();
console.log(p1);
p1.name = "terry";
p1.sayName = function (){
    console.log(this.name);
}
console.log(p1.likes);
p1.likes.unshift("打篮球");
console.log(p1.likes);

var p2 = new Person();
p2.name = "laola";
console.log(p2);
console.log(Person.prototype.hasOwnProperty("age"));   //true   存在于原型对象中的属性，并没有存在实例里面

结果：

 四、组合模型

组合模型是构造函数模型和原型模型的一个组合

构造函数定义实例属性，原型模型定义方法和共享属性。

        代码演示

function Person(name,age) {
    //通过构造函数存放私有属性
    this.name = name;
    this.age = age;
    this.friends = [];

}
//原型对象里面存放的是公共的属性和方法
Person.prototype = {
    //使constructor指向Person
    constructor:Person,
    sayName:function () {
        console.log(this.name);
    }
}
var p1 = new Person("zs",11);
var p2 = new Person("ls",15);
p1.friends.push("tom","lisa");
p2.friends.push("jenny,sa");
console.log(p1);
console.log(p2);

      结果：