JavaScript中類(class)的介紹和應(yīng)用舉例詳解

更新時(shí)間：2025年01月06日 10:21:42 作者：白菜不太菜

這篇文章主要介紹了JavaScript中類(class)介紹和應(yīng)用的相關(guān)資料,JavaScript中的類是模板,用于創(chuàng)建實(shí)例對(duì)象,包含屬性和方法,類可以通過(guò)extends關(guān)鍵字繼承父類,子類可以重寫父類的方法,需要的朋友可以參考下

一、類的概念

什么是類？

在生活中，類一些具有相似屬性和行為的事物抽象出來(lái)的概念，比如：人類、球類、汽車類；

在JavaScript中，類是模板，是用于創(chuàng)建實(shí)例對(duì)象的模板；相當(dāng)于實(shí)例的原型（prototype）；

二、類的使用

1、語(yǔ)法

class 類名 {  
  constructor(){
      ...
    }
  ...
}

class：ES6中提供了class關(guān)鍵字，用來(lái)創(chuàng)建類；
類名：一般為名詞，采用首字母大寫表示，如Person、Car...；
{......}：類體放在一對(duì)大括號(hào)中，我們可以在大括號(hào)內(nèi)定義類的成員，比如構(gòu)造函數(shù)、靜態(tài)方法，等等；
constructor(){......}：每個(gè)類都會(huì)包含的一個(gè)特殊方法，類的構(gòu)造函數(shù)，用來(lái)實(shí)例化一個(gè)由class創(chuàng)建的對(duì)象；

2、實(shí)例

// 定義類
class ClassName {
  // 構(gòu)造方法
  constructor(name) {
    this.name = name; // 實(shí)例屬性
  }
  static author = "zyl"; // 靜態(tài)屬性

  #attr = 10; // 私有屬性

  // 靜態(tài)方法
  static sFn(data) {
    return `我是靜態(tài)方法，只能通過(guò)類名調(diào)用，接收的參數(shù)為${data}；`;
  }

  // 普通方法
  fn(data) {
    console.log(`私有屬性的值為${this.#attr}；`);   // 訪問私有屬性
    return `我是普通方法，通過(guò)實(shí)例調(diào)用，接收的參數(shù)為${data}；`;
  }
}
// 實(shí)例化
const class1 = new ClassName("第一個(gè)類");
console.log(class1); // ClassName {name: '第一個(gè)類'}

// 訪問靜態(tài)屬性
console.log(ClassName.author); // zyl

// 訪問實(shí)例屬性
console.log(class1.name); // 第一個(gè)類

// 訪問靜態(tài)方法
console.log(ClassName.sFn("arg")); // 我是靜態(tài)方法，只能通過(guò)類名調(diào)用，接收的參數(shù)為arg；

// 訪問實(shí)例方法
console.log(class1.fn("123")); // 私有屬性的值為10； 我是普通方法，通過(guò)實(shí)例調(diào)用，接收的參數(shù)為123；

三、類的屬性

JavaScript類中的屬性有：靜態(tài)屬性、實(shí)例屬性、私有屬性；

1、靜態(tài)屬性

類的屬性，使用static關(guān)鍵字定義，通過(guò)【類名.屬性名】訪問；

2、實(shí)例屬性

定義在構(gòu)造函數(shù)的this上，通過(guò)【實(shí)例.屬性名】訪問；

3、私有屬性

使用【#屬性名】的方式定義，只能在類的內(nèi)部訪問；

// 定義類
class ClassName {
  // 構(gòu)造方法
  constructor(name) {
    this.name = name; // 實(shí)例屬性
  }
  static author = "zyl"; // 靜態(tài)屬性

  #attr = 10; // 私有屬性
  fn() {
    return this.#attr;
  }
}
// 實(shí)例化
const class1 = new ClassName("第一個(gè)類");
console.log(class1); // ClassName {name: '第一個(gè)類'}

// 訪問靜態(tài)屬性
console.log(ClassName.author);  // zyl

// 訪問實(shí)例屬性
console.log(class1.name);   // 第一個(gè)類

// 訪問私有屬性
console.log(class1.fn()); // 10

四、類的方法

JavaScript類中方法有：構(gòu)造方法、靜態(tài)方法、普通方法、私有方法；

1、構(gòu)造方法

構(gòu)造方法是一種特殊的方法：

名稱為constructor()；
一個(gè)類中可以添加一個(gè)構(gòu)造方法，用于對(duì)類進(jìn)行實(shí)例化；
構(gòu)造方法中可以對(duì)初始化對(duì)象屬性；
使用new關(guān)鍵字實(shí)例化時(shí)，會(huì)自動(dòng)執(zhí)行constructor()；
定義類時(shí)，若沒有定義constructor()構(gòu)造方法，JavaScript會(huì)自動(dòng)聲明一個(gè)空的constructor()方法；

// 定義Person類
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

// 創(chuàng)建person1實(shí)例對(duì)象
const person1 = new Person("zyl", 18);
console.log(person1);         // Person {name: 'zyl', age: 18}

2、靜態(tài)方法

使用static關(guān)鍵字定義，又叫類方法，它是屬于類的，而非實(shí)例對(duì)象；

靜態(tài)方法不能繼承，不能通過(guò)實(shí)例調(diào)用，只能通過(guò)當(dāng)前類名調(diào)用【類名.方法名】（父類的靜態(tài)方法可以被子類繼承）；

// 定義品牌類
class Brand {
  constructor(name, type) {
    this.name = name;
    this.type = type;
  }

  // 靜態(tài)方法，判斷是否為vip用戶
  static isVip(count) {
    return count == "zylcount" ? "Vip用戶" : "新用戶";
  }

  // 靜態(tài)方法，獲取品牌折扣價(jià)
  static dPrice(price) {
    return price > 10 ? price * 0.9 : price * 0.95;
  }
}

const brand1 = new Brand("zylBrand", "clothing");
console.log(brand1);                     // Brand {name: 'zylBrand', type: 'clothing'}

// 調(diào)用靜態(tài)方法，通過(guò)類名Brand調(diào)用，而非實(shí)例brand1調(diào)用；
console.log(Brand.isVip("1111111"));     // 新用戶
console.log(Brand.dPrice(12));           // 10.8

3、普通方法

類中可以定義任意數(shù)量的普通方法；

普通方法定義在類的原型上（prototype屬性上），會(huì)被實(shí)例繼承；

通過(guò)實(shí)例調(diào)用【實(shí)例.方法名】，不能通過(guò)類名調(diào)用；

// 定義汽車類
class Car {
  constructor(brand, price) {
    this.brand = brand;
    this.price = price;
  }
  // 定義普通方法 
  getInfo() {
    return `該車的品牌是${this.brand};售賣價(jià)格是${this.price}`;
  }
}
let car1 = new Car("volvo", "16.8w");
console.log(car1);                 //  {brand: 'volvo', price: '16.8w'}

// 通過(guò)實(shí)例調(diào)用普通方法
console.log(car1.getInfo());       //  該車的品牌是volvo;售賣價(jià)格是16.8w

// 普通方法是定義在Car類的原型上
console.log(Car.prototype);   // {constructor: ?, getInfo: ?}
console.log(Car.prototype.getInfo === car1.__proto__.getInfo);   // true

五、類的繼承

JavaScript中允許我們?cè)趧?chuàng)建一個(gè)類的時(shí)候，依賴于另一個(gè)類；被創(chuàng)建的類稱為【子類/派生類】，被依賴的類稱為【父類/基類】；子類會(huì)繼承父類的屬性和方法，有利于提高代碼的可復(fù)用性；

1、extends

extends關(guān)鍵字，用于類的繼承；使創(chuàng)建子類繼承一個(gè)父類，子類會(huì)繼承父類的所有屬性和方法；

（1）語(yǔ)法

class 子類 extends 父類 {
    // 定義子類的屬性和方法
    ...    
}

（2）實(shí)例

class ParentClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  static attr = 'abc';
  static sFn(data){
    return `我是定義在父類的靜態(tài)方法，收到的參數(shù)為：${data}`;
  }
  getInfo(data) {
    return `我是定義在父類的普通方法，收到的參數(shù)為：${data}`;
  }
}

class ChildClass extends ParentClass { }

const parent1 = new ParentClass('parent', '45');  
const child1 = new ChildClass('zyl', 20);  
console.log(parent1);                 // ParentClass {name: 'parent', age: '45'}
console.log(child1);                  // ChildClass {name: 'zyl', age: 20}
console.log(ChildClass);              // class ChildClass extends ParentClass {}
console.log(ChildClass.attr);         // abc
console.log(ChildClass.sFn('1111'));  // 我是定義在父類的靜態(tài)方法，收到的參數(shù)為：1111
console.log(child1.getInfo(123));     // 我是定義在父類的普通方法，收到的參數(shù)為：123

2、super

super關(guān)鍵字用于調(diào)用父類的屬性和方法；在調(diào)用時(shí)，需要指定調(diào)用的父類屬性或父類方法；

super必須寫在this.XXX之前；

（1）語(yǔ)法

// 調(diào)用父類的構(gòu)造方法
super();   
// 訪問父類屬性
super.屬性;    
// 調(diào)用父類方法  
super.方法名();

（2）實(shí)例

// 定義父類
class ParentClass {
  constructor(name, age, address) {
    this.name = name;
    this.age = age;
    this.address = address;
  }
  static attr = "abc";
  static sFn(data) {
    return `我是定義在父類的靜態(tài)方法，收到的參數(shù)為：${data}`;
  }
  getInfo(data) {
    return `我是定義在父類的普通方法，收到的參數(shù)為：${data}`;
  }
}

// 定義子類，繼承父類
class ChildClass extends ParentClass {
  constructor(name, age, address, phone) {
    // 調(diào)用父類的構(gòu)造方法
    super(name, age,  address);
    this.phone = phone;
  }

  // 訪問父類的靜態(tài)屬性
  static attr = super.attr + "def";
  static sFn(data) {
    // 調(diào)用父類的靜態(tài)方法
    console.log(`子類通過(guò)super調(diào)用：${super.sFn("super調(diào)用的實(shí)參")}`);
    return `我是定義在子類的靜態(tài)方法，收到的參數(shù)為：${data}`;
  }
  getInfo(data) {
    // 調(diào)用父類的普通方法
    console.log(`子類通過(guò)super調(diào)用：${super.getInfo("super調(diào)用的實(shí)參")}`);
    return `我是定義在子類的普通方法，收到的參數(shù)為：${data}`;
  }
}

const parent1 = new ParentClass("parent", 45 , "上海");
const child1 = new ChildClass("child", 20, "上海", '11111111');

console.log(parent1);                 // ParentClass {name: 'parent', age: 45, address: '上海'}
console.log(child1);                  // ChildClass {name: 'child', age: 20, address: '上海'}

console.log(ParentClass.attr);        // abc
console.log(ChildClass.attr);         // abcdef

console.log(ParentClass.sFn("111"));  // 我是定義在父類的靜態(tài)方法，收到的參數(shù)為：111

console.log(ChildClass.sFn("222"));   // 子類通過(guò)super調(diào)用：我是定義在父類的靜態(tài)方法，收到的參數(shù)為：super調(diào)用的實(shí)參
                                      // 我是定義在子類的靜態(tài)方法，收到的參數(shù)為：222

console.log(parent1.getInfo(123));    // 我是定義在父類的普通方法，收到的參數(shù)為：123                                   
console.log(child1.getInfo(456));     // 子類通過(guò)super調(diào)用：我是定義在父類的普通方法，收到的參數(shù)為：super調(diào)用的實(shí)參 
                                      // 我是定義在子類的普通方法，收到的參數(shù)為：456

總結(jié)

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中類(class)的介紹和應(yīng)用舉例詳解

目錄

一、類的概念

二、類的使用

1、語(yǔ)法

2、實(shí)例

三、類的屬性

1、靜態(tài)屬性

2、實(shí)例屬性

3、私有屬性

四、類的方法

1、構(gòu)造方法

2、靜態(tài)方法

3、普通方法

五、類的繼承

1、extends

2、super

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript中類(class)的介紹和應(yīng)用舉例詳解

目錄

一、類的概念

二、類的使用

1、語(yǔ)法

2、實(shí)例

三、類的屬性

1、靜態(tài)屬性

2、實(shí)例屬性

3、私有屬性

四、類的方法

1、構(gòu)造方法

2、靜態(tài)方法

3、普通方法

五、類的繼承

1、extends

2、super

總結(jié)

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

二、類的使用

2、實(shí)例

三、類的屬性

1、靜態(tài)屬性

四、類的方法

1、構(gòu)造方法

3、普通方法

五、類的繼承

1、extends

2、super