JavaScript设计模式

原文地址：https://github.com/vino24/blog/issues/88

1. 最初

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

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

缺陷：

2. 工厂模式

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);
};
}
}