理解類、對象、實例、原型鏈以及繼承 - WPF特工隊內部資料

時間 2019-11-08
原文原文鏈接
理解類、對象、實例、原型鏈以及繼承javascript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>理解類、對象、實例、原型鏈以及繼承</title>
</head>
<body>
</body>
</html>

<script type="text/javascript">

    /*
     *  理解類、對象、實例、原型鏈以及繼承
     *
     * */


    /**
     * 聲明父類
     * @constructor SuperClass
     */
    function SuperClass() {
        this.superValue = "我是SuperClass父類的屬性'superValue'";
    }
    SuperClass.prototype.getSuperValue = function () {
        return this.superValue;
    }

    /**
     * 聲明子類
     * @constructor
     */
    function SubClass() {
        this.subValue = "我是SubClass子類的屬性'subValue'"
    }

    /*
     * 爲何使用繼承？爲何使用面向對象編程？什麼是類？
     * 類：對一類事物的行爲和屬性的抽象；人類，禽類(家禽類，飛禽類)，哺乳動物類等等有相同行爲和屬性的事物進行抽象；
     * OOP：面向對象編程；
     * 爲何使用面向對象編程：直白一點就是寫更少的代碼作更多的事情，另外就是提高代碼的可維護性和可讀性；
     * 固然重要的面向對象的是設計而不是編程語言，語言僅僅咱們理解設計和實現設計的一種方式；
     */
    var _subClass = new SubClass();
    /*
    *   到目前爲止SuperClass類和SubClass沒有創建繼承關係，怎麼使用類式繼承的方式實現繼承關係？
    * */

    //類式繼承
    SubClass.prototype = new SuperClass();
    //爲子類添加新屬性和方法
    SubClass.prototype.getSubValue = function () {
        return this.subValue;
    }

    /*
     *  在學習過程當中，爲了方便理解，咱們將首字符大些的函數都稱爲類。讓咱們更方便、容易的理解對象，類，實例之間的關係；
     *
     *  類的原型對象：
     *      類的原型對象的做用就是爲類添加【共有】屬性和方法，可是類不能直接訪問這些屬性和方法，必須通prototype屬性進行訪問，
     *      咱們建立類實例時，類實例除了會複製一份自身實例屬性和方法外，還會包含一個影藏的屬性__proto__，
     *      這個屬性指向的是類的prototype屬性，
     *      而且prototype屬性的constructor屬性指向的是當前類對象，這樣子就構成了類的原型鏈；
     *      無論咱們是修改prototype的值仍是constructor所指向的類的對象，都會影響原型鏈，若是不能一一對應，都會破壞類的完整性；
     *
     *  爲何這麼寫就實現了繼承呢？
     *
     *  一、在前面的原型鏈中咱們使用checkObj.prtotype = {};這種方式對函數進行封裝，使得checkObj對象包含咱們所須要的屬性和方法；
     *  二、var _superClass = new SuperClass();，所獲得就是一個對象，咱們剔除裏面的屬性和方法，是否是就是一個{}對象；
     *  三、由此簡化，咱們就能夠看出類式繼承其實咱們很早就用過，只是一直不知道而已；
     *  四、由於javascript是沒有繼承這些個花裏胡哨的東西的，這些概念都是模擬的，如今咱們來還原這個SubClass類的原型鏈；
     *          1.SubClass類沒有執行SubClass.prototype = new SuperClass();以前，他的原型鏈能夠參見【類的原型對象】分析：
     *            var _subClass = new SubClass();
     *            _subClass.__proto__ === SubClass.prototype；
     *            SubClass.prototype.constructor = function SubClass(){}
     *            以上是在沒有執行類式繼承的原型鏈；
     *            2.執行SubClass.prototype = new SuperClass()後，他的原型鏈就變成以下：
     *            var _subClass = new SubClass();
     *             _subClass.__proto__ === SuperClass.prototype；
     *           SuperClass.prototype.constructor = function SuperClass(){}
     *           以上是在執行類式繼承後的原型鏈；
     *
     *   當一個類是否完成了對類的繼承，咱們能夠使用instanceof來檢測
     *
     *   綜上所述：類式繼承經過修改類的原型指向的對象實例來實現對類的繼承。
     *
     * */
    var _superClass = new SuperClass();
    console.log(_superClass);
    var _subClass = new SubClass();

    console.log(_subClass.getSuperValue());
    console.log(_subClass.getSubValue());

    //instanceof：用來檢測某個實例是否是某個類的實例

    console.log(_subClass instanceof SuperClass);
    console.log(_subClass instanceof SubClass);

    /*
     * 實現繼承的目的就是維持原型鏈的完整，
     * 無論是後續咱們提到的構造函數繼承，
     * 組合式繼承，原型式繼承，寄生式繼承，
     * 組合寄生式繼承都是爲了知足參數和原型鏈的完美轉移(對象關係的轉換)；
     *
     * 組合式繼承，原型式繼承，寄生式繼承，組合寄生式繼承
     * 都是知足參數和原型鏈的完美轉移而衍生出來的補丁，
     * 並正確的演繹出繼承實際效果，
     * 在實際項目中，使用哪一種方式實現對象關係的轉換，
     * 根據實際業務場景來肯定，選擇最優者就能夠；
     * */


</script>