首頁 > web前端 > js教程 > 主體

JavaScript中如何實現多重繼承

亚连
發布: 2018-06-12 17:48:08
原創
3258 人瀏覽過

這篇文章主要介紹了JavaScript實現多重繼承的方法,結合實例形式詳細分析了javascript實現多重繼承的具體步驟與相關操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript實作多重繼承的方法。分享給大家供大家參考,具體如下:

1. 定義一個空的父類別建構函數,然後透過prototype的方式為該父類別定義屬性和方法

2. 定義一個空的子類別的建構函數,然後將子類別的原型綁定在父類別的實例上,然後將子類別原型的父類別也綁定在父類別的實例上。透過prototype的方式為子類別設定自己的屬性和方法。

3. 定義一個空的孫類別建構函數,然後將孫類別的原型綁定到子類別的實例上,再將孫類別原型的父類別綁定到子類別的實例上。透過prototype方式為孫類定義自己的屬性和方法。

4. 實例化一個孫類對象,透過呼叫該實例對象,呼叫自身的方法,也可以呼叫孫類的父類即文中的子類的方法,也可直接呼叫最大父類即這裡父類別的方法,也可以為目前物件新增屬性和方法。

function Person(){}
Person.prototype.name = "人";// 为人类创建一个name属性
Person.prototype.say = function(content){// 为人类创建一个说话的方法
  if(!this.name){ // 如果对象不存在name属性,则使用原型链的name
    this.name = this.__proto__.name;
  }
  console.log("我是" + this.name + ",我想说"+content);
};
function Parent(){}
Parent.prototype = new Person();  // 设置Parent类继承Person类
Parent.prototype.superClass = new Person();// 设置superClass保存父类Person的方法属性
Parent.prototype.name = "父辈类";// 设置Parent类的name属性
Parent.prototype.say = function(){// 设置Parent类自己的 say 方法
  console.log("我是Parent类的say方法!");
};
function Child(){}
Child.prototype = new Parent();// 设置Child类继承Parent类
Child.prototype.superClass = new Parent();// 设置superClass保存父类Parent的方法属性
Child.prototype.say = function(){  //设置Child类自己的say方法
  console.log("我是Child类的say方法!");
}
var c = new Child();// 实例化一个Child对象
c.say();  // 调用自身原型的say方法,输出:我是Child类的say方法!
c.superClass.say(); // 调用父类Parent的say方法,输出: 我是Parent类的say方法!
c.superClass.superClass.say("哈哈");// 直接调用最大的父类Person的say方法(方法中的this指向Person),输出:我是人,我想说哈哈"
// 用call调用最大的父类Person的say方法(方法中的this指向实例化对象c,但此时c并没有name属性,所以this.name用的是Parent的name)
c.superClass.superClass.say.call(c,"嘻嘻"); // 输出:我是父辈类,我想说嘻嘻
c.name = "子类实例";// 给当前对象增加name属性
// 还是用call调用最大父类Person的say方法(此时c对象中已经有name属性);
c.superClass.superClass.say.call(c,"我是子类的实例化对象"); // 输出:我是子类实例,我想说我是子类的实例化对象
登入後複製

上面是我整理給大家的,希望未來會對大家有幫助。

相關文章:

在vue中使用eventBus如何實作同級元件的通訊

在node.js中如何實作下載圖片

使用vue2.0 vue-dplayer這些技巧如何實作hls播放的範例

在vue2.0 element UI 中透過el- table 如何實作資料導出Excel

詳細講解FastClick原始碼(詳細教學)

#

以上是JavaScript中如何實現多重繼承的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板