目錄
封裝" >封裝
繼承" >繼承
多態" >多態
总结" >总结
首頁 web前端 js教程 javaScript物件導向的三個基本特徵介紹

javaScript物件導向的三個基本特徵介紹

Oct 21, 2020 pm 05:53 PM
javascript 物件導向

javaScript物件導向的三個基本特徵介紹

了解過物件導向的同學應該都知道,物件導向三個基本特徵是:封裝、繼承、多型,但是對於這三個字具體可能不太了解。對於前端來講接觸最多的可能就是封裝繼承,對於多型來說可能就不是那麼了解了。

封裝

在說封裝之先了解封裝到底是什麼?

什麼是封裝

#封裝:將物件執行所需的資源封裝在程式物件中-基本上,是方法和數據。物件是「公佈其介面」。其他附加到這些介面上的物件不需要關心物件實作的方法即可使用這個物件。這個概念就是「不要告訴我你是怎麼做的,只要做就好了。」物件可以看作是一個自我包含的原子。物件介麵包括了公共的方法和初始化資料。 (節錄自百度百科)

我對封裝的理解,可能還有一個步驟就是抽離,首先你要清楚在一個對程式碼中你應該抽離那些屬性方法,有了這些為基礎才能更好的做好封裝。

封裝無非就是其屬性和方法封裝。

  1. 類別:封裝物件的屬性與行為

  2. #方法:封裝特定邏輯功能

  3. 存取封裝:存取修飾封裝無非就是對其存取權限進行封裝

class Employees {
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    getInfo(){
        let {name,age} = this;
        return {name,age};
    }
    static seyHi(){
        console.log("Hi");   
    }
}

let lisi = new Employees("Aaron",18);
lisi.seyHi();   // lisi.seyHi is not a function
lisi.getInfo();  // {name: "Aaron", age: 18}
Employees.seyHi();  // Hi
登入後複製

Employees中抽出的公有屬性有name#,age,公共方法有getInfo,seyHi,然而getInfoseyHi不同的是seyHi 使用了static修飾符,改變其為靜態方法,seyHi只屬於Employees這個類別。然而getInfo方法則是屬於實例的。

這裡使用了staticseyHi方法對其進行了存取權限的封裝。

再舉一個例子。

Promise.then()  //  Promise.then is not a function
let p1 = new Promise(() => {})
p1.then();  //  Promise {<pending>}
Promise.all([1]);   //  Promise {<resolved>: Array(1)}
登入後複製

從上面的程式碼可以看出Promise也使用了static對其方法的存取權限進行了封裝。

繼承

繼承:說到繼承並不太陌生,繼承可以使得子類別具有父類別的各種的公有屬性和公有方法。而不需要再次編寫相同的程式碼。在令子類別繼承父類別的同時,可以重新定義某些屬性,並重寫某些方法,即覆寫父類別的原始屬性和方法,使其獲得與父類別不同的功能。 (節錄自百度百科)

子類別繼承父類別後,子類別具有父類別屬性和方法,然而也同樣具備自己所獨有的屬性和方法,也就是說,子類別的功能要比父類多或相同,不會比父類少。

class Employees {
    constructor(name){
        this.name = name;
    }
    getName(){
        console.log(this.name)
    }
    static seyHi(){
        console.log("Hi");   
    }
}
class Java extends Employees{
    constructor(name){
        super(name);
    }
    work(){
        console.log("做后台工作");
    }
}
let java = new Java("Aaron");
java.getName();
java.work();
// java.seyHi();    //  java.seyHi is not a function
登入後複製

從上面的範例可以看出繼承不會繼承父類別的靜態方法,只會繼承父類別的公有屬性與方法。這一點需要注意。

子類別繼承之後既擁有了getName方法,同樣也擁有自己的worker方法。

多態

多態:按字面的意思是“多種狀態”,允許將子類別類型的指標賦值給父類別類型的指標。 (節錄自百度百科)

說白了多態就是相同的事物,呼叫其相同的方法,參數也相同時,但表現的行為卻不同。多態分為兩種,一種是行為多態與物件的多態。

多態的表現形式重寫與重載。

什麼是重寫

重寫:子類別可繼承父類別中的方法,而不需要重新編寫相同的方法。但有時子類別並不想原封不動地繼承父類別的方法,而是想作一定的修改,這就需要採用方法的重寫。方法重寫又稱方法覆蓋。 (節選自百度百科)

class Employees {
    constructor(name){
        this.name = name;
    }
    seyHello(){
        console.log("Hello")
    }
    getName(){
        console.log(this.name);
    }
}
class Java extends Employees{
    constructor(name){
        super(name);
    }
    seyHello(){
        console.log(`Hello,我的名字是${this.name},我是做Java工作的。`)
    }
}
const employees = new Employees("Aaron");
const java = new Java("Leo");
employees.seyHello();   //  Hello
java.seyHello();    //  Hello,我的名字是Leo,我是做Java工作的。
employees.getName();    //  Aaron
java.getName(); //  Leo
登入後複製

透過上面的程式碼可以看出Java繼承了Employees,然而子類別與父類別中都存在seyHello 方法,為了滿足不同的需求子類別繼承父類別之後重寫了seyHello方法。所以在呼叫的時候會得到不同的結果。既然子類別繼承了父類,子類別也同樣擁有父類別的getName方法。

什麼是重載

#

重载就是函数或者方法有相同的名称,但是参数列表不相同的情形,这样的同名不同参数的函数或者方法之间,互相称之为重载函数或者方法。(节选自百度百科)

class Employees {
    constructor(arg){
        let obj = null;
        switch(typeof arg)
        {
            case "string":
                  obj = new StringEmployees(arg);
                  break;
            case "object":
                  obj = new ObjEmployees(ObjEmployees);
                  break;
            case "number":
                obj = new NumberEmployees(ObjEmployees);
                break;
        }
        return obj;
    }
}
class ObjEmployees {
    constructor(arg){
        console.log("ObjEmployees")
    }
}
class StringEmployees {
    constructor(arg){
        console.log("StringEmployees")
    }
}
class NumberEmployees {
    constructor(arg){
        console.log("NumberEmployees")
    }
}
new Employees({})   // ObjEmployees
new Employees("123456") //  StringEmployees
new Employees(987654)   //  NumberEmployees
登入後複製

因为JavaScript是没有重载的概念的所以要自己编写逻辑完成重载。

在上面的代码中定义了Employees,ObjEmployees,StringEmployees,NumberEmployees类,在实例化Employees的时候在constructor里面进行了判断,根据参数的不同返回不同的对应的类。

这样完成了一个简单的类重载。

总结

  1. 封装可以隐藏实现细节,使得代码模块化;

  2. 继承可以扩展已存在的代码模块(类),它们的目的都是为了——代码重用。

  3. 多态就是相同的事物,调用其相同的方法,参数也相同时,但表现的行为却不同。多态分为两种,一种是行为多态与对象的多态。

在编程的是多多运用这个写思想对其编程时很有用的,能够使你的代码达到高复用以及可维护。

相关免费学习推荐:js视频教程

以上是javaScript物件導向的三個基本特徵介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

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

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

簡易JavaScript教學:取得HTTP狀態碼的方法 簡易JavaScript教學:取得HTTP狀態碼的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

探索Go語言中的物件導向編程 探索Go語言中的物件導向編程 Apr 04, 2024 am 10:39 AM

Go語言支援物件導向編程,透過型別定義和方法關聯實作。它不支援傳統繼承,而是透過組合實現。介面提供了類型間的一致性,允許定義抽象方法。實戰案例展示如何使用OOP管理客戶訊息,包括建立、取得、更新和刪除客戶操作。

PHP高階特性:物件導向程式設計的最佳實踐 PHP高階特性:物件導向程式設計的最佳實踐 Jun 05, 2024 pm 09:39 PM

PHP中OOP最佳實務包括命名約定、介面與抽象類別、繼承與多型、依賴注入。實戰案例包括:使用倉庫模式管理數據,使用策略模式實現排序。

Golang中有類似類別的物件導向特性嗎? Golang中有類似類別的物件導向特性嗎? Mar 19, 2024 pm 02:51 PM

在Golang(Go語言)中並沒有傳統意義上的類別的概念,但它提供了一種稱為結構體的資料類型,透過結構體可以實現類似類別的物件導向特性。在本文中,我們將介紹如何使用結構體實現物件導向的特性,並提供具體的程式碼範例。結構體的定義和使用首先,讓我們來看看結構體的定義和使用方式。在Golang中,結構體可以透過type關鍵字定義,然後在需要的地方使用。結構體中可以包含屬

如何在JavaScript中取得HTTP狀態碼的簡單方法 如何在JavaScript中取得HTTP狀態碼的簡單方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP狀態碼取得方法簡介:在進行前端開發中,我們常常需要處理與後端介面的交互,而HTTP狀態碼就是其中非常重要的一部分。了解並取得HTTP狀態碼有助於我們更好地處理介面傳回的資料。本文將介紹使用JavaScript取得HTTP狀態碼的方法,並提供具體程式碼範例。一、什麼是HTTP狀態碼HTTP狀態碼是指當瀏覽器向伺服器發起請求時,服務

Go語言的物件導向特性解析 Go語言的物件導向特性解析 Apr 04, 2024 am 11:18 AM

Go語言支援物件導向編程,透過struct定義對象,使用指標接收器定義方法,並透過介面實現多態。物件導向特性在Go語言中提供了程式碼重用、可維護性和封裝,但也存在缺乏傳統類別和繼承的概念以及方法簽章強制型別轉換的限制。

PHP物件導向程式設計的深入理解:物件導向程式設計的除錯技巧 PHP物件導向程式設計的深入理解:物件導向程式設計的除錯技巧 Jun 05, 2024 pm 08:50 PM

透過掌握追蹤物件狀態、設定斷點、追蹤異常和利用xdebug擴展,可以有效調試PHP物件導向程式碼。 1.追蹤物件狀態:使用var_dump()和print_r()檢視物件屬性和方法值。 2.設定斷點:在開發環境中設定斷點,偵錯器會在執行到達斷點時暫停,以便檢查物件狀態。 3.追蹤異常:使用try-catch區塊和getTraceAsString()取得異常發生時的堆疊追蹤和訊息。 4.利用偵錯器:xdebug_var_dump()函數可在程式碼執行過程中檢查變數的內容。

JavaScript和WebSocket:打造高效率的即時搜尋引擎 JavaScript和WebSocket:打造高效率的即時搜尋引擎 Dec 17, 2023 pm 10:13 PM

JavaScript和WebSocket:打造高效率的即時搜尋引擎引言:隨著網路的發展,使用者對即時搜尋引擎的要求也越來越高。傳統的搜尋引擎在進行搜尋時,使用者需要點擊搜尋按鈕後才能得到結果,這種方式無法滿足使用者對於即時搜尋結果的需求。因此,採用JavaScript和WebSocket技術來實現即時搜尋引擎成為了一個熱門的話題。本文將詳細介紹使用JavaScri

See all articles