类的由来
JavaScript 由于历史原因在设计最初就没有想要引入类的概念，随着 JavaScript 越来越多地应用到大型项目中，JavaScript 的短板就显现了；虽然，可以使用原型等方式来解决，但是还是存在各种各样的问题；
要学习 ES6 中的 class 首先要了解 ES5 中的构造函数，主要了解在构造函数中是如何实现类和继承的，了解了这些知识有助于更深入的理解 ES6 中的 class；
class 类就是一个语法糖，底层还是基于现有的原型对象的继承来实现的；
基本用法
语法
class Animal {
constructor() {
this.type = '鸟类';
}
age = '100'; // 在 ES7 中 class 还提供了一种方式在实例上绑定属性，这种方式不需要 this，直接使用等号在 class 类中进行赋值
eat() {
}
}
// 测试
var a = new Animal();
console.log(a.hasOwnProperty('type')); // true
console.log(a.hasOwnProperty('age')); // true
console.log(a.hasOwnProperty('eat')); // false
get/set
class Animal {
constructor() {
this.type = "鸟类";
this._age = 8;
}
// get 和 set 还是 class 类上的一个方法，所以是原型上的方法
get age() {
return this._age;
}
set age(newValue) {
this._age = newValue;
}
}
// 测试
var animal = new Animal();
console.log(animal.age); // 8
animal.age = 10;
console.log(animal.age); // 10
static
ES6 提供了用于定义静态属性和方法的关键字 static，静态方法调用时不需要实例化该类，所以就不能通过实例去调用，但可以使用类直接去调用；
静态方法通常用于为一个应用程序创建工具函数，下面来看一个长方形类，定义一个获取长方形面积的静态方法；
class Rectangle {
constructor(width, height) {
this.width = width;
this.height = height;
}
static getArea(r) {
return r.width * r.height;
}
}
// 测试
const r = new Rectangle(5, 10);
console.log(Rectangle.getArea(r)); // 50
继承
extends
ES5 中的继承，子类的构造函数中，需要手动执行父构造函数并绑定 this，还需要将子类的构造函数的原型链指向父类的原型；
ES6 中的继承非常简单，在创建子类时只需要使用关键字 extends 即可创建一个子类；
// 父类：动物
class Animal {
constructor(name) {
this.name = name;
}
eat() {
console.log(this.name + '会吃饭！');
}
static getAge() {
console.log('获取' + this.name + '的年龄10岁了');
return 10;
}
}
// 子类：具体的动物——狗
class Dog extends Animal {
// 实例 dog 已经继承了 Animal 上的属性和方法，在父类中对 eat 方法的定义不明确，所以在子类中重写 eat 方法
eat() {
console.log(this.name + '喜欢吃骨头！');
}
}
// 测试
var dog = new Dog('狗');
console.log('name:', dog.name); // name: 狗
console.log('age:', Dog.getAge()); // age: 10
dog.eat(); // 狗喜欢吃骨头！
super
-
第一种情况下，super 关键字作为函数调用，它的作用是为了绑定 this，所以子类的构造函数必须执行一次 super；默认情况下，类中不写 constructor 时，constructor 会自动执行 super，并绑定 this 指向当前子类；
class A {} class B extends A { constructor() { // A.call(this) 等价 super(); } } -
第二种情况下，super 当作父类的对象来使用的，什么情况下会使用呢？当在子类中想使用父类的方法时可以使用 super 直接调用父类的方法即可；
class A { getCount() { return 7; } } class B extends A { constructor() { super(); console.log(super.getCount()); // 7 } getCount() { return 1; } } let b = new B();
打赏作者
您的打赏是我前进的动力
微信
支付宝
ES6+ async 和 await
上一篇
评论
