前言

JavaScript原型鏈對(duì)于對(duì)于很多剛學(xué)習(xí)Javascript的新手們來書總顯得神秘不好理解,但如果你想深入的學(xué)習(xí)Javascript，就不得不去研究以下了，或許你很少有機(jī)會(huì)來使用它，不過我想說機(jī)會(huì)總是留給有準(zhǔn)備的人，下面我們這篇文章就來學(xué)習(xí)一下。

百度百科中，這樣描述了property:在JavaScript中，prototype對(duì)象是實(shí)現(xiàn)面向?qū)ο蟮囊粋€(gè)重要機(jī)制。每個(gè)函數(shù)就是一個(gè)對(duì)象（Function），函數(shù)對(duì)象都有一個(gè)子對(duì)象 prototype對(duì)象，類是以函數(shù)的形式來定義的。prototype表示該函數(shù)的原型，也表示一個(gè)類的成員的集合。

實(shí)踐中理解

那么我在瀏覽器中做出如下實(shí)驗(yàn)：

你可以看到我定一個(gè)Test“類型”. 我使用typeof獲取Test“類型”的類型結(jié)果為function,結(jié)果告訴我們他是一個(gè)類。下面我又繼續(xù)獲取Test.prototype的類型，也就是原型的類型，結(jié)果為object,告訴我們這是一個(gè)對(duì)象。在對(duì)象中附加了一系列方法和屬性，你就理解什么是object. 既然我們知道這是一個(gè)對(duì)象，我們就可以向?qū)ο笊献鲆幌盗械牟僮髁恕?/p>

請(qǐng)看代碼：

<script>
    //來兩個(gè)參數(shù)>>品牌,型號(hào)
    function Car(carBrand, model) {
      this.carBrand = carBrand;
      this.model = model;
    }
    //來一個(gè)方法>>加速方法
    Car.prototype.Acceleration = function () {
      console.log("this is " + this.carBrand + '--' + this.model);
    }
    //再來一個(gè)方法>>按喇叭
    Car.prototype.Hoot = function () {
      console.log("嘀嘀嘀");
    }
    //來一個(gè)屬性>>輪子數(shù)量
    Car.prototype.Wheel = 4;

    //特斯拉>>來三個(gè)參數(shù)>>品牌,型號(hào),動(dòng)力
    function Tesla(carBrand, model ,power) {
      Car.call(this, carBrand, model);
      this.power = power;
    }

    Tesla.prototype = Object.create(Car.prototype);//創(chuàng)造一個(gè)空對(duì)象，并且使其原型指向參數(shù)，也就是Car.prototype.
    Tesla.prototype.constructor = Tesla; //取消不影響整體流程，但為了保持一致 特斯拉構(gòu)造，如果沒有此行代碼，則constructor為Car

    Tesla.prototype.Acceleration = function () {
      console.log("this is " + this.carBrand + '--' + this.model+" And Drive by "+this.power);
    }
    //特斯拉獨(dú)有的 GetGirl你懂的方法
    Tesla.prototype.GetGirl = function () {
      console.log('yes,fucking car...');
    }

    //特斯拉 modelX 電動(dòng)
    var modelX = new Tesla("Tesla", "ModelX", "electric power");
    console.log(typeof modelX);
    modelX.Acceleration();
    console.log(modelX.Wheel);
    modelX.GetGirl();
    modelX.Hoot();
    console.log(Tesla.prototype.constructor);
  </script>

在代碼中我做了一系列注釋，也開了一把特斯拉。我定義了Car這個(gè)類型，并且在得到Car的對(duì)象的時(shí)候你需要兩個(gè)參數(shù)，品牌和型號(hào)。有一個(gè)加速，一個(gè)鳴笛的方法。下面我希望特斯拉能繼承Car的基礎(chǔ)方法和屬性。繼而我定義了Tesla類型，并且在其中通過call調(diào)用父類的方法，你可能在此處看不到這個(gè)調(diào)用有什么意義，因?yàn)镃ar類型中不過只是賦值而已，如果真是做一系列的復(fù)雜邏輯操作后賦值（車輛生產(chǎn)），那就會(huì)感受到用處啦。

輸出結(jié)果

看一下輸出結(jié)果，不用問為什么，繼續(xù)往下看。

你看到了輸出》我是特斯拉ModelX,電動(dòng)車。其他的輸出不一一詳述。

特斯拉的prototype原型指向的是一個(gè)Car原型，為什么不直接賦值呢 ？原因就是直接賦值原型時(shí)，子類原型對(duì)象的附加屬性和方法，會(huì)被帶到父類。

而后將Tesla的原型構(gòu)造指向其本身，如果不指向本身，那么其原型構(gòu)造就是Car，雖不會(huì)影響整體流程，但為了保證一致性，還是將其原型構(gòu)造保持在Tesla.下面特斯拉擁有和父類同名的加速方法。也擁有了你懂的GetGirl的自身方法，你可以自己手動(dòng)調(diào)用并看到父類原型對(duì)象上并沒有子類的方法。

在子類調(diào)用父類同名方法時(shí)，則會(huì)選擇子類的調(diào)用。而子類Tesla不擁有鳴笛方法，prototype沿著原型鏈向父親查找，則可以調(diào)用父類的按喇叭方法。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作帶來一定的幫助，如果有疑問大家可以留言交流。

最新評(píng)論