簡單聊聊javascript的繼承;

在JS中繼承是一個非常復雜的話題,比其他任何面向對象語言中的繼承都復雜得多。
在大多數其他面向對象語言中,繼承一個類只需使用一個關鍵字即可。在JS中想要達到繼承公用成員的目的,需要采取一系列措施。JS屬于原型式繼承,得益于這種靈活性,我們既可以使用標準的基于類的繼承,也可以使用更微妙一些的原型式繼承。在JS中應該要明確一點,一切繼承都是通過prototype來進行的,且JS是基于對象來繼承的。(這話是比較官方的說法,看著都很專業(yè))

在說繼承之前,首先得先回答一個問題,什么是繼承?

我理解的繼承,簡單來說就是,
--1.在原有類的基礎上,進行可操作的修改,得到一個嶄新的類,這個類有原來類的功能,同時也有自己的功能;
--2.這個新的類,不會影響原有類的功能,不會相互干預;
這里肯定有人要問了,什么是‘可操作的修改呢?’說白了就是在不影響整個類的功能的前提下,進行的修改!這點和第二點略有重復,仔細想想,還是有所區(qū)別的!?。?br> 下面開始說說常用的集中繼承方式:

1.代碼:

        function Person(name, sex) {
            this.name = name;
            this.sex = sex;
        }
        Person.prototype.showName = function() {
            console.log(this.name);
        }
        Person.prototype.showSex = function() {
            console.log(this.sex);
        }
        function work(name, sex, job) {
           //構造函數偽裝調用父級的構造函數——為了繼承屬性
            Person.call(this, name, sex);
            //Person.apply(this, [name, sex]);  //此處的call與apply是有區(qū)別的,往下看
            this.job = job;
        }
        work.prototype = Person.prototype; //通過prototype繼承父級的屬性
        work.prototype.showJob = function() {
            console.log(this.job);
        }
        var s = new work('xue', 'nan', 'developer');
        s.showJob()  //developer

簡單的解釋一下上面的代碼:首先寫了一個很簡單的構造函數,在函數的原型上分別添加了showName和showSex的方法;緊接著寫了一個work()函數,這里注意work()里面的參數,多了一個job參數,這個參數就是要繼承的參數, Person.call(this, name, sex);有人問這里的this指的是啥?看下圖:


image.png

答案就是 <b>new出來的work對象!</b>
work.prototype = Person.prototype;這句話就是通過prototype繼承父級的屬性,name和sex;然后就是在work的基礎上添加showJob方法;
最后就是new一個work對象,執(zhí)行方法!最后work繼承了Person的name和sex屬性;是不是很好懂!

2.代碼:

 function Person(name, sex) {
            this.name = name;
            this.sex = sex;
        }
        Person.prototype.showName = function() {
            alert(this.name);
        };
        Person.prototype.showSex = function() {
            alert(this.sex);
        };
        function work(name, sex, job) {
            Person.call(this, name, sex);
            this.job = job;
        }

        //1.原型鏈 通過原型來繼承父級的方法
        //work.prototype=Person.prototype;

       // 2.原型鏈 通過原型來繼承父級的方法(循環(huán)方法)
       // Person.prototype類型是object;
        for (var i in Person.prototype) {
            Worker.prototype[i] = Person.prototype[i];
        }
        Worker.prototype.showJob = function() {
            alert(this.job);
        };
        var p = new Person('xue', 'nan');
        var w = new work('xue', 'nan', 'developer');
        // p.showName();
        // p.showSex();
        // w.showName();
        // w.showSex();
        // w.showJob();

簡單解釋一下:work.prototype=Person.prototype;這里是通過原型鏈來繼承父級的方法;這里肯定有人要問“什么是原型鏈?”后期會講?。?!

 for (var i in Person.prototype) {
       Worker.prototype[i] = Person.prototype[i];
 }

這里只是用不同方法,通過原型鏈來繼承父級的方法,原理是一樣的!

call與apply的區(qū)別

js中call和apply都可以實現繼承,唯一的一點參數不同,func.call(func1,var1,var2,var3)對應的apply寫法為:func.apply(func1,[var1,var2,var3])。
說簡單一點,這兩函數的作用其實就是更改對象的內部指針,即改變對象的this指向的內容。這在面向對象的js編程過程中有時是很有用的。
如有錯誤請私信本人!

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 博客內容:什么是面向對象為什么要面向對象面向對象編程的特性和原則理解對象屬性創(chuàng)建對象繼承 什么是面向對象 面向對象...
    _Dot912閱讀 1,534評論 3 12
  • 相關知識點 數據類型、運算、對象、function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Aj...
    sandisen閱讀 23,039評論 20 251
  • @轉自GitHub 介紹js的基本數據類型。Undefined、Null、Boolean、Number、Strin...
    YT_Zou閱讀 1,312評論 0 0
  • 我要寫的不是愛情,是兩個女生的友誼。 1.相識相知 認識家伙是在初二那年。 那年我因為上一學期期末考試超水平發(fā)揮,...
    春風巷72號閱讀 1,008評論 7 9
  • 所以人為什么會這么深愛音樂會? 你在它里面會變得偉大, 但又不知道是自己偉大,還是它在偉大。
    長歌先生閱讀 271評論 0 0

友情鏈接更多精彩內容