JS原型鏈

一. JS原型的簡單理解

1.1 prototype

prototype:是一個函數的屬性，每一個函數中都會有一個prototype屬性，這個屬性是一個指針，指向一個對象。在JavaScript中原型是一個prototype對象，用於表示類型之間的關係。

1.1.1 prototype定義

每一個函數都有一個prototype屬性，這個屬性是指向一個對象的引用，這個對象稱爲原型屬性。

function Person() {}
      var p = new Person();

1.1.2 prototype 做用

原型對象包含實例共享的方法和屬性，這個函數用做構造函數時調用，使用new操做符調用的時候，新建立的對象會從原型對象上獲得一樣的屬性和方法。
原型做用之一:數據共享,節省內存空間
原型做用之二:爲了實現繼承

1.2 _proto_

proto:是一個對象擁有的內置屬性，是js內部使用尋找原型鏈的屬性，經過該屬性能夠容許使用實例對象直接訪問原型。
注意，prototype是函數的內置屬性，__proto__是對象的內置屬性

function Person() {}
     var p = new Person();
  // 之前不能直接使用 p直接訪問對象原型
  // 如今有了 __proto__ 後
  // p.__proto__ 也能夠直接訪問對象原型
  // 那麼 p.__proto__ === Person.prototype

1.2.1. _proto_ 有什麼用?

• 能夠訪問原型
• 因爲在開發中除非特殊要求, 不要使用實例去修改原型的成員. 所以屬性開發時使用較少
• 調試過程當中很是方便, 能夠輕易的訪問原型進行查當作員

1.3. constructor

constructor：屬性返回對建立此對象的函數的引用。(指向原型對象的構造函數)

二. 原型鏈

2.1 什麼是原型鏈？

原型鏈就是實例對象和原型對象之間的關係，他們使用__proto__來關聯。
圖解：

分析： a._proto_ ==Funciton構造函數的原型對象，其實原型對象也是一個實例化對象，既然是對象，那麼他就是用Object來建立的， 既 var obj = new Object();因此Functionde的原型對象._proto_ = = Object構造函數的原型對象

2.2 原型對象是否能夠改變

看下面的圖文解讀：

function Person(name,age){
            this.name = name;
            this.age = age;
        };
        Person.prototype = {
                run:function(){
                    console.log("天天堅持鍛鍊");
                }
        };
        var person1 = new Person("Tom",20);
        person1.run();// 輸出天天堅持鍛鍊身體

很顯然，構造函數的原型對象是能夠進行改變的，改變以後，當實例化對象時，它的原型對象就是構造函數新指向的對象。

三. 繼承

3.1 什麼是繼承？

繼承是一種關係,類(Class)與類之間的關係,JS中沒有類,可是能夠經過構造函數模擬類,而後經過原型來實現繼承。繼承是爲了數據共享,js中的繼承也是爲了實現數據共享
eg：構建一個類是"人"，他有姓名，性別，年齡等屬性和方法，再構建一個學生類，他能夠繼承人的姓名，性別年齡等屬性，而且他還有屬於他本身的方法，好比：學習行爲。看下面代碼：

//定義一我的的類別
        function Person (name,age,sex) {
            this.name = name;
            this.age = age;
            this.sex = sex;
        }
        Student.prototype = new Person("Tom",20,"man");
        //定義一個學生類別
        function  Student(){
                this.s =  function(){
                console.log("學生的天職就是學習");
            }
        }
        //實例化一個學生對象
        var student = new Student();
        student.s();// 學生的天職就是學習
        console.log(student.name);// Tom
        console.log(student.age);// 20
        console.log(student.sex);// man

分析： 實例化學生的對象繼承了 Student對象的 方法，而且繼承了 Person 對象的姓名，年齡，性別 屬性。這就是繼承。

3.2 實現繼承的兩種方式

3.2.1 改變原型對象的指向實現繼承

看下面的圖文詳解

// 建立一個動物類別
        function  Animal (weight,color) {
            this.weight = weight;
            this.color = color;
        };
        // 建立一個狗類
        function Dog(){
            this.bite = function (){
                console.log("咬人");
            };
        };
        Dog.prototype = new Animal("25kg","white");
        //建立一個二哈(狗的品種)類
        function Erha(){
            this.sayHello = function(){
                console.log("二哈是咱們的好朋友，可是讓人討厭的是它會拆家！");
            }
        }
        Erha.prototype = new Dog();
        // 實例化一個對象
        var dog = new Erha();
        dog.bite();// 咬人
        dog.sayHello();// 二哈是咱們的好朋友，可是讓人討厭的是它會拆家！
        console.log(dog.weight);// 25kg
        console.log(dog.color);//white

分析：首先建立一個Animal構造函數，裏面有兩個屬性，而後在建立一個Dog構造函數，並改變Dog構造函數的原型對象 既 Dog.prototype = new Animal("25kg","white"); 最後建立Erha對象，再次改變Erha的原型對象，
Erha.prototype = new Dog(); 實例化一個對象，這時。這個實例化的對象就擁有了Animal的屬性和方法，包括Dog的屬性和方法，這就實現了繼承，

缺陷： 若是實例化出來的對象，那麼它的屬性初始化值都是同樣的。

3.2.2 改變 this 指向實現繼承

// 建立Person類
        function  Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 建立原型對象
        Person.prototype.run = function(){
            console.log("天天堅持鍛鍊");
        }
        // 建立Studet 構造函數
        function Student(name,age,sex,score){
            // call函數就是改變執行代碼片斷中this指向。
            // this指的是當前函數
            Person.call(this,name,age,sex);
            this.score = score;
            this.study = function(){
                console.log("學生的天職就是學習");
            }
        };
        // 改變Student的原型對象，下面這句代碼很重要，若是沒有這句代碼會出現不能繼承父類原型對象的方法，這也是改變this指向繼承的缺陷，因此咱們能夠採用兩中模式共存的思想進行繼承。
        Student.prototype = new Person();
        var stu1 = new Student("Tom",19,"man",80);
        stu1.run();// 天天堅持鍛鍊
        console.log(stu1.name);// Tom
        console.log(stu1.age);// 19
        console.log(stu1.sex);// man
        console.log(stu1.score);// 80

分析：其實這個很簡單，只要你明白this的指向就好明白了，this的指向見個人另外一篇文章 Js面向對象第六小結。先分析這個，首先建立類我就不說了，直接說這個this指向問題，這裏小編用了一個call()方法，call函數可以改變代碼片斷的this指向，本例中this指向爲當前函數，Person(this,name,age,sex)===this.name = name; this.age = age;this.sex = sex; 這下是否是明白了

補充： apply 函數，這個函數也能夠實現改變this指向來完成繼承，見下面的代碼：

// 建立Person類
        function  Person(name,age,sex){
            this.name = name;
            this.age = age;
            this.sex = sex;
        };
        // 建立原型對象
        Person.prototype.run = function(){
            console.log("天天堅持鍛鍊");
        }
        // 建立Studet 構造函數
        function Student(name,age,sex,score){
            // call函數就是改變執行代碼片斷中this指向。
            // this指的是當前函數
            Person.apply(this,[name,age,sex]);
            this.score = score;
            this.study = function(){
                console.log("學生的天職就是學習");
            }
        };
        // 改變Student的原型對象
        Student.prototype = new Person();
        var stu1 = new Student("Tom",19,"man",80);
        stu1.run();// 天天堅持鍛鍊
        console.log(stu1.name);// Tom
        console.log(stu1.age);// 19
        console.log(stu1.sex);// man
        console.log(stu1.score);// 80

這裏只改變一句代碼： Person.apply(this,[name,age,sex]);
很明顯能夠看出，apply和call的區別就是 參數問題，apply的第二個參數爲數組，而call爲數據

補充： bind函數

bind的做用是將函數複製一份而且改變函數中的this, 而且返回這個函數。

見下面的代碼分析：

function Person(name,age){
            this.name = name;
            this.age = age;
            this.run = function(){
                console.log(this.age);
            }
        }
        var p1 = new Person("Tom",15);
        var p2 = new Person("Jack",19);
        p1.run.bind(p2)();// 19

分析：使用bind函數時會複製一份函數，本例子是把 function(){console.log(this.age)} 複製了一份，並改變了此時的this 爲p2.

四. 總結

說實話，這節真的很難懂，我也是略懂一二而已，要想真正的明白，須要慢慢的沉澱，不知道正在學習前端的你針對這節內容有什麼想法，能夠留言告訴我，咱們一塊兒努力！