JavaScript Class類實(shí)例講解

更新時(shí)間：2022年11月08日 08:33:07 作者：亦世凡華、

ES6提供了更接近面向?qū)ο?注意:javascript本質(zhì)上是基于對(duì)象的語(yǔ)言)語(yǔ)言的寫法,引入了Class(類)這個(gè)概念,作為對(duì)象的模板,下面這篇文章主要給大家介紹了關(guān)于JavaScript ES6中class定義類的相關(guān)資料,需要的朋友可以參考下

Class類

ES6提供了更接近傳統(tǒng)語(yǔ)言的寫法，引入了Class(類)這個(gè)概念，作為對(duì)象的模板。通過(guò)class關(guān)鍵字，可以定義類?；旧希珽S6的class可以看作只是一個(gè)語(yǔ)法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對(duì)象原型的寫法更加清晰，更像面向?qū)ο缶幊痰恼Z(yǔ)法。

初識(shí)class

之前ES5通過(guò)構(gòu)造函數(shù)實(shí)現(xiàn)實(shí)例化的方法

<script>
    // 定義人類
    function People(name,age){
        this.name = name
        this.age = age
    }
    // 添加方法
    People.prototype.say = function (){
        console.log('hello world');
    }
    // 實(shí)例化方法
    let person = new People('張三',18)
    person.say()//hello world
    console.log(person);//People {name: '張三', age: 18}
</script>

ES6 class方法實(shí)現(xiàn)

constructor()方法是類的默認(rèn)方法，通過(guò) new 命令生成對(duì)象實(shí)例時(shí)，自動(dòng)調(diào)用該方法，一個(gè)類必須有constructor()方法，如果沒(méi)有顯示定義，一個(gè)空的constructor()方法會(huì)被默認(rèn)添加。

<script>
    // class
    class People {
        // 構(gòu)造方法 名字是固定格式不能修改
        constructor(name,age){
            this.name = name
            this.age = age
        }
        // 方法必須使用該語(yǔ)法，不能使用 ES5 的對(duì)象完整形式
        say(){
            console.log('hello world');
        }
    }
    // 實(shí)例化對(duì)象
    let person = new People('張三',18)
    person.say()//hello world
    console.log(person);//People {name: '張三', age: 18}
</script>

class中g(shù)etter和setter設(shè)置

在ES6中，類的內(nèi)部可以使用 getter (取值函數(shù)) 和 setter (存值函數(shù)) 關(guān)鍵字，即 get 和 set ，對(duì)某個(gè)屬性設(shè)置取值函數(shù)和存值函數(shù)，攔截該函數(shù)的存取行為。

<script>
    class People {
        get name(){
            console.log('我是張三');
            return '這是我的名字'//如果不寫return，默認(rèn)是undefined
        }
        set name(Name){//形參必須有
            console.log('我的名字被修改了');
        }
    }
    // 實(shí)例化對(duì)象
    let p = new People()
    // 只要讀取 p 的實(shí)例化屬性，就會(huì)執(zhí)行 get 關(guān)鍵字函數(shù)里面代碼，而且這個(gè)函數(shù)的返回值就是屬性的一個(gè)值
    console.log(p.name);
    // 只要對(duì) name 屬性進(jìn)行一個(gè)修改，如果有set關(guān)鍵字函數(shù)，就會(huì)執(zhí)行該函數(shù)
    p.name = 'f'
</script>

表達(dá)式方式書寫

和函數(shù)一樣，類可以用表達(dá)式定義書寫，需要注意的是：定義的類名只能在Class內(nèi)部使用，指代當(dāng)前類，在Class外部，類只能用自己定義等于類的常量。

<script>
    const myClass = class Me {
        getClass(){
            return Me.name//返回類名
        }
    }
    let c = new myClass()
    console.log(c.getClass())//Me
    Me.name//Me is not defined 
    // 如果類的內(nèi)部沒(méi)用到的話，可以省略Me，也就是可以寫成下面的形式
    const MyClass = class {};
</script>

靜態(tài)屬性與靜態(tài)方法

靜態(tài)屬性是指 Class 本身的屬性，即 Class.propName，而不是定義在實(shí)例對(duì)象 this 上的屬性。

實(shí)例對(duì)象和函數(shù)對(duì)象的屬性是不相通的，實(shí)例對(duì)象的屬性和構(gòu)造函數(shù)的原型對(duì)象相通，實(shí)例對(duì)象只能繼承構(gòu)造函數(shù)原型中的屬性和方法。

<script>
    function People(){
    }
    // 函數(shù)屬性和方法
    People.name = '張三'
    People.say = function(){
        console.log('hello world');
    }
    // 原型對(duì)象屬性和方法
    People.prototype.age = 18
    // 實(shí)例化對(duì)象
    let p = new People()
    console.log(People.name,People.say());
    console.log(p.age);
    console.log(p.name,p.say());
</script>

以class方法展示，因?yàn)镋S6明確規(guī)定，Class內(nèi)部只有靜態(tài)方法，沒(méi)有靜態(tài)屬性，而要想得到設(shè)置靜態(tài)屬性，需要在實(shí)例屬性前面加上 static 關(guān)鍵字；靜態(tài)方法也要加上 static 關(guān)鍵字，表示該方法不會(huì)被實(shí)例繼承，而是直接通過(guò)類來(lái)調(diào)用。

<script>
    class People {
        // 靜態(tài)屬性
        static name = '張三'
        static say(){
            console.log('hello world');
        }
    }
    let p = new People()
    console.log(p.name);//undefined
    console.log(People.name);//張三
</script>

私有屬性和私有方法

常見需求：私有屬性和方法，是只能在類內(nèi)部訪問(wèn)的屬性和方法，外部不能訪問(wèn)，有利于代碼的封裝。

ES6中正式為class添加了私有屬性和方法，方法是在屬性和方法名之前使用 # 表示，如果不帶 # ，會(huì)被當(dāng)作另一個(gè)屬性和方法。

<script>
    class person {
        // 私有屬性
        #name
        constructor(name){
            this.#name = name
        }
        // 私有方法
        #sayName(){
            return this.#name
        }
        result(){
            console.log(this.#name);
        }
    }
    let p = new person()
    p.result = '張三'
    console.log(p);//person {result: '張三', #sayName: ?, #name: undefined}
    p.#name//報(bào)錯(cuò)
</script>

當(dāng)我們想判斷某個(gè)類的私有屬性是否存在時(shí)，我們可以用 in 運(yùn)算符進(jìn)行判斷。

<script>
    class A {
        #foo = 0;
        m() {
            console.log(#foo in this); // true
            console.log(#bar in this); // Private field '#bar' must be declared in an enclosing class(提示我們：私有字段“#bar”必須在封閉類中聲明)
        }
    }
    let a = new A()
    a.m()
</script>

class繼承

構(gòu)造函數(shù)實(shí)現(xiàn)繼承

通過(guò)原型鏈進(jìn)行繼承，如果有不熟悉原型鏈的朋友，可以看一下我之前的文章：原型和原型鏈

<script>
    // 動(dòng)物
    function Animals(name,age){
        this.name = name
        this.age = age
    }
    Animals.prototype.call = function(){
        console.log('我是動(dòng)物');
    }
    // 狗
    function Dog(name,age,color,gender){
        // 改變this的指向，繼承父類
        Animals.call(this,name,age)
        this.color = color
        this.gender = gender
    }
    // 設(shè)置子類構(gòu)造函數(shù)的原型
    Dog.prototype = new Animals //此時(shí)子類的實(shí)例對(duì)象就會(huì)繼承父類上面的方法
    Dog.prototype.constructor = Dog
 
    // 聲明子類的方法
    Dog.prototype.say = function(){
        console.log('汪汪汪?。?！');
    }
    // 子類對(duì)象進(jìn)行實(shí)例化
    const d = new Dog('小明',3,'棕色','雄')
    console.log(d);
</script>

class類實(shí)現(xiàn)繼承

class可以通過(guò) extends 關(guān)鍵字實(shí)現(xiàn)繼承，讓子類繼承父類屬性和方法，可以看出 extends 的寫法比上文原型鏈繼承清晰方便的多。

<script>
    class Animals {
        // 構(gòu)造方法
        constructor(name,age){
            this.name = name
            this.age = age
        }
        // 父類成員的屬性
        call(){
            console.log('我是動(dòng)物');
        }
    }
    class Dog extends Animals {
        // 構(gòu)造方法
        constructor(name,age,color,gender){
            // 調(diào)用父類方法，需要用super(),super()就是父類的constructor()方法
            super(name,age)
            this.color = color
            this.gender = gender
        }
        // 子類獨(dú)有的方法
        say(){
            console.log('汪汪汪?。?！');
        }
        // 當(dāng)子類和父類重名時(shí)，優(yōu)先調(diào)用的是子類的方法
        call(){
            console.log('我也是動(dòng)物');
            // 如果想調(diào)用父類方法,使用如下語(yǔ)句:super.父類方法()
            super.call()
        }
    }
    // 實(shí)例化子類對(duì)象
    const d = new Dog('小明',3,'棕色','雄')
    console.log(d);
    d.call()
    d.say()
</script>

super 關(guān)鍵字

上面代碼用到 super 這個(gè)關(guān)鍵字，這里簡(jiǎn)單說(shuō)明一下：子類繼承父類的 constructor() 構(gòu)造函數(shù)中必須要有 super()，代表調(diào)用父類的構(gòu)造函數(shù)，沒(méi)有就會(huì)報(bào)錯(cuò)，super雖然代表父類的構(gòu)造函數(shù)，但是返回的是子類的實(shí)例，即super內(nèi)部的this指的是子類的實(shí)例。作為函數(shù)時(shí)，super() 只能用在子類的構(gòu)造函數(shù)中，用在其他地方就會(huì)報(bào)錯(cuò)。

判斷繼承是否存在

Object.getPrototypeOf()方法可以用來(lái)從子類上獲取父類，所以可以用來(lái)判斷一個(gè)類是否繼承另一個(gè)類。

<script>
    class people {}
    class boy extends people {}
    console.log(Object.getPrototypeOf(boy) === people);//true
</script>

靜態(tài)屬性和方法繼承

父類的靜態(tài)屬性和方法也能被子類繼續(xù)，如下：

<script>
    class people {
        // 父類靜態(tài)屬性 屬性為數(shù)值
        static age = 18
        // 父類靜態(tài)屬性 屬性為對(duì)象
        static h = {height:180}
        // 父類靜態(tài)方法
        static say(){
            console.log('hello world');
        }
    }
    // 子類繼承父類
    class boy extends people {
        constructor(){
            // 調(diào)用父類的構(gòu)造函數(shù)
            super()
            // boy類繼承靜態(tài)屬性時(shí)，會(huì)采用淺拷貝，拷貝父類靜態(tài)屬性的值，因此people.age和boy.age是兩個(gè)彼此獨(dú)立的屬性。
            boy.age--
            // 如果父類的靜態(tài)屬性的值是一個(gè)對(duì)象，那么子類的靜態(tài)屬性也會(huì)指向這個(gè)對(duì)象，因?yàn)闇\拷貝只會(huì)拷貝對(duì)象的內(nèi)存地址所以，子類修改這個(gè)對(duì)象的屬性值，會(huì)影響到父類。
            boy.h.height--
        }
    }
    // 實(shí)例化子類
    let b = new boy()
    boy.say()
    console.log(people.age);
    console.log(boy.age);
    console.log(boy.h.height);
    console.log(people.h.height);
    console.log(b);
</script>

私有屬性和方法繼承

私有屬性和方法只能定義在它本身的class里面使用，所以子類會(huì)繼承父類所有的屬性和方法除了私有屬性和方法，那么如何讓子類訪問(wèn)到父類中的私有屬性和方法呢？如果父類定義了私有屬性的讀寫方法，子類就可以通過(guò)這些方法，讀取私有屬性。

<script>
    class people {
        #name = '張三'
        // 定義用來(lái)讀取私有屬性和方法的函數(shù)
        getName(){
            return this.#name
        }
    }
    class boy extends people {
        constructor(){
            // 調(diào)用父類的構(gòu)造函數(shù)
            super()
            console.log(this.getName());//張三
        }
    }
    let b = new boy()
</script>

class顯示原型與隱式原型關(guān)系

每個(gè)對(duì)象都有隱式原型 __proto__ 屬性，指向?qū)?yīng)的構(gòu)造函數(shù)的顯示原型 prototype 屬性，class作為構(gòu)造函數(shù)的語(yǔ)法糖，同時(shí)也具有 prototype 屬性和 __proto__ 屬性，所以存在兩條繼承鏈。當(dāng)然這里這做一個(gè)了解。

<script>
    class people {}
    class boy extends people{}
    // 子類的__proto__屬性，表示構(gòu)造函數(shù)的繼承，總是指向父類。
    console.log(boy.__proto__ === people); // true
    // 子類prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。
    console.log(boy.prototype.__proto__ === people.prototype); // true
</script>

到此這篇關(guān)于JavaScript Class類實(shí)例講解的文章就介紹到這了,更多相關(guān)JS Class類內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: