首頁 web前端 js教程 詳解JavaScript繼承方式(一)

詳解JavaScript繼承方式(一)

Mar 22, 2018 pm 01:21 PM
js

物件導向的語言多數都支援繼承,繼承最重要的優點就是程式碼重複使用,從而建構大型軟體系統。如果一個類別能夠重複使用另一個類別的屬性和或方法,就稱之為繼承。從這個角度來看JS的繼承方式。 JS中繼承方式與寫入類別方式息息相關。不同的寫類別方式造成不同的繼承方式。各種流行JS庫繼承方式也各不相同。從最簡單的複用開始。

1、建構子方式寫類,透過方法呼叫複製父類屬性/字段到子類實現繼承

這裡父類,子類都採用構造函數方式寫,不用原型。子類別呼叫父類別函數來複製父類別的屬性。

/**
 * 父类Polygon:多边形
  * @param {Object} sides 
  */
    function Polygon(sides) {
    this.sides = sides;
    this.setSides = function(s) {this.sides=s;}
  }
    /**
  * 子类Triangle:三角形
   */function Triangle() {this.tempfun = Polygon;//父类引用赋值给子类的一个属性
   tempfunthis.tempfun(3);//调用
   delete this.tempfun;//删除该属性  
   this.getArea = function(){};}//new个对象
   var tri = new Triangle();console.log(tri.sides);//继承的属性
   console.log(tri.setSides);//继承的方法
   console.log(tri.getArea);//自有的方法
   //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false
   console.log(tri instanceof Triangle);//trueconsole.log(tri instanceof Polygon);//false
因为 JavaScript中具名函数的多种调用方式 ,子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。
function Triangle() {
Polygon.call(this,3); //call方式调用父类
this.getArea = function(){};
}
function Triangle() {
Polygon.apply(this,[3]); //apply方式调用父类this.getArea = function(){};
}
function Triangle() {
var temp = new Polygon(3); //new方式调用父类
for(atr in temp) { //全部复制给子类this[atr] = temp[atr];
}
this.getArea = function(){};
}
登入後複製

這種方式的缺點是子類別的實例物件用instanceof檢查父類別時總是false。這與java繼承"is a "的關係是違背的。

 

2、原型方式寫類,原型方式繼承

core JS本身的物件系統就是採用原型方式(prototype based)繼承的。或者說core JS沒有採用常見的類別繼承(class based)系統,而是使用原型繼承來實現自己的物件系統。工作中我們也可以用原型方式來實現繼承,程式碼重複使用以建構自己的功能模組。 

/**
 * 父类Polygon:多边形
 * 
 */
function Polygon() {}
Polygon.prototype.sides = 0;
Polygon.prototype.setSides = function(s) {this.sides=s;}
/**
 * 子类Triangle:三角形
 */
function Triangle() {}
Triangle.prototype = new Polygon(); //这是原型继承关键的一句
Triangle.prototype.getArea = function(){}
//new个对象
var tri = new Triangle();
console.log(tri.sides);//继承的属性
console.log(tri.setSides);//继承的方法
console.log(tri.getArea);//自有方法
//instanceof测试
console.log(tri instanceof Triangle);//true,表明该对象是三角形
console.log(tri instanceof Polygon);//true,表明三角形也是多边形
登入後複製

雖然從輸出可以看出子類別繼承了父類別Polygon的屬性sides和方法setSides,但sides是0,怎麼會是三角形呢。還得呼叫下tri.setSides(3)使之成為三角形。這樣似乎很不方便。不能傳參數,即是原型方式的缺點。優點是正確的維護了"is a"的關係。

 

3、組合建構子/原型方式寫類,採用前面種方式繼承

##這種方式父類,子類別的屬性都掛在建構函式裡,方法都掛在原型上。

以上是詳解JavaScript繼承方式(一)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

如何使用JS和百度地圖實現地圖平移功能 如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能

建議:優秀JS開源人臉偵測辨識項目 建議:優秀JS開源人臉偵測辨識項目 Apr 03, 2024 am 11:55 AM

建議:優秀JS開源人臉偵測辨識項目

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟 Dec 17, 2023 pm 06:55 PM

股票分析必備工具:學習PHP和JS繪製蠟燭圖的步驟

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

PHP與JS開發技巧:掌握繪製股票蠟燭圖的方法

如何使用PHP和JS創建股票蠟燭圖 如何使用PHP和JS創建股票蠟燭圖 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS創建股票蠟燭圖

如何使用JS和百度地圖實現地圖多邊形繪製功能 如何使用JS和百度地圖實現地圖多邊形繪製功能 Nov 21, 2023 am 10:53 AM

如何使用JS和百度地圖實現地圖多邊形繪製功能

如何使用JS和百度地圖實現地圖點擊事件處理功能 如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能

js中new運算子做了哪些事情 js中new運算子做了哪些事情 Nov 13, 2023 pm 04:05 PM

js中new運算子做了哪些事情

See all articles