前言

在學(xué)習(xí)類之前我們先來了解一下面向?qū)ο蠛兔嫦蜻^程

面向?qū)ο螅菏且环N開發(fā)思想，一切皆為對象。對象是屬性和行為的結(jié)合體

面向過程：也是一種開發(fā)思想。開發(fā)中的每個細節(jié)，開發(fā)者都需要考慮到。

面向?qū)ο蟮娜筇匦?/p>

（1）封裝性：對象是屬性和行為的封裝體——數(shù)據(jù)安全

（2）繼承性：子類可以繼承父類父類的屬性和方法——代碼復(fù)用

（3）多態(tài)性：同一個消息傳遞給不同對象，出現(xiàn)的效果不同——應(yīng)用靈活，可以適應(yīng)不同的需求

類

定義：具有相同屬性和行為的集合

ES5中實現(xiàn)類的方法：構(gòu)造函數(shù)，在構(gòu)造函數(shù)中封裝了屬性和方法。缺陷是構(gòu)造函數(shù)和普通函數(shù)的定義方式是一樣的，容易混淆。

ES6中類的定義方式：語義性更強、語法更簡潔

class 類名{

屬性

行為

}

class是關(guān)鍵字，專門用來定義類

// 用class定義Student類
    class Student{
        constructor(id,name,sex){ //構(gòu)造函數(shù) id,name,sex是屬性
            this.id = id,
            this.name = name,
            this.sex = sex
        }
        display(){
            console.log('學(xué)號',this.id)
            console.log('姓名',this.name)
            console.log('性別',this.sex)
        }
   }
// 使用Student類創(chuàng)建對象:創(chuàng)建對象時，不能顯式的使用constructor 必須用類名創(chuàng)建 默認(rèn)調(diào)用constructor函數(shù)
let stu1 = new Student(01,'孫悟空','男');
let stu2 = new Student(02,'白骨精','女');
let stu3 = new Student(03,'紫霞仙子','女');
// 使用對象
stu1.display();
console.log('---------------')
stu2.display();
console.log('---------------')
stu3.display();

ES6中支持getter/setter方法來獲取屬性值、設(shè)置屬性值

（1）定義get()方法、set()方法的目的是：用于隱藏對象的屬性名

（2）在使用get()方法、set()方法時不用帶'()'

類定義時需要注意的問題：

（1）類的屬性和函數(shù)：類可以由屬性也可以沒有屬性，可以由方法也可以沒有方法

（2）類的屬性是放在構(gòu)造方法中初始化的，若類沒有屬性，可以不顯式定義構(gòu)造方法，此時，系統(tǒng)會自動生成一個無參的控的構(gòu)造方法

類屬性的setter/getter函數(shù)

1、作用：在面向?qū)ο箝_發(fā)中，對象是屬性和行為的結(jié)合體（封裝性），不能在對象的外部直接訪問屬性，若需要訪問對象的屬性，通過getter/setter方法來進行，就相當(dāng)于在對象的外部屏蔽了對象的屬性

2、用法：下面代碼定義了Location類 并且使用get set函數(shù)

// 定義類
 class Location{
    constructor(){
        this._row = 0,
        this._column = 0,
        this._maxValue = 0
    }
    get row(){
        return this._row;
    }
    set row(row){
        this._row = row;
    }
    get column(){
        return this._column;
    }
    set column(column){
        this._column = column;
    }
    get maxValue(){
        return this._maxValue
    }
    set maxValue(max){
        this._maxValue = max;
    }
}

類的繼承

1、基本概念

（1）基類（父類）：可以派生子類的類

（2）派生類（子類）：由父類派生而來的類

2、繼承的實現(xiàn)

（1）ES5中的繼承實現(xiàn)，沒有類的概念

a、構(gòu)造函數(shù)：構(gòu)造函數(shù)就是類名，在ES5中類的繼承實際就是構(gòu)造函數(shù)的繼承

b、實現(xiàn)：通過call、apply、bind

// 定義構(gòu)造函數(shù)：基類
function Father(name){
    this.name = name,
    this.age = 45
    this.disp = function(){
        console.log('姓名',this.name);
        console.log('年齡',this.age);
    }
}
// 定義構(gòu)造函數(shù)：
function Son(name){
    Father.call(this,name);
    this.height = '189cm';
    this.show = function(){
        this.disp();
        console.log('身高',this.height);
    }
}
let son = new Son('趙四')
son.show();

（2）ES6中的繼承實現(xiàn) extends實現(xiàn)繼承

a、super：指向父類，super(參數(shù))表示調(diào)用父類的構(gòu)造函數(shù)

b、如果在子類的構(gòu)造函數(shù)中調(diào)用父類的構(gòu)造函數(shù)，那么super()必須作為子類構(gòu)造函數(shù)中的第一條語句(在執(zhí)行子類的構(gòu)造函數(shù)之前，必須先執(zhí)行父類的構(gòu)造函數(shù)(先有父，再有子))

c、方法覆蓋(方法重寫OverWrite):在繼承過程中，若父類的某個方法與子類的某個方法同名，則子類方法覆蓋父類的同名方法

d、在子類的方法中可以使用super調(diào)用父類中的某個方法

e、不允許多繼承，只能單繼承

多繼承：類的直接父類有多個

單繼承：類的直接父類只有一個

// 定義父類
class Father{
    constructor(name,age){
        this.name = name,
        this.age = age
    }
    fun(){
        console.log('我是父類中的方法');
    }
    show(){
        console.log('姓名',this.name);
        console.log('年齡',this.age);
    }
}
    class Mother{
        constructor(a,b){
            this.a = a,
            this.b = b
        }
    }
// 定義子類 繼承Father類
class Son extends Father{
    constructor(name,age,height){
         super(name,age);//調(diào)用父類的構(gòu)造函數(shù)
         this.height = height;
    }
    hobby(){
          console.log('我喜歡羽毛球~');
    }
    show(){
          super.show();
          console.log('身高',this.height);
    }
}
let s1 = new Son('小王同學(xué)',22,'187cm');
s1.hobby();
s1.show();
s1.fun();

繼承的好處

在父類中定義好的屬性和方法，子類繼承后可直接使用

類繼承過程中的向上轉(zhuǎn)型

子類對象的類型一定是父類的類型，反之父類對象的類型不能是子類的類型。

注：

（1）typeof：用于判斷變量的數(shù)據(jù)類型（基本數(shù)據(jù)類型）

typeof 變量名 == ‘數(shù)據(jù)類型’

（2）instanceof：用于判斷變量的數(shù)據(jù)類型（類類型）

ES6的模塊化管理

1、Node.js簡介

（1）Node是什么

a、瀏覽器內(nèi)核有兩個引擎：渲染引擎(渲染html/css)、JavaScript引擎()運行JavaScript代碼

b、Node是獨立于瀏覽器的JavaScript的運行環(huán)境，通常將Node稱為JavaScript的服務(wù)器運行環(huán)境

（1）Node相當(dāng)于運行JavaScript程序的虛擬機

（2）是JavaScript的工具庫 Node.js內(nèi)部采用Google公司的V8引擎

（2）使用Node的原因：有了Node后JavaScript就正式成為一個工程化的語言。

2、安裝Node.js

（1）環(huán)境變量的設(shè)置的目的：在自定義的目錄下運行程序時，操作系統(tǒng)可以找到相應(yīng)的指令

3、ES6中的模塊化管理

1、ES6的方式：

（1）一個.js文件就是一個模塊采用“module”方式管理。即用exports導(dǎo)出，用import...from導(dǎo)入、

文件名：主文件名.擴展名

.擴展名作用：指定文件類型 例如： .mp3:音頻文件 .mp4:視頻文件 .jpg .png 圖片文件

（2）Node的方式：采用“CommonJS”方式。即export.module=‘變量名’導(dǎo)出，用require導(dǎo)入

2、在VSCode中配置ES6的模塊管理環(huán)境

（1）：初始化環(huán)境，在存放js文件的文件夾下執(zhí)行：npm init -y（生成package.json文件）

（2）：在package.json文件中加入:"type":module（表示采用的是ES6的模塊化）

（3）導(dǎo)出/導(dǎo)入變量

（4）導(dǎo)入/導(dǎo)出整個模塊：使用“通配符”，表示導(dǎo)入所有

（5）默認(rèn)導(dǎo)出（export default）

1.一個模塊只能有一個默認(rèn)導(dǎo)出，對于默認(rèn)導(dǎo)出，導(dǎo)入的名稱可以和導(dǎo)出的名稱不一致

2、混合導(dǎo)出

3、重命名export和import

到此這篇關(guān)于JavaScript ES6中類與模塊化管理超詳細講解的文章就介紹到這了,更多相關(guān)JS ES6類與模塊化管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論