JS中实现面向对象的设计模式

工厂模式
用函数封装以特定接口创建对象。其实现方法非常简单，也就是在函数内创建一个对象，给对象赋予属性及方法再将对象返回即可。

function createBlog(name, url) {
  **var o = new Object();**
  o.name = name;
  o.url = url;
  o.sayUrl= function() {
    alert(this.url);
  }
  return o;
}
var blog1 = createBlog('wuyuchang', 'http://www.jb51.net/');

缺点： 工厂模式却无从识别对象的类型，因为全部都是Object

---

构造函数模式(方法和属性全都写在构造函数中）
特点：
函数名首写字母为大写（惯例）
没有显示的创建对象
直接将属性和方法赋值给了this对象
没有return语句
使用new创建对象
能够识别对象（这正是构造函数模式胜于工厂模式的地方）

function Blog(name, url) {
  **this**.name = name;
  **this**.url = url;
  **this**.alertUrl = function() {
    alert(this.url);
  }
}
var blog = new Blog('wuyuchang', 'http://www.jb51.net/');
console.log(blog instanceof Blog); // true， 判断blog是否是Blog的实例，即解决了工厂模式中不能

缺点:每次创建实例的时候都要重新创建一次方法

---

原型模式（方法和属性全都写在原型中）

function Blog() {
}

**Blog.prototype.name** = 'wuyuchang';
**Blog.prototype.url** = 'http://tools.jb51.net/';
**Blog.prototype.friend** = ['fr1', 'fr2', 'fr3', 'fr4'];
**Blog.prototype.alertInfo** = function() {
  alert(this.name + this.url + this.friend );
}

// 以下为测试代码
var blog = new Blog(),blog2 = new Blog();
blog.alertInfo(); // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4
blog2.alertInfo(); // wuyuchanghttp://tools.jb51.net/fr1,fr2,fr3,fr4

blog.name = 'wyc1';
blog.url = 'http://***.com';
blog.friend.pop();
blog2.name = 'wyc2';
blog2.url = 'http://+++.com';
blog.alertInfo(); // wyc1http://***.comfr1,fr2,fr3
blog2.alertInfo(); // wyc2http://+++.comfr1,fr2,fr3

缺点：
1.省略了构造函数传递初始化参数这一环节，结果所有实例在默认情况下都取得了相同的属性值，这样非常不方便
2.由于共享，因此因此一个实例修改了引用，另一个也随之更改了引用。

---

混合模式（原型模式 + 构造函数模式）
混合模式中构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性。每个实例都会有自己的一份实例属性，但同时又共享着方法，最大限度的节省了内存。另外这种模式还支持传递初始参数。优点甚多。这种模式在ECMAscript中是使用最广泛、认同度最高的一种创建自定义对象的方法。

function Blog(name, url, friend) {
  **this**.name = name;
  **this**.url = url;
  **this**.friend = friend;
}

**Blog.prototype.alertInfo** = function() {
  alert(this.name + this.url + this.friend);
}

var blog = new Blog('wuyuchang', 'http://tools.jb51.net/', ['fr1', 'fr2', 'fr3']),
  blog2 = new Blog('wyc', 'http://**.com', ['a', 'b']);

blog.friend.pop();
blog.alertInfo(); // wuyuchanghttp://tools.jb51.net/fr1,fr2
blog2.alertInfo(); // wychttp://**.coma,b

---

动态原型模式（原型写在构造函数中，通过条件判断是否初始化原型）

function Blog(name, url) {
  this.name = name;
  this.url = url;

  **if** (typeof this.alertInfo != 'function') {
    // 这段代码只执行了一次
    alert('exe time');
    **Blog.prototype.alertInfo** = function() {
      alert(thia.name + this.url);
    }
  }
}
var blog = new Blog('wuyuchang', 'http://tools.jb51.net'),
  blog2 = new Blog('wyc', 'http:***.com');

---

相关参考：

JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)