js學習中的總結——幾種繼承模式

2018-6-29    seo達人

如果您想訂閱本博客內容,每天自動發(fā)到您的郵箱中, 請點這里

     js中構造函數的幾種繼承模式淺析

一、原型鏈模式繼承

    利用原型讓一個引用類型繼承另一個引用類型的屬性和方法 。

    用的最多。

    缺點:不可傳參,不可多繼承。


        
  1. function People(name, age) {//添加公有屬性
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }//創(chuàng)建一個名為People的類
  7. People.prototype.eat = function() {//添加私有屬性
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color) {//創(chuàng)建一個名為Cat的類
  11. this.color = color;
  12. }
  13. Cat.prototype = new People('小叮當', 200);//實例化一個People類,并賦值給Cat類的原型鏈
  14. var cat = new Cat('藍白色')
  15. console.log(cat.name)//'小叮當'
  16. cat.eat();//'小叮當賊能吃'

二、混合模式繼承

    用call的方法只能繼承私有屬性,所以再加一遍一遍原型鏈模式繼承,原型鏈模式繼承又把私有屬性和公有屬性都繼承了一遍。


        
  1. function People(name, age) { //創(chuàng)建一個父級People類
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. People.call(this, name, age); //通過call的形式繼承
  13. //通過call(this),將People的指向改為Cat的實例
  14. }
  15. var cat = new Cat('藍白色', '小叮當', 1);
  16. console.log(cat.name);//'小叮當'
  17. cat.eat();//報錯,
  18. //繼承不了公有屬性,所以cat.eat()會報錯;

為了繼承公有屬性,用原型鏈模式在把公有屬性和方法繼承過來,


        
  1. function People(name, age) { //創(chuàng)建一個父級People類
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. People.call(this, name, age); //通過call的形式繼承
  13. //通過call(this),將People的指向改為Cat的實例
  14. }
  15. Cat.prototype = new People()
  16. var cat = new Cat('藍白色', '小叮當', 200)
  17. console.log(cat)
  18. console.log(cat.name); //'小叮當',在原型鏈繼承的時候,就近原則,cat.name 先找到'小叮當',就不往下找了
  19. cat.eat(); //'小叮當賊能吃'

三、拷貝繼承

    優(yōu)點:可以多繼承,可傳參;

    缺點:浪費資源,不能判斷父級;


        
  1. function People(name, age) { //創(chuàng)建一個父級People類
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. var people = new People(name, age) //實例化一個People類
  13. for (let i in people) {
  14. this[i] = people[i]; //將people中的可枚舉屬性和方法遍歷并附給Cat類,公有屬性和私有屬性都是可枚舉屬性;
  15. }
  16. }
  17. var cat = new Cat('藍白色', '小叮當', 2);
  18. console.log(cat.name); //小叮當
  19. cat.eat(); //小叮當賊能吃

四、寄生組合方式繼承

    優(yōu)點:私有屬性和公有屬性都單獨繼承,可以傳參;

    私有屬性可以多繼承,公有屬性不可多繼承;


        
  1. function People(name, age) {
  2. name = name || 'xiaolan';
  3. age = age || 18;
  4. this.name = name;
  5. this.age = age;
  6. }
  7. People.prototype.eat = function() {
  8. console.log(this.name + '賊能吃');
  9. }
  10. function Cat(color, name, age) {
  11. this.color = color;
  12. People.call(this, name, age) //用call的形式把私有屬性繼承過來
  13. }
  14. function Fn() {} //創(chuàng)建一個中間構造函數,用來接收People的公有屬性,為了防止創(chuàng)建實例Cat實例是影響原來的people構造函數
  15. Fn.prototype = People.prototype;
  16. Cat.prototype = new Fn(); //將中間構造函數Fn繼承people的公有屬性傳給Cat的原型鏈
  17. Cat.prototype.constructor = Cat; //由于上一步重置了Cat原型鏈的constructor屬性,所以要重新給賦回來;
  18. var cat = new Cat('藍白色', '小叮當', 3);
  19. console.log(cat.name); //'小叮當'
  20. cat.eat() //'小叮當賊能吃


注:若有不嚴謹與錯誤的地方,請多指教!






  1. 這里寫圖片描述



藍藍設計m.820esy.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://m.820esy.cn

存檔