[TOC] ## 類（class） [[Class, MDN]](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes) ECMAScript 2015 中引入的 JavaScript 類實質上是JavaScript現有的基于原型的繼承的語法糖。類語法不會為JavaScript引入新的面向對象的繼承模型。 ### 類的定義1，函數 ~~~js function Animal() { } //拓展Animal的原型方法 Animal.prototype.speak = function() { return this; } //增加Animal的方法 Animal.eat = function() { return this; } let obj = new Animal(); let speak = obj.speak; speak(); // global object let eat = Animal.eat; eat(); // global object ~~~ ### 類的定義2，類聲明 函數聲明和類聲明之間的一個重要區別是函數聲明會提升，類聲明不會。你首先需要聲明你的類，然后訪問它，否則會拋出一個ReferenceError。 方法內的this指向的是方法所在的類。 ~~~js 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; } //靜態方法 static distance(a, b) { const dx = a.x - b.x; const dy = a.y - b.y; return Math.hypot(dx, dy); } } const square = new Rectangle(10, 10); console.log(square.area); console.log(Point.distance(p1, p2)); // 100 ~~~ ### 類的定義3，類表達式 類表達式可以是命名也可以是匿名的。 ~~~js const MyClass = class [className] [extends] { // class body }; ~~~ * 匿名類表達式 ~~~js var searchFormCollapse= class { } ~~~ * 命名類表達式。這個名字只能在類體內部才能訪問到。 ~~~js var searchFormCollapse= class sfc{ } ~~~ ### 關鍵字 * constructor * getter * setter * extend * delete * this * super