JavaScript繼承與多繼承實例講解

這篇文章主要介紹“JavaScript繼承與多繼承實例講解”，在日常操作中，相信很多人在JavaScript繼承與多繼承實例講解問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript繼承與多繼承實例講解”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

本文實例講述了JavaScript繼承與多繼承。分享給大家供大家參考，具體如下：

雖然最新的EC6里邊已經有了class的相關功能，但是從普及度上和閱讀舊代碼需求的方面來看，這點知識也得了解一下。

本文結構：

① 原理及分析

② 簡單封裝后的運用

1. 繼承

① 原理及分析

先上一張圖：

用這段代碼的思想來實現繼承，即：

var inherit=function(objBase){
    var F=function(){}; //第一步：定義一個函數F
    F.prototype=objBase; //第二步：將傳進來的基類對象(objBase)賦給函數F的原型(F.prototype)
    return new F(); //第三步：返回一個F對象(已經具備了objBase特征)
}

② 簡單封裝后的運用

Function.prototype.inherit=function(objBase){
    this.prototype=new objBase();
}
var Person=function(){
    this.name="倩倩";
    this.sex="女";
}
var Student=function(){
    this.id="0712";
}
Student.inherit(Person);
var student=new Student();
alert(student.name +","+ student.sex +","+ student.id);

2. 多繼承

① 原理及分析

多繼承就是將多個對象的成員，交給當前對象

var o1={name:"倩倩"} //對象的字面值
var o2={sex:"女"}
var She=function(){}
She.prototype={};  //先聲明
for(var k in o1){
    She.prototype[k]=o1[k];
}
for(var k in o2){
    She.prototype[k]=o2[k];
}
var she=new She();
alert(she.name + "," + she.sex);

② 簡單封裝后的運用

Function.prototype.inherits=function(){
    var arr=arguments; //將接收到的arguments對象傳給數組arr
    this.prototype={};
    for(var i=0;i<arr.length;i++){
      for(var k in arr[i]){
        var obj=arr[i];
        this.prototype[k]=obj[k];
      }
    }
}
var o1={name:"倩倩"} //對象的字面值
var o2={sex:"女"}
var She=function(){}
She.inherits(o1,o2);
var she=new She();
alert(she.name + "," + she.sex);

到此，關于“JavaScript繼承與多繼承實例講解”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！