首頁  >  文章  >  web前端  >  javaScript物件導向的三個基本特徵介紹

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

青灯夜游
青灯夜游轉載
2020-10-21 17:53:253643瀏覽

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中文網其他相關文章!

陳述:
本文轉載於:segmentfault.com。如有侵權,請聯絡admin@php.cn刪除