快捷導(dǎo)航

JavaScript繼承定義與用法實(shí)踐分析

更新時(shí)間：2018年05月28日 09:20:35 作者：記憶的森林

這篇文章主要介紹了JavaScript繼承定義與用法,結(jié)合實(shí)例形式分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計(jì)中基類的定義、原型繼承以及調(diào)用父類構(gòu)造函數(shù)等相關(guān)操作技巧,需要的朋友可以參考下

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

javascript 繼承，老生長(zhǎng)談的東西，大家應(yīng)該都很熟悉了，平時(shí)工作基本不會(huì)直接使用，這段時(shí)間不忙，所以補(bǔ)習(xí)了下相關(guān)基礎(chǔ)知識(shí) ，自己動(dòng)手實(shí)踐，加深理解：

基類定義如下：

// base class
function Animal(t)
{
   if(typeof t==='string')
    this.type=t;
   else
   {
    if(t)
      this.type=t.toString();
    else
      this.type='Animal'
   }
   this.speak=function(str)
   {
    if(str)
      console.log(this.type+' said '+str);
    else
      throw "please specify what you want to say!";
   }
}

1. 原型繼承（javascript 類庫本身基于原型繼承）

String, Number , Boolean 這三大原始類型我們可以很直接的通過prototype 檢查到他們繼承自Object.

Date, RegExp ,Array 這三應(yīng)該是間接繼承了Object, 他們的prototype屬性很特殊：

Date.prototype =Invalid Date
RegExp.prototype=/(?:)/
Array.prototype=[]

原型繼承代碼如下：（可以看到Mokey 原型鏈上的Animal和Object）

// Monkey : Animal 
function Monkey(name,age)
{
   this.name=name;
   this.age=age;
}
Monkey.prototype=new Animal('Monkey');
// Example 01
var m=new Monkey('codeMonkey',10);
    /*
    Monkey:
    age: 10
    name: "codeMonkey"
      __proto__: Animal
      speak: function (str)
      type: "Monkey"
        __proto__: Animal
        constructor: function Animal(t)
          __proto__: Object 
*/
console.log(m.type); // Monkey
console.log(m.name); // codeMonkey
console.log(m.age); // 10
m.speak('hello world') // Monkey said hello world

2. 調(diào)用父類構(gòu)造函數(shù) ( 通過傳遞子類的this指針，將原本是父類的公開成員直接添加到了子類中，從子類原型鏈中無法看出繼承關(guān)系)

// Human:Animal 
function Human(id,name)
{
    // call base class's constuctor function
   Animal.call(this,'Human');
   this.id=id;
   this.name=name;
}
var h=new Human(1,'leon');
/*
id: 1
name: "leon"
speak: function (str)
type: "Human"
    __proto__: Human
    constructor: function Human(id,name)
      __proto__: Object
*/
h.speak('hello world'); // Human said hello world 
console.log(h.type); // Human

更多關(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ì)有所幫助。

您可能感興趣的文章: