JavaScript繼承與多繼承實(shí)例分析

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

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

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

雖然最新的EC6里邊已經(jīng)有了class的相關(guān)功能，但是從普及度上和閱讀舊代碼需求的方面來看，這點(diǎn)知識(shí)也得了解一下。

本文結(jié)構(gòu)：

① 原理及分析

② 簡單封裝后的運(yùn)用

1. 繼承

① 原理及分析

先上一張圖：

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

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

② 簡單封裝后的運(yùn)用

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. 多繼承

① 原理及分析

多繼承就是將多個(gè)對(duì)象的成員，交給當(dāng)前對(duì)象

var o1={name:"倩倩"} //對(duì)象的字面值
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);

② 簡單封裝后的運(yùn)用

Function.prototype.inherits=function(){
    var arr=arguments; //將接收到的arguments對(duì)象傳給數(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:"倩倩"} //對(duì)象的字面值
var o2={sex:"女"}
var She=function(){}
She.inherits(o1,o2);
var she=new She();
alert(she.name + "," + she.sex);

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: