在現(xiàn)代編程語言中，類是面向對象編程范式中的核心概念之一。
與函數(shù)類似，類本質上是一種特殊的函數(shù)，它允許我們將數(shù)據(jù)和操作封裝在一起，以創(chuàng)建具有共同行為和狀態(tài)的對象。
在類的世界里，我們有類表達式和類聲明，它們各自具有自己的特性和用途。

類

? 類本質上是一種特殊的函數(shù)。所以和函數(shù)一樣，有類表達式和類聲明

類聲明

與函數(shù)不同，類聲明不會被提升。這意味著在使用類之前，需要先進行類聲明。類聲明通常包括構造函數(shù)和其他成員方法。構造函數(shù)是一個特殊的方法，用于創(chuàng)建和初始化類所創(chuàng)建的對象。

// 類聲明
class Rectangle {
  constructor(height, width) {
    this.height = height; // 實例成員
    this.width = width;
  }
}

let p = new Rectangle();

類表達式

• 類表達式可以命名，也可以不命名
• 我們可以通過類的name屬性來檢索

// 未命名/匿名類
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"

// 命名類
// 命名類表達式的名稱是該類體的局部名稱。
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// 輸出："Rectangle2"

類的定義

• {}中的部分叫做類體。
• 類體中會包括：

  • 構造函數(shù)

    • constructor方法是一個特殊的方法，這種方法用于創(chuàng)建和初始化一個由class創(chuàng)建的對象。
    • 注意??：一個類體中只能有一個constructor方法
    • 使用 super 關鍵字來調用一個父類的構造函數(shù)

  • 原型方法

    class Rectangle {
      // constructor
      constructor(height, width) {
    // 實例的屬性必須定義在類的方法里
        this.height = height;
        this.width = width;
      }
      // Getter
      get area() {
        return this.calcArea();
      }
      // Method
      calcArea() {
        return this.height * this.width;
      }
    }
    const square = new Rectangle(10, 10);
    
    console.log(square.area);
    // 100
    

  • 靜態(tài)方法

    • static來定義靜態(tài)方法，只能被類訪問

    class Point {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    
      static displayName = "Point";
    
      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);
    p1.displayName;
    // undefined
    p1.distance;
    // undefined
    
    console.log(Point.displayName);
    // "Point"
    console.log(Point.distance(p1, p2));
    // 7.0710678118654755
    

  • getter和setter

• 類體中遵循嚴格模式

this指向

類中

1. 類體中的成員方法遵循嚴格模式。this在類方法中的行為與傳統(tǒng)函數(shù)有所不同。在調用靜態(tài)或原型方法時，this默認指向undefined，但在非嚴格模式下，會自動裝箱以保留傳入狀態(tài)。

2. 當被調用時。誰調用，指向誰

   class Animal {
   // 原型方法
     speak() {
       return this;
     }
   // 靜態(tài)方法
     static eat() {
       return this;
     }
   }
   
   let obj = new Animal();
   obj.speak(); // Animal {}
   let speak = obj.speak;
   speak(); // undefined
   
   Animal.eat(); // class Animal
   let eat = Animal.eat;
   eat(); // undefined
   

傳統(tǒng)函數(shù)中

在非嚴格模式下調用函數(shù)，會發(fā)生自動裝箱。即如果初始值時undefined，則this指向全局對象。

function Animal() {}

Animal.prototype.speak = function () {
  return this;
};

Animal.eat = function () {
  return this;
};

let obj = new Animal();
let speak = obj.speak;
speak(); // global object

let eat = Animal.eat;
eat(); // global object

字段聲明

公有字段

1. 不需要let, const等關鍵字
2. 預先聲明

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

私有字段

1. 只能在類內部讀取，外部無法調用。
2. 私有字段僅能在字段聲明中預先定義。

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {
    this.#height = height;
    this.#width = width;
  }
}

extends

我們可以創(chuàng)建一個子類來擴展父類的功能。子類繼承了父類的屬性和方法，并可以在其基礎上進行擴展或重寫。

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Son extends Father {
  constructor(name) {
    super(name); // 調用超類構造函數(shù)并傳入 name 參數(shù)
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

var d = new Son("Mitzie");
d.speak(); // 'Mitzie barks.'

super

super 關鍵字用于調用對象的父對象上的函數(shù).

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

  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Son extends Father {
  speak() {
    super.speak();
    console.log(this.name + " roars.");
  }
}

| 本文參考：MDN文章來源地址http://www.zghlxwxcb.cn/news/detail-646867.html

到了這里，關于【Javascript】ES6新增之類的認識的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！