會js與jq的後端開發如何愉快的轉前端：第二篇-第三節：es6-物件導向完畢-繼承

wangchunbo發表於2020-12-19
JS後端前端物件繼承

ES6之前並沒有給我們提供extends繼承。我們可以通過建構函式+原型物件模擬實現繼承，被稱為組合繼承。

call 方法，繼承前必須知道如何用

  1. call() 可以呼叫函式

fn.call();

  1. call() 可以改變這個函式的this指向 此時這個函式的this 就指向了o這個物件

程式碼

<body>

    <script>

        // call 方法

        function fn(x, y) {

            console.log('我想喝手磨咖啡');

            console.log(this);

            console.log(x + y);

        }

        var o = {

            name: 'andy'

        };


        fn.call(o, 1, 2);

    </script>

</body>

執行結果
會js與jq的後端開發如何愉快的轉前端：第二篇-第三節：es6-物件導向-把oop玩出花-原型

借用父建構函式繼承屬性

  1. 父建構函式


        function Father(uname, age) {

            // this 指向父建構函式的物件例項

            this.uname = uname;

            this.age = age;

        }

2 .子建構函式

function Son(uname, age, score) {
    // this 指向子建構函式的物件例項
    Father.call(this, uname, age);
    this.score = score;
}

這裡this 指向son 我把father的屬性指向 son。

那麼son就可以使用father 的 uname 和 age屬性了

this 自己 uname age 傳給父類的引數

全文程式碼：

<body>

    <script>

        // 借用父建構函式繼承屬性

        // 1. 父建構函式

        function Father(uname, age) {

            // this 指向父建構函式的物件例項

            this.uname = uname;

            this.age = age;

        }

        // 2 .子建構函式 

        function Son(uname, age, score) {

            // this 指向子建構函式的物件例項

            // 這裡this 指向son 我把father的屬性指向 son。

            // 那麼son就可以使用father 的 uname 和 age屬性了

            // this 自己  uname  age 傳給父類的引數

            Father.call(this, uname, age);

            this.score = score;

        }

        var son = new Son('大冪冪', 18, 100);

        console.log(son);

    </script>

</body>

執行結果

會js與jq的後端開發如何愉快的轉前端：第二篇-第三節：es6-物件導向-繼承

借用原型物件繼承方法

依然是上面的程式碼。
我們新寫 一個原型物件的公共方法 money

Father.prototype.money = function() {

    console.log(100000);

};

那麼問題來了，進行 console.log（） 呼叫。
結果如下：

會js與jq的後端開發如何愉快的轉前端：第二篇-第三節：es6-物件導向-繼承

發現 我們這個函式中，沒有money()

這是因為，你的 money 並不是在 father 函式內部。所以沒有給繼承過來。

那麼如何繼承呢？

  1. 直接賦值。 可以這麼做，但是這樣直接賦值會有問題,如果修改了子原型物件,父原型物件也會跟著一起變化
  2. 借用原型物件。整一個公共的然後再用，從而實現繼承的效果。

借用原型物件實現程式碼

<body>
    <script>
        // 借用父建構函式繼承屬性
        // 1. 父建構函式
        function Father(uname, age) {
            // this 指向父建構函式的物件例項
            this.uname = uname;
            this.age = age;
        }
        Father.prototype.money = function() {
            console.log(100000);

        };
        // 2 .子建構函式 
        function Son(uname, age, score) {
            // this 指向子建構函式的物件例項
            Father.call(this, uname, age);
            this.score = score;
        }
        // Son.prototype = Father.prototype;  這樣直接賦值會有問題,如果修改了子原型物件,父原型物件也會跟著一起變化
        Son.prototype = new Father();
        // 如果利用物件的形式修改了原型物件,別忘了利用constructor 指回原來的建構函式
        Son.prototype.constructor = Son;
        // 這個是子建構函式專門的方法
        Son.prototype.exam = function() {
            console.log('孩子要考試');

        }
        var son = new Son('大冪冪', 18, 100);
        console.log(son);
        console.log(Father.prototype);
        console.log(Son.prototype.constructor);
    </script>
</body>

截圖：

會js與jq的後端開發如何愉快的轉前端：第二篇-第三節：es6-物件導向-繼承

會js與jq的後端開發如何愉快的轉前端：第二篇-第三節：es6-物件導向-繼承

本作品採用《CC 協議》，轉載必須註明作者和本文連結
感謝關注 上海PHP自學中心-免費程式設計視訊教學|

相關文章