JavaScript繼承定義與用法實踐分析
本文實例講述了JavaScript繼承定義與用法。分享給大家供大家參考,具體如下:
javascript 繼承 , 老生長談的東西, 大家應該都很熟悉了, 平時工作基本不會直接使用, 這段時間不忙, 所以補習了下相關基礎知識 ,自己動手實踐, 加深理解:
基類定義如下:
// 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 這三應該是間接繼承了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)用父類構造函數(shù) ( 通過傳遞子類的this指針 , 將原本是父類的公開成員直接添加到了子類中,從子類原型鏈中無法看出繼承關系)
// 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
更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《javascript面向?qū)ο笕腴T教程》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數(shù)學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
- JavaScript繼承與多繼承實例分析
- JavaScript實現(xiàn)多重繼承的方法分析
- 深入淺析javascript繼承體系
- JS繼承與閉包及JS實現(xiàn)繼承的三種方式
- js中繼承的幾種用法總結(apply,call,prototype)
- JavaScript是如何實現(xiàn)繼承的(六種方式)
- 深入了解javascript中的prototype與繼承
- Javascript基于對象三大特性(封裝性、繼承性、多態(tài)性)
- javascript的函數(shù)、創(chuàng)建對象、封裝、屬性和方法、繼承
- Javascript 繼承機制的實現(xiàn)
- JavaScript的原型繼承詳解
相關文章
JS實現(xiàn)多級菜單中當前菜單不隨頁面跳轉(zhuǎn)樣式而發(fā)生變化
本文介紹了JQuery巧妙實現(xiàn)多級菜單中當前菜單不隨頁面跳轉(zhuǎn)樣式發(fā)生變化,實現(xiàn)方法非常簡單,感興趣的朋友一起看看吧2017-05-05
js利用prototype調(diào)用Array的slice方法示例
這篇文章主要介紹了如何利用js的prototype調(diào)用Array的slice方法,需要的朋友可以參考下2014-06-06
基于JavaScript代碼實現(xiàn)隨機漂浮圖片廣告
在網(wǎng)上有很多這樣的代碼,不過未必符合W3C標準,因為在頭部加上<!DOCTYPE html>類似標簽之后,漂浮效果就會失效,下面分享一個符合標準的漂浮代碼,使需要的朋友免去大量改造代碼的繁瑣2016-01-01
微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁
本文詳細講解了微信小程序?qū)崿F(xiàn)獲取用戶信息替換用戶名和頭像到首頁的方法,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-06-06
webpack4手動搭建Vue開發(fā)環(huán)境實現(xiàn)todoList項目的方法
這篇文章主要介紹了webpack4手動搭建Vue開發(fā)環(huán)境實現(xiàn)todoList項目的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05

