JavaScript设计模式

1. 最初

var person = new Object();
person.name = "vino24";
person.age = 22;
person.job = "FE Engineer";

person.sayName = function() {
    alert(this.name);
}

缺陷：

创建很多对象时，会产生大量重复代码

2. 工厂模式

抽象出创建具体对象的过程，在JavaScript中以函数来封装特定接口创建对象的细节。

function createPerson(name,age,job) {
var o= new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function() {
    alert(this.name);
};
return o;
}

var person1=createPerson("vino24",22,"FE");
person1.sayName();

缺陷：

没有解决对象识别的问题

3. 构造函数模式

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName=function() {
        alert(this.name);
    };
} 

var person1 = new Person("vino24",22,"FE");
person1.sayName();

· 构造函数模式与工厂模式区别：

没有显式的创建对象
直接将属性方法赋值给了this对象
没有return语句

使用new操作符创建对象的过程：

创建一个新对象
将构造函数的作用于赋值给新对象（this便指向了新对象）
执行构造函数中的代码（为新对象添加属性）
返回新对象

· 缺陷：

构造函数中的方法都要在每个实例上创建一遍

4.原型模式

function Person() {
}

Person.prototype = {
constructor:Person,
name:"vino24",
age:22;
job:"FE",
sayName:function() {
    alert(this.name);
    }
};

var person1=new Person();
Person.sayName();

缺陷：

所有的实例都会共享其属性和方法

5.组合使用构造函数模式和原型模式

构造函数用于定义实例属性，而原型模式用于定义方法和共享属性

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.friends = ["vino","kobe"];
}

Person.prototype = {
    constructor : Person,
    sayName : function() {
        alert(this.name);
    }
}

var Person1 = new Person("vino24",22,"FE");

6.动态原型模式

function Person(name,age,job) {
    this.name = name;
    this.age = age;
    this.job = job;

    if(typeof this.sayName != "function") {
        Person.prototype.sayName = function() {
            alert(this.name);
        };
    }
}

zoumiaomiao

公告