摘要：而和的存在就是為了建立這種子類與父類間的聯系。創建一個基本對象建立新對象與原型我把它理解為類之間的連接執行構造函數小結可以理解為類，也就是存儲一類事物的基本信息。原型原型鏈和繼承之間的關系。

首先，你應該知道javascript是一門面向對象語言。

是對象，就具有繼承性。

繼承性，就是子類自動共享父類的數據結構和方法機制。

而prototype 和 __proto__ 的存在就是為了建立這種子類與父類間的聯系。

我們將prototype稱作原型，將通過__proto__來建立起來的對象與對象的關系稱作原型鏈。

下面，通過創建一個簡單對象，來探索原型和原型鏈到底是什么。

首先，創建一個最簡單的對象

function Foo(){}
var o = new Foo();

ps:這是剛從java轉入JavaScript時，最令我費解的一段代碼，憑什么一個function就可以用來創建一個對象。下面就是new 關鍵字的分解動作。。。這個關鍵字究竟做了什么，能創建一個對象。。

這個創建的過程，可以分解成下面代碼

  function Foo(){}
 // 創建一個基本對象
 var o = new Object();
 // 創建對象和父類原型之間的鏈接 
 o.__proto__ = Foo.prototype;
 // 執行構造函數
 Foo.call(o); 

為了更好的理解這段代碼，我們先理解這幾個概念

什么是構造函數constructor

構造函數就是對象創建時，自動調用的方法

prototype

prototype,長這樣

{
    constructor: f foo()
    __proto__: Object
}

它是一個對象，存儲著一類事物的基本信息，所以可以將它稱作類。

__proto__

__proto__,這個屬性用來建立對象和類之間的關系。

有了這些概念，我們來分析創建對象的過程中，究竟做了些什么.
創建一個對象，會做如下三件事。

創建一個基本對象 new Object()

建立新對象與原型(我把它理解為類)之間的連接

執行構造函數

小結：prototype可以理解為類，也就是存儲一類事物的基本信息。__proto__可以理解為一條線索，用來建立原型(類)和對象之間的關系。

繼承，需要滿足如下三個要求。

子類繼承父類的成員變量

子類繼承父類的方法

子類繼承父類的構造器，如果父類的構造函數帶有參數，那么子類中應該顯示調用

我們該如何實現繼承呢？

// 創建一個構造函數，我認為 a.prototype就是父類對象。
function a(x,y) {
    a.prototype.x = x;
    a.prototype.y = y
}
// 為父類對象添加一個method 
a.prototype.console = function() {
    console.log(this.x);
    console.log(this.y);
}
//創建子類構造函數
function b(x,y) {
    // 子類顯示的調用父類構造方法
    a.call(this,x,y);
}
// 子類繼承父類的成員變量以及父類的方法
b.prototype = Object.create(a.prototype); = b.prototype.constructor = b;
// 創建對象
var c = new b(1,2);

 // 這里Object.create 是用來創建一個新的prototype，用來記錄新類的信息,并與父類建立聯系
 Object.create = function() {
  //創建一個基本對象
  var temp = new Object();
  //與父類的的原型建立聯系
  temp.__proto__ = proto;
  //返回新類的原型
  return temp;
 }

小結：繼承關系的實現，做了如下兩件事情

子類顯示的調用父類的構造函數

子類通過原型來與父類建立聯系，從而能讓子類擁有父類的成員變量和方法。

原型就是類，原型鏈就是來建立子類和父類之間的聯系。

先創建一個類

function people() {}
// 為父類對象添加一個method
people.prototype.run = function() {
   console.log("I am running");
}

通過類來創建一個對象

var p = new people();
p.run();
// i am running

這里p對象長這樣

{
__proto__: Object
}

很顯然，這個對象之中并沒有run方法。

但是它卻能調用run，因為它會通過__proto__(原型鏈)來尋找類中的方法。

我想看到這里，你應該很明白了。

prototype 一個存儲類信息的對象，只存在function中.(下圖中綠塊)

proto 單純是對象用來指向上級的一鏈接。(看下圖黃線)

那么又有人會問function中__proto__又是什么關系呢？

function 本身是對象，所以當然也有自己原型。function繼承于Function.(看下圖藍線)。

下面介紹一下原型繼承和類繼承的關系。

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

ES5

"use strict";

/**
 * Shape class.
 * 
 * @constructor
 * @param {String} id - The id.
 * @param {Number} x  - The x coordinate.
 * @param {Number} y  - The y coordinate.
 */
function Shape(id, x, y) {
    this.id = id;
    this.setLocation(x, y);
}

/**
 * Set shape location.
 * 
 * @param {Number} - The x coordinate.
 * @param {Number} - The y coordinate.
 */
Shape.prototype.setLocation = function(x, y) {
    this.x = x;
    this.y = y;
};

/**
 * Get shape location.
 * 
 * @return {Object}
 */
Shape.prototype.getLocation = function() {
    return {
        x: this.x,
        y: this.y
    };
};

/**
 * Get shape description.
 * 
 * @return {String}
 */
Shape.prototype.toString = function() {
    return "Shape("" + this.id + "")";
};

/**
 * Circle class.
 * 
 * @constructor
 * @param {String} id     - The id.
 * @param {Number} x      - The x coordinate.
 * @param {Number} y      - The y coordinate.
 * @param {Number} radius - The radius.
 */
function Circle(id, x, y, radius) {
    Shape.call(this, id, x, y);
    this.radius = radius;
}
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;

/**
 * Get circle description.
 * 
 * @return {String}
 */
Circle.prototype.toString = function() {
    return "Circle > " + Shape.prototype.toString.call(this);
};

// test the classes
var myCircle = new Circle("mycircleid", 100, 200, 50); // create new instance
console.log(myCircle.toString()); // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()); // { x: 100, y: 200 }

ES6

"use strict";

/**
 * Shape class.
 * 
 * @constructor
 * @param {String} id - The id.
 * @param {Number} x  - The x coordinate.
 * @param {Number} y  - The y coordinate.
 */
class Shape(id, x, y) {
    constructor(id, x, y) { // constructor syntactic sugar
        this.id = id;
        this.setLocation(x, y);
    }
    
    /**
     * Set shape location.
     * 
     * @param {Number} - The x coordinate.
     * @param {Number} - The y coordinate.
     */
    setLocation(x, y) { // prototype function
        this.x = x;
        this.y = y;
    }
    
    /**
     * Get shape location.
     * 
     * @return {Object}
     */
    getLocation() {
        return {
            x: this.x,
            y: this.y
        };
    }
    
    /**
     * Get shape description.
     * 
     * @return {String}
     */
    toString() {
        return `Shape("${this.id}")`;
    }
}

/**
 * Circle class.
 * 
 * @constructor
 * @param {String} id     - The id.
 * @param {Number} x      - The x coordinate.
 * @param {Number} y      - The y coordinate.
 * @param {Number} radius - The radius.
 */
function Circle extends Shape {
    constructor(id, x, y, radius) {
        super(id, x, y); // call Shape"s constructor via super
        this.radius = radius;
    }
    
    /**
     * Get circle description.
     * 
     * @return {String}
     */
    toString() { // override Shape"s toString
        return `Circle > ${super.toString()}`; // call `super` instead of `this` to access parent
    }
}

// test the classes
var myCircle = new Circle("mycircleid", 100, 200, 50); // create new instance
console.log(myCircle.toString()); // Circle > Shape("mycircleid")
console.log(myCircle.getLocation()); // { x: 100, y: 200 }

這段代碼，自己體會。。。。