当我刚开始接触Javascript的时候，因为它函数式脚本语言特性以及看似随意的编写风格，让像我这种只用过Java和C#程序员耳(yi)目(lian)一(meng)新(bi)，那时候用的最多的就是alert，囧。这些年Web大行其道，各种应用对Javascript的依赖日深。有大量优秀的javascript框架可以让我们快速开发web应用，实际上对原生javascript却知之甚少。所以经常出现做了多年JS开发的程序员，对this，闭包，原型这些javascript基础知识总是说不清楚的情况。
写这篇文章的目的，是为了帮助像我这样使用过JS框架但是对Javascript面向对象一知半解的程序员能够对javascript的面向对象有个清晰的认识。
什么是面向对象
大家都知道JavaScript是面向对象的程序语言，但是又与一般的基于类的面向对象语言不同。
ECMA-162把对象定义为：“无序属性的集合，其属性可以包含基本值、对象或是函数。”
理解对象
最基本的面向对象
创建自定义对象最简单的方式就是创建一个Object实例，然后再为它添加属性和方法。
var person = new Object();
person.name = 'Danny';
person.age = 18;
person.sayName = function() {
console.log('Hi, I am '+this.name);
}
前面的例子也可以字面量声明(literral notation)的方式创建
var person = {
name = 'Danny',
age = 18,
sayName = function() {
console.log('Hi, I am '+this.name);
}
}
在实际的开发过程中，我们用上面两种创建对象的方式就能满足基本的开发需求了。
工厂模式
虽然Object构造函数和字面量都可以创建单个对象，但是这样的代码复用性太差，为解决这个问题，人们开始引用工厂模式。工厂模式抽象了创建具体对象的过程。
function createPerson(name,age) {
var o = new Object();
o.name = name;
o.age = age;
o.sayName = function() {
console.log('Hi, I am ' + this.name);
}
return o;
}
createPerson函数根据传来的参数创建一个新的Person对象。这样，每当我们需要一个Person的时候，传入相应的参数就可以了，不用再像之前那样每次都要重写相似的代码。
构造函数模式
ECMAScript允许通过构造函数来创建对象。
function Person(name,age) {
this.name = name;
this.age = age;
this.sayName = function() {
console.log('Hi, I am ' + this.name);
}
}
var p1 = new Person('Danny',18);
这个Person函数和之前createPerson函数有相似的地方，比如都添加了两个属性一个方法，我们重点看看他们不同的地方：
- 没有显式地创建对象
- 直接降属性和方法赋给了this对象
- 没有return语句
要创建Person的实例，必须使用new操作符。大家在这里不要和Java或是C#的new操作符弄混了，虽然看上去它们创建对象的方式很类似，但是它们的实现原理完全不一样，这块有机会会单独写篇文章来说。插句话，Javascript最开始叫livescript，感觉自己不够响亮，为了和当时非常火的Javas（1995年的时候）拉上关系才改的名字，实际上它们的关系就好像阿迪王和阿迪达斯。我们看看在Javascirpt中new操作符实际做了啥：
- 创建一个新对象
- 将构造函数的作用域赋给新对象（所以this就指向了这个新对象）
- 执行构造函数中的代码
- 返回新对象
将构造函数当做函数
这时候大家就会问这个构造函数和其他的函数有啥区别呢？答案是没啥区别，构造函数没有任何特殊的语法。任何函数，只要用new操作符来调用，就可以当做构造函数；如果不用new操作符来调用，那它就是个普通的函数。像前面的Person函数，如果我们在全局作用域中调用它，this对象指向全局对象，在浏览器中就会给window对象添加name和age属性，以及sayName方法。
构造函数的问题
构造函数虽然好，但是也有自身的问题，就是每个方法都要在实例中重新创建一遍。然而，创建两个完成同样功能的方法实例是没有必要的。好在这个问题可以通过原型模式解决。
原型模式
我们创建的每个函数都有一个prototype(原型)属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有势力共享的属性和方法，这个对象称为原型对象，简称原型。
理解原型对象
function Person(){
};
Person.prototype.name = "Danny";
Person.prototype.sayName = function () {
console.log(this.name);
}
在默认情况下，所有原型对象都会自动获得一个contructor(构造函数)属性，指向prototype属性所在的函数。如上图。
每个由构造函数创建的实例都拥有一个指向构造函数propotype属性的指针，换句话说就是指向构造函数原型的指针。ECMA-262把这个指针叫[[Prototype]]，在脚本中没有标准的方式访问[[Prototype]]，但是FireFox, Safari和Chrome在每个对象上都支持一个属性proto。我们需要反复强调的就是，这个连接存在于实例和构造函数的原型对象之间，而不是实例与构造函数之间。
var person1 = new Person();
var person2 = new Person();
person1.sayName(); //Danny
person2.sayName(); //Danny
上图展示了Person构造函数、Person的原型对象以及Person两个实例之间的关系。虽然这两个实例没有任何属性和方法，但是可以通过搜索对象的过程来实现。每当代码读取某个对象的某个属性时，搜索首先从对象实例本身开始；如果找到则返回；如果没有，则搜索[[Prototype]]指向的原型对象，如果找到则返回。所以，我们在调用person1.sayName的时候就会执行两次搜索，调用person2.sayName的时候，会执行同样的搜索过程，得到同样的结果。这也正是多个对象实例共享原型所保存的属性和方法的基本原理。
我们可以通过对象实例访问在原型中的值，但是不能通过对象实例重写原型中的值。当我们在对象实例中创建了一个属性与原型中的属性同名是，实例中的属性会屏蔽原型中的属性。
var person1 = new Person();
var person2 = new Person();
person1.name = 'Eric';
person1.sayName(); //Eric
person2.sayName(); //Danny
在上面的代码中，person1添加了一个name属性，这个name属性会屏蔽实例的name属性。所以我们看到的结果，“Eric”来自实例，“Danny”来自原型。
更简单的原型语法
为了简单我们也可以用字面量的方式重写原型对象。
function Person(){
};
Person.prototype = {
name : "Danny",
sayName : function () {
console.log(this.name);
}
}
在上面的代码中，我们实际上将Person.prototype设置为一个以对象字面量方式创建的新对象。最终的结果相同，但是有一个例外：constructor属性不再指向Person了。我们前面说过，在默认情况下，所有原型对象都会自动获得一个contructor(构造函数)属性，指向prototype属性所在的函数。那constructor现在指向的是什么呢？
我们看到指向的是Object的构造函数。为啥是这样呢？我们知道字面量等同于下面的方式。
var person = new Object();
person.name = 'Danny';
person.age = 18;
person.sayName = function() {
console.log('Hi, I am '+this.name);
}
也就是说Person.prototype的构造函数是Object，Person.prototype的[[Prototype]]指向了Object构造函数的prototype，关系如下图：
如果constructor的值很重要的话，可以通过下面的方式设置回适当的值。
Person.prototype = {
constructor:Person,
name : "Danny",
sayName : function () {
console.log(this.name);
}
}
原型的动态性
由于在原型中查找值得过程试一次搜索，因此我们对原型对象所做的任何修改都能够立即从实例上反映出来。
function Person(){
};
var person1 = new Person();
Person.prototype.sayHi = function () {
console.log('Hi');
};
person1.sayHi(); //Hi
上面的代码先创建了一个Person的实例person1，然后给Person.prototype添加了一个sayHi的方法。person1虽然是在添加新方法之前创建的，但是仍然可以调用sayHi这个方法。原因是当我们调用person1.sayHi方法时，首先在person1实例中查找，当没有找到时，就会继续搜索原型。由于实例和原型之间的连接是一个指针，而不是副本，所以原型的变化随时都可以在实例中反映出来。
我们再来看看下面的例子：
function Person(){
};
var person1 = new Person();
Person.prototype = {
constructor: Person,
name: "Danny",
age: 18,
sayName: function() {
console.log(this.name);
}
};
person1.sayName(); \\error: person1.sayName is not a function
上面执行person1.sayName()时会报错。因为调用构造函数时会为实例添加一个指向最初原型的[[Prototype]]指针，而把原型修改为另外一个对象就等于切断了构造函数与最初原型之间的联系。
原型对象的问题
原型对象也不是没有缺点。
- 它省略了为构造函数传递参数这一环节。
- 原型中所有属性都是共享的，而现实中原型想要有属于自己的属性。
这些问题似的我们很少看到有人单独使用原型模式。
组合使用构造函数模式和原型模式
很好理解，构造函数模式用于定义实例属性，而原型模式用于定义方法和共享的属性。这种组合模式也支持想构造函数传递参数，可谓是集两种模式之长。
function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
console.log(person1.friends); //"Shelby,Count,Van"
console.log(person2.friends); //"Shelby,Count"
console.log(person1.friends === person2.friends); //false
console.log(person1.sayName === person2.sayName); //true
这种组合模式是ECMAScript中使用最广泛，认同度最高的一种创建自定义类型的模式。
动态原型模式
有其他OO语言经验的开发人员在看到独立的构造函数和原型时，很可能会感到非常困惑。动态原型模式正是为了解决这个问题的一个方案，它把所有信息都封装在了构造函数中，在构造函数中初始化原型。我们用动态原型模式改造一下之前的代码。
function Person(name,age,job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
if(typeof this.sayName != "function"){
Person.prototype.sayName = function() {
console.log(this.name);
}
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
console.log(person1.friends); //"Shelby,Count,Van"
console.log(person2.friends); //"Shelby,Count"
console.log(person1.friends === person2.friends); //false
console.log(person1.sayName === person2.sayName); //true
使用动态原型时，不能使用对象字面量重写原型，这个原因前面说过了。
