JavaScript原型OOP——你上車了嗎?

本篇小分享,帶有必定車技的新司機上車,老司機我帶不動你,你能夠帶帶我。版權歸博客園和做者本人共同全部,轉載和爬蟲請註明原文地址 博客園吳雙 www.cnblogs.com/tdws html

對新司機說:JavaScript原型鏈對於你我這樣的新司機總顯得神祕很差理解,但在你成爲老司機的路上,你不得不去搞一搞,或許你不多有機會來使用它,不過我想說機會老是留給有準備的人,就是這樣一個個小的代碼插曲,讓你我一塊兒成爲真正的老司機。今天,就上一次車:web

百度百科中,這樣描述了property:在JavaScript中,prototype對象是實現面向對象的一個重要機制。每一個函數就是一個對象(Function),函數對象都有一個子對象 prototype對象,類是以函數的形式來定義的。prototype表示該函數的原型,也表示一個類的成員的集合。
實踐中理解
那麼我在瀏覽器中作出以下實驗:
你能夠看到我定一個Test「類型」. 我使用typeof獲取Test「類型」的類型結果爲function,結果告訴咱們他是一個類。下面我又繼續獲取Test.prototype的類型,也就是原型的類型,結果爲object,告訴咱們這是一個對象。若是你看過我上一篇 http://www.cnblogs.com/tdws/p/5944254.html閉包的分享,在對象中附加了一系列方法和屬性,你就理解什麼是object. 既然咱們知道這是一個對象,咱們就能夠向對象上作一系列的操做了。請看代碼:
本身寫一遍收穫更多喲
<script>
        //來兩個參數>>品牌,型號
        function Car(carBrand, model) {
            this.carBrand = carBrand;
            this.model = model;
        }
        //來一個方法>>加速方法
        Car.prototype.Acceleration = function () {
            console.log("this is " + this.carBrand + '--' + this.model);
        }
        //再來一個方法>>按喇叭
        Car.prototype.Hoot = function () {
            console.log("嘀嘀嘀");
        }
        //來一個屬性>>輪子數量
        Car.prototype.Wheel = 4;

        //特斯拉>>來三個參數>>品牌,型號,動力
        function Tesla(carBrand, model ,power) {
            Car.call(this, carBrand, model);
            this.power = power;
        }

        Tesla.prototype = Object.create(Car.prototype);//創造一個空對象,而且使其原型指向參數,也就是Car.prototype.
        Tesla.prototype.constructor = Tesla;  //取消不影響總體流程,但爲了保持一致  特斯拉構造,若是沒有此行代碼,則constructor爲Car

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

        //特斯拉 modelX 電動
        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這個類型,而且在獲得Car的對象的時候你須要兩個參數,品牌和型號。有一個加速,一個鳴笛的方法。下面我但願特斯拉能繼承Car的基礎方法和屬性。繼而我定義了Tesla類型,而且在其中經過call調用父類的方法,你可能在此處看不到這個調用有什麼意義,由於Car類型中不過只是賦值而已,若是真是作一系列的複雜邏輯操做後賦值(車輛生產),那就會感覺到用處啦。瀏覽器

輸出開車結果

看一下輸出結果,不用問爲何,繼續往下看。閉包

你看到了輸出》我是特斯拉ModelX,電動車。其餘的輸出不一一詳述。函數

特斯拉的prototype原型指向的是一個Car原型,爲何不直接賦值呢 ?緣由就是直接賦值原型時,子類原型對象的附加屬性和方法,會被帶到父類。this

然後將Tesla的原型構造指向其自己,若是不指向自己,那麼其原型構造就是Car,雖不會影響總體流程,但爲了保證一致性,仍是將其原型構造保持在Tesla.下面特斯拉擁有和父類同名的加速方法。也擁有了你懂的GetGirl的自身方法,你能夠本身手動調用並看到父類原型對象上並無子類的方法。spa

在子類調用父類同名方法時,則會選擇子類的調用。而子類Tesla不擁有鳴笛方法,prototype沿着原型鏈向父親查找,則能夠調用父類的按喇叭方法。prototype

 

若是個人點滴分享,對你有點滴幫助,請點擊下方紅色按鈕關注,我將持續分享,咱們共同進步和討論。也歡迎點下推薦按鈕,爲我,也爲你本身點贊。code

相關文章
相關標籤/搜索