JavaScript繼承與多繼承實例分析

更新時間：2018年05月26日 11:52:43 作者：Felbry

這篇文章主要介紹了JavaScript繼承與多繼承,結合實例形式較為詳細的分析了JavaScript繼承與多繼承的概念、原理、實現(xiàn)與使用方法,需要的朋友可以參考下

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

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

本文結構：

① 原理及分析

② 簡單封裝后的運用

1. 繼承

① 原理及分析

先上一張圖：

用這段代碼的思想來實現(xiàn)繼承，即：

var inherit=function(objBase){
    var F=function(){}; //第一步：定義一個函數(shù)F
    F.prototype=objBase; //第二步：將傳進來的基類對象(objBase)賦給函數(shù)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對象傳給數(shù)組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相關內容感興趣的讀者可查看本站專題：《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數(shù)據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章:

Javascript閉包演示代碼小結
有個網友問了個問題，如下的html，為什么點擊所有的段落p輸出都是5，而不是alert出對應的0，1，2，3，4。
2011-03-03
關于js中for in的缺陷淺析
這篇文章主要介紹了js中for in的缺陷，有需要的朋友可以參考一下
2013-12-12
小程序短信驗證碼頁面實現(xiàn)demo
這篇文章主要為大家介紹了小程序短信驗證碼頁實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
2023-11-11
javascript滾輪控制模擬滾動條
這篇文章主要為大家詳細介紹了javascript滾輪控制模擬滾動條的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-10-10
JavaScript中的執(zhí)行環(huán)境和作用域鏈
這篇文章主要介紹了JavaScript中的執(zhí)行環(huán)境和作用域鏈，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下
2020-09-09
利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法
這篇文章主要介紹了利用weixin-java-miniapp生成小程序碼并直接返回圖片文件流的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-03-03
一文讀懂JS中的var/let/const和暫時性死區(qū)
這篇文章主要為大家詳細介紹了JavaScript中的var、let、const和暫時性死區(qū)的異同，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
2023-02-02
JavaScript 定義function的三種方式小結
JavaScript中定義function有以下三種方式.
2009-10-10
微信小程序數(shù)字滾動插件使用詳解
這篇文章主要介紹了微信小程序數(shù)字滾動插件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-02-02
js 獲取頁面高度和寬度兼容 ie firefox chrome等
這篇文章主要介紹了js如何獲取頁面高度和寬度并且兼容ie firefox chrome等主流瀏覽器
2014-05-05