Technicalarticles
ES6之前的类
Car和另一个继承自Car的SportsCar类。它们都具有make和model属性和start方法，但SportsCar还具有turbocharged属性并覆盖start方法：// "class" declarationfunction Car(make, model) { this.make = make; this.model = model;}// the start methodCar.prototype.start = function() { console.log('vroom');}// overriding the toString methodCar.prototype.toString = function() { console.log('Car - ' + this.make + ' - ' + this.model);}// inheritance examplefunction SportsCar(make, model, turbocharged) { Car.call(this, make, model); this.turbocharged = turbocharged;}// actual inheritance logicSportsCar.prototype = Object.create(Car.prototype);SportsCar.prototype.constructor = SportsCar;// overriding the start methodSportsCar.prototype.start = function() { console.log('VROOOOM');}// Now testing the classesvar car = new Car('Nissan', 'Sunny');car.start(); // vroomconsole.log(car.make); // Nissanvar sportsCar = new SportsCar('Subaru', 'BRZ', true);sportsCar.start(); // VROOOOMconsole.log(car.turbocharged); // trueCar（第2行）和SportsCar（第18行）函数是构造函数。使用this关键字定义属性，使用new创建实例。如果您不熟悉prototype，这是每个JS对象都必须委派常见行为的特殊属性。例如，原型为数组对象所具有的功能，你可能很熟悉：map，forEach，find等原型为字符串具有的功能replace，substr等等。start产生以下操作：
JS引擎询问 car对象上的一个键值start。对象说它没有这样的值 JS引擎询问 car.prototype上的一个键值start。在 car.prototype返回的start功能，JS引擎立即执行。
make和model属性的操作类似，只是它们直接在Car对象上定义而不是在prototype上定义。Object.create。它接受一个对象并返回一个全新的对象，其原型设置为作为参数传递的对象。现在，如果JS引擎在sportsCar对象或上找不到值sportsCar.prototype，它将查询sportsCar.prototype.prototype也就是Car对象的原型。
ES6中的关键字–Class
class关键字出现在JavaScript中。这样做是根据社区的众多要求完成的，因为人们对来自面向对象的语言感到不自在。但是他们忽略了一个重点。
JavaScript has no idea what classes are
function iAmAnObject() {}console.log(iAmAnObject.name); // iAmAnObjectconsole.log(Object.keys(iAmAnObject)); // Array []class关键字如何工作？很高兴你问。您还记得前面的Car和SportsCar示例吗？好吧，class关键字最重要的是语法糖。换句话说，类在概念上产生相同的代码，并且仅用于美学和可读性目的。正如我之前所承诺的，这是ES6中这些相同类的示例：class Car { constructor(make, model) { this.make = make; this.model = model; } start() { console.log('vroom'); } toString() { console.log(`Car - ${this.make} - ${this.model}`); }}class SportsCar extends Car { constructor(make, model, turbocharged) { super(make, model); this.turbocharged = turbocharged; } start() { console.log('VROOOOM'); }}// Actual usage remains the samevar car = new Car('Nissan', 'Sunny');car.start(); // vroomconsole.log(car.make); // Nissanvar sportsCar = new SportsCar('Subaru', 'BRZ', true);sportsCar.start(); // VROOOOMconsole.log(car.turbocharged); // true
为什么不？
具有约束力的问题。当类构造函数与 this关键字紧密处理时，它可能会引入潜在的绑定问题，特别是如果您尝试将类方法作为回调传递给外部例程（您好，React devs）性能问题。由于类的实现，众所周知，它们很难在运行时进行优化。尽管我们现在喜欢高性能机器，但摩尔定律逐渐消失的事实可以改变所有这一切。 私有变量。首先，私有变量的巨大优点和主要原因之一就是JS中不存在私有变量。 严格的层次结构。类引入了从上到下的直接顺序，并使更改难以实现，这在大多数JS应用程序中是不可接受的。 因为React团队告诉您不要这样做。尽管它们尚未明确弃用基于类的组件，但它们可能会在不久的将来出现。
