JavaScript面試題總結系列(五)

5.JavaScript繼承(精簡版)

繼承是什麼

A對象經過繼承B對象,就能直接擁有B對象的全部屬性和方法。javascript

方式1、原型鏈繼承

核心:子類型的原型爲父類型的一個實例對象html

// 建立一個父類(注意其本質仍然是一個構造函數)
    function Parent() {
        this.name='kevin';
    }

    // 建立父類上的一個共享方法
    Parent.prototype.getName = function(){
        console.log(this.name);
    }

    // 建立子類
    function Child() {

    }

    // 核心代碼:將父類的實例做爲子類的原型
    Child.prototype = new Parent();
    
    var child1 = new Child();

    console.log( child1.getName() ); // kevin

方式2、組合繼承優化

核心:藉助已有的對象來建立對象,var B = Object.create(A); ,以A對象爲原型,建立B對象。B繼承了A對象的全部屬性和方法。java

// 建立父類
        function Person(name,age) {
            this.name = name;
            this.age = age;
        }

        // 建立父類共享的方法
        Person.prototype.setAge = function(){
            console.log(111);
        }

        // 建立子類
        function Student(name, age, price) {
            Person.call(this, name, age);
            this.price = price;
            this.setScore = function() {

            }
        }

        Student.prototype = Object.create(Person.prototype); // 核心代碼
        Student.prototype.constructor = Student; // 核心代碼

        var s1 = new Student('tom', 20, 15000);

        console.log(s1 instanceof Student); // true
        console.log(s1 instanceof Person); // true

        console.log(s1.constructor); // Student
        console.log(s1); // Student {name: "tom", age: 20, price: 15000, setScore: ƒ}

小結:

總結該專題知識點的時候,找到了不少好的資源,講的基本都是六-八種的繼承方式。這裏沒有一一列出的緣由是但願若是趕時間參加面試的你,能夠先從這兩種根本的方法去下手,有一個初步的瞭解,不至於問到的時候一點都不知道。git

方式一是一種最基礎,最接近於常識的理解,有助於快速進入狀態。方式二則是比較了幾種實現的繼承的方式後,一種相對來講比較完美的作法,能夠做爲一個「終極」繼承版原本用。有興趣的讀者,能夠看看文末的連接,獲取更多的繼承方式的講解。github


參考連接:
https://github.com/mqyqingfeng/Blog
http://www.javashuo.com/article/p-mbawwkga-r.html
http://www.javashuo.com/article/p-eebumefy-r.html
http://www.javashuo.com/article/p-zyrmfoxg-dk.html
http://www.javashuo.com/article/p-rwkatbxg-gb.html
https://github.com/mqyqingfeng/Blog/issues/16
http://www.ayqy.net/blog/%E9%87%8D%E6%96%B0%E7%90%86%E8%A7%A3js%E7%9A%846%E7%A7%8D%E7%BB%A7%E6%89%BF%E6%96%B9%E5%BC%8F/
https://zhuanlan.zhihu.com/p/37735247
相關文章
相關標籤/搜索