深入理解：JavaScript原型与继承

深入理解：JavaScript原型与继承

看过不少书籍，不少文章，对于原型与继承的说明基本上让人不明觉厉，特别是对于习惯了面向对象编程的人来说更难理解，这里我就给大家说说我的理解。

首先JavaScript是一门基于原型编程的语言，它遵守原型编程的基本原则：

1. 所有的数据都是对象（javascript中除了字符串字面量、数字字面量、true、false、null、undefined之外，其他值都是对象！）

2. 要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它（new操作符）

3. 对象会记住它的原型（JavaScript中通过隐藏的__proto__属性）

4. 如果对象无法响应某个请求，它会把该请求委托给它自己的原型

这么说来，JavaScript一定有一个根对象，所有的对象的最终原型都将是它，它就是Object.prototype（有的人说跟对象是null，因为Object.prototype.__proto__为null），Object.prototype也是一个对象，它是一个空的对象。（记住一点：所有的原型都是对象，但不是函数，虽然函数也是对象，Object其实就是一个函数，而Object.prototype是一个对象）

以下代码创建空对象：

var obj1 = new Object();
var obj2 = {};
Object.getPrototypeOf(obj1) === Object.prototype; //true
Object.getPrototypeOf(obj2) === Object.prototype; //true

我们再来看下以下代码：

function Book(name){
    this.name = name;
}
Book.prototype.getName = function(){
    return this.name;
}
Book.num = 5;
var book1 = new Book('javascript');
book1.getName(); //javascript
Object.getPrototypeOf(book1) === Book.prototype; //true

我们通常说，使用了new Book()来创建了Book的实例book1，但是JavaScript并没有类的概念，这里的Book本质上只是一个函数而已，如果用new则把它当着构造函数对待，那么var book1 = new Book('javascript)是怎么个执行过程呢？在这之前，我们来先看下Function与Object的关系

这里有张图：来源于javascriptcn

Function与Object的关系

console.log(Function); //Function 函数
console.log(Function.constructor); //Function 函数
console.log(Function.__proto__); //function(){} 空函数
console.log(Function.__proto__.__proto__);//{} 空对象，即Object.prototype
console.log(Function.prototype); //function(){} 空函数
console.log(Function.constructor.prototype); //function(){} 空函数

console.log(Object); //function Object(){[native code]} Object是个函数
console.log(Object.__proto__); //function(){} 空函数
console.log(Object.prototype); //{} 空对象
console.log(Object.constructor); //Function 函数
console.log(Object.constructor.prototype); //function(){} 空函数

以上测试说明什么？

1. 说明了内置函数Function以它自身为构造函数，且以它自身为原型，这个原型是个空函数；

2. Object是个函数，Object是以内置函数Function为构造函数的，它自己的原型Object.prototype是个空对象

我总结了这么个东西：在JavaScript中，最原始的东西有两个，就是function(){}空函数 和 {}空对象，但它们都有内置的属性、方法，所有的JS对象都是基于它们创建出来的；

Function和Object就像是女娲和伏羲，Object提供种子(Object.prototype)，Function负责繁衍(Function.prototype)。Object的实例是由Object.prototype提供的种子经过Function.prototype(function(){} 空函数)打造出来的。Object.prototype这个基因会被一直继承下去，并一代一代增强。

1. 每一个函数都有一个原型对象(prototype)和隐藏的__proto__属性，函数的__proto__属性指向Function.prototype，而原型对象(prototype)是一个对象，符合以下第2点(也有构造函数constructor和隐藏的__proto__属性)；

2. 每一个对象都有一个构造函数(constructor)和隐藏的__proto__属性，constructor自然指的是它的构造函数，而__proto__指向的是它的构造函数的原型对象prototype，而对象的原型prototype对象同时又包含了该对象构造函数、还具有自己的__proto__属性；

3. 通过__proto__属性，每个对象和函数都会记住它的原型，这样就形成了原型链；

console.log(Book); //Book函数自身
console.log(Book.__proto__); //function(){} 空函数
console.log(Book.prototype); //Book的原型对象，包含了构造函数constructor、__proto__
console.log(Book.prototype.__proto__); //{} 等于Object.prototype
console.log(Book.prototype.constructor); //Book函数自身

console.log(Book.constructor); //Function函数
console.log(Book.constructor.prototype); //function(){} 空函数（Function函数的原型）
console.log(Book.__proto__.__proto__); //{} 等于Object.prototype

每一个函数都是通过Function构造出来的，函数的原型属性__proto__指向Function.prototype，而函数的原型对象prototype是代表着自身的对象，它的__proto__属性指向Object.prototype，它的constructor属性默认指向它自己构造函数(也可改为别的函数，如：Book.prototype.constructor = Person;)。

console.log(book1); //Book { name: 'javascript' }
console.log(book1.__proto__); //指向Book.prototype对象
console.log(book1.prototype); //undefined
console.log(book1.constructor); //指向Book函数
console.log(book1.constructor.prototype); //Book.prototype对象

所以，我们通常说‘一个对象的原型’其实是不准确的，应该是‘一个对象的构造器的原型’，且对象是把它无法响应的请求委托给它的构造器的原型顺着原型链往上传递的。

现在来讲解一下var book1 = new Book('javascript)的执行过程，是这样：new先通过Function.prototype从Object.prototype克隆一个空对象，然后将空对象的构造函数constructor指定为Book，并将该空对象的__proto__属性指向它的构造函数的原型Book.prototype，之后通过Book构造函数对这个空对象进行赋值操作，最后将这个对象返回给变量book1。

我们再看如下代码：

var obj = {name: 'Sufu'};
var Person = function(){};
Person.prototype = obj;
var a = new Person();
console.log(a.name); //Sufu

这段是这样执行的：

1. 首先尝试查找对象a的name属性，找不到，执行第2步

2. 将查找name属性的这个请求委托给a的构造器的原型，a.__proto__记录的是Person.prototype，Person.prototype.__proto__记录的是obj

3. 在对象obj中查找name，找到并返回它的值给a，假如还找不到，它就通过obj.__proto__找到Object.prototype，而Object.prototype.__proto__为null，所以找不到就返回undefined。

总之，对象、函数都有一个隐藏的__proto__属性，这个属性就是原型链上的环，一环扣一环，从而形成了原型链！

好了，就介绍到这里了，以上是个人的理解，有不对的地方欢迎指出！