[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