成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

js 中的class

fai1017 / 1873人閱讀

摘要：重點在于構(gòu)造函數(shù)，使用的是構(gòu)造函數(shù)來模擬類。使用創(chuàng)建子類由于是在類中定義，關(guān)鍵字可以省去創(chuàng)建父類類不可繼承沒有構(gòu)造函數(shù)的對象如果一個對象沒有構(gòu)造函數(shù)，將不能進行繼承。

js 的class
由于存在轉(zhuǎn)換器這種神器，所以代碼能直接轉(zhuǎn)換為es5，用es6的語法寫。

一些解釋

js的class僅僅為一個語法糖，是在原先構(gòu)造函數(shù)的基礎(chǔ)上出現(xiàn)的class，僅僅如此。所以使用構(gòu)造函數(shù)構(gòu)造類，或者使用class語法糖構(gòu)造類都是相同的。具體還是使用prototype和this來進行模擬類。

重點在于構(gòu)造函數(shù)，使用的是構(gòu)造函數(shù)來模擬類。
類聲明

需要聲明一個類，需要使用class

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
和函數(shù)聲明的最大的區(qū)別在于，類聲明，不會出現(xiàn)聲明提前，函數(shù)聲明會出現(xiàn)聲明提前，這是兩者最大的區(qū)別。

在上方中，聲明類以后，新建一個對象。

let rectAngle = new Rectangle

該對象具有constructor方法。

匿名類

和匿名函數(shù)類似，類依舊可以進行匿名聲明

let Rectangle = class {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}
在類表達式中，同樣會出現(xiàn)類聲明提升的問題。
constructor

為一個構(gòu)造函數(shù)，用于初始化class并創(chuàng)建一個對象

即為原先學習的構(gòu)造函數(shù)，函數(shù)為對象，對象為函數(shù)。
class Rectangle {
    // 構(gòu)造函數(shù)
    constructor(height, width) {
        this.height = height;
        this.width = width;
    };
    // get 方法即調(diào)用將會返回的值
    get area() {
        return this.calcArea();
    };
    // 定義calcArea函數(shù)
    calcArea() {
        return this.height * this.width;
    }
}

上方定義了一個類如果需要使用

const square = new Rectangle();
console.log(square.area);

即可完成對類的使用。

static

為一個靜態(tài)方法，該靜態(tài)new出的來的對象不能進行使用。

常常用于工具函數(shù)的書寫
class Point {
    constructor(x, y){
        this.x = x;
        this.y = y;
    };

    static distance(a, b){
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);    // 畢達哥拉斯定理
    }
}
// 使用
const p1 = new Point(5,5);
const p2 = new Point(10,10);
console.log(Point.distance(p1,p2));
關(guān)于嚴格模式

由于js存在嚴格模式，并且上面的內(nèi)容在嚴格模式下執(zhí)行，如果該對象沒有this的值，將不會返回其本身。

傳統(tǒng)的使用prototype將會返回其本身，因為傳統(tǒng)的不在嚴格模式下執(zhí)行。
extends

使用extends創(chuàng)建子類

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {    // 由于是在類中定義，function關(guān)鍵字可以省去
        console.log(this.name);
    }
}
// 創(chuàng)建DOg父類
class Dog extends Animal {
    speak() {
        console.log(this.name);
    }
}

let d = new Dog();
d.name = "ming"
d.speak();
類不可繼承沒有構(gòu)造函數(shù)的對象

如果一個對象沒有構(gòu)造函數(shù)，將不能進行繼承。
請使用

Object.create()

進行創(chuàng)建給予對象的新對象

const a = {

};

const b = Object.create(a);    // 創(chuàng)建基于原型a的對象
super

使用super調(diào)用超類

class Cat {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log();
    };
}  

class Lion extends Cat {
    speak() {
        super.speak();
    }
}

即使用super調(diào)用超類

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108503.html

相關(guān)文章

  • CSS Modules詳解及React中實踐

    摘要：上例中打印的結(jié)果是對中的名都做了處理，使用對象來保存原和混淆后的對應關(guān)系。結(jié)合實踐在處直接使用中名即可。如因為只會轉(zhuǎn)變類選擇器，所以這里的屬性選擇器不需要添加。 showImg(http://gtms01.alicdn.com/tps/i1/TB15w0HLpXXXXbdaXXXjhvsIVXX-600-364.png); CSS 是前端領(lǐng)域中進化最慢的一塊。由于 ES2015/201...

    wemall 評論0 收藏0

  • React入門0x007: 生命周期概念

    摘要：概述上一章只是稍微了解了一下和相關(guān)的簡單用法，這一章需要講一下組件的生命周期。生命周期的概念這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現(xiàn)一個類似的吧。 0x000 概述 上一章只是稍微了解了一下state和setState相關(guān)的簡單用法，這一章需要講一下組件的生命周期。 0x001 生命周期的概念 這玩意似乎很高大上，其實就是一個假概念罷了，直接來實現(xiàn)一個類似的吧。大凡事物從...

    Blackjun 評論0 收藏0

  • CSS中的class與id區(qū)別及用法

    摘要：與基本屬性及用法在程序中稱類，同時在中也書面語也叫類。在樣式中以小寫的點及來命名如屬性屬性值而在頁面里則以來選擇調(diào)用命名好的又叫選擇器。也就是說只是頁面元素的標識，供其他元素腳本等引用。? ? 我們平常在用DIV CSS制作Xhtml網(wǎng)頁頁面時，常會用到class 和id來選擇調(diào)用CSS樣式屬性。 CLASS與ID基本屬性及用法： Class 在程序中稱類，同時在CSS中也書面語也叫類。 ...

    Carl 評論0 收藏0

  • JS中的className操作

    摘要：檢查元素是否已經(jīng)存在某下面的正則表達式用來檢查元素是否已經(jīng)存在某個使用操作使用操作現(xiàn)代瀏覽器都支持使用方法來操作元素的，但是中不支持該方法，即使使用了 添加className (1)修改元素的所有的 class 用新的 class 替換掉原有的所有 class，可以設(shè)置 className 屬性： document.getElementById(MyElement).className...

    劉厚水 評論0 收藏0

  • ES6 class繼承與super關(guān)鍵詞深入探索

    摘要：請看對應版本干了什么可知，相當于以前在構(gòu)造函數(shù)里的行為。這種寫法會與上文中寫法有何區(qū)別我們在環(huán)境下運行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統(tǒng)面向?qū)ο笳Z言的class寫法，ES6發(fā)布之后，Babel迅速跟進，廣大開發(fā)者也很快喜歡上ES6帶...

    jubincn 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<