快捷導(dǎo)航

js類的繼承定義與用法分析

更新時(shí)間：2019年06月21日 11:26:42 作者：學(xué)習(xí)筆記666

這篇文章主要介紹了js類的繼承定義與用法,結(jié)合實(shí)例形式分析了javascript關(guān)于類的定義與繼承的相關(guān)使用技巧,需要的朋友可以參考下

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

如何實(shí)現(xiàn)類的繼承呢？

有如下2個(gè)構(gòu)造函數(shù)：

function PeopleClass(){
  this.type = "人";
};
PeopleClass.ptototype = {
  getType:function(){
    alert("這是一個(gè)人");
  }
};
function StudentClass(name,sex){
  this.name = name;
  this.sex = sex;
};

如何讓『學(xué)生』對象來繼承『人』對象呢？可使用apply方法將父對象的構(gòu)造函數(shù)綁定在子對象上，代碼如下：

function PeopleClass(){
  this.type = "人";
};
PeopleClass.ptototype = {
  getType:function(){
    alert("這是一個(gè)人");
  }
};
function StudentClass(name,sex){
  PeopleClass.apply(this,arguments);
  this.name = name;
  this.sex = sex;
};
var stu = new StudentClass("lily","男");
alert(stu.type); //[人]

從運(yùn)行的結(jié)果來看，StudentClass繼承了PeopleClass的屬性『人』。

而方法的繼承，只要循環(huán)使用父對象的prototype進(jìn)行復(fù)制，即可達(dá)到繼承的目的。方法如下：

function StudentClass(name,sex){
  PeopleClass.apply(this,arguments);
  var prop;
  for(prop in PeopleClass.prototype){
    var proto = this.constructor.prototype;
    if(!proto[prop]){
      proto[prop] = PeopleClass.prototype[prop];
    }
    proto[prop]["super"] = PeopleClass.prototype;
  }
  this.name = name;
  this.sex = sex;
};
var stu = new StudentClass("lily","女");
alert(stu.type); //[人]
stu.getType(); //[這是一個(gè)人]

以上就是js中繼承的實(shí)現(xiàn)。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運(yùn)行效果。

更多關(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é)》

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

您可能感興趣的文章:

相關(guān)文章

js學(xué)習(xí)階段總結(jié)(必看篇)
下面小編就為大家?guī)硪黄猨s學(xué)習(xí)階段總結(jié)(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-06-06
使用JavaScript制作待辦事項(xiàng)列表的示例代碼
這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項(xiàng)列表HTML的完整信息和教程，文中但是示例代碼講解詳細(xì)，感興趣的同學(xué)可以動(dòng)手試一試
2022-01-01
Bootstrap3.0建站教程(一)之bootstrap表單元素排版
本文給大家介紹Bootstrap3.0建站教程(一)之bootstrap表單元素排版，本文給大家列舉了文字和輸入框前后排列和上下排列的實(shí)例代碼，有需要的朋友參考下吧
2016-06-06
前端實(shí)現(xiàn)界面元素拖拽功能的3種方式總結(jié)(親測有效)
這篇文章主要介紹了前端實(shí)現(xiàn)界面元素拖拽功能的3種方式,三種方法分別是純HTML+CSS+JS、Vue模板和Vue全局指令,每種方法都通過監(jiān)聽鼠標(biāo)事件來實(shí)現(xiàn)元素的拖動(dòng)功能,并通過控制閥來確保只有在指定區(qū)域按下鼠標(biāo)時(shí)才開始拖動(dòng),需要的朋友可以參考下
2025-02-02
Javascript通過控制類名更改樣式
這篇文章主要介紹了Javascript通過控制類名更改樣式，下面來和小編一起來學(xué)習(xí)吧
2019-05-05
前端JS運(yùn)算精度丟失的解決方法
前端在處理小數(shù)或大整數(shù)時(shí),由于 JavaScript 的 Number 類型使用 IEEE 754 雙精度浮點(diǎn)數(shù)表示,可能會(huì)出現(xiàn)精度丟失問題（如 0.1 + 0.2 = 0.30000000000000004）,以下是常見的解決方案,需要的朋友可以參考下
2025-03-03
TypeScript 學(xué)習(xí)筆記之基本類型
TypeScript 是 JavaScript 的超集，TypeScript 經(jīng)過編譯之后都會(huì)生成 JavaScript 代碼。TypeScript 最大的特點(diǎn)就是類型化，因此才叫做 TypeScript。比起弱類型的 JavaScript，類型化的 TypeScript 顯得更加容易維護(hù)。
2015-06-06
$如何用JS獲取帶“\”字符串的中間值？$
如何用JS獲取帶“\”字符串的中間值？
如何用JS獲取帶“\”字符串的中間值？...
2007-02-02
JS如何監(jiān)聽div的resize事件詳解
這篇文章主要給大家介紹了關(guān)于JS如何監(jiān)聽div的resize事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-12-12
javascript 判斷中文字符長度的函數(shù)代碼
在很多時(shí)候,我們在進(jìn)行數(shù)據(jù)提交數(shù)據(jù)庫時(shí).先會(huì)用javascript對其進(jìn)行有效性驗(yàn)證.如一個(gè)中文javascript為的length是1.但是數(shù)據(jù)庫中會(huì)占二個(gè)字節(jié).容易出錯(cuò)
2012-08-08