一，定义类

到了ES6添加了类，作为对象的模板。通过class来定义一个类

定义的类只是语法糖，目的是让我们用更简洁明了的语法创建对象及处理相关的继承。

javascript传统做法是当生成一个对象实例，需要定义构造函数，然后通过new的方式完成。

function People(name,age){

this.name = name;

this.age = age;

}

StdInfo.prototype.getInfo = function (name,age){

console.log("name："+this.name+ " age:" + this.age);

}

var p = new People('andy',29)

avacript中只有对象，没有类。它是是基于原型的语言，原型对象是新对象的模板，它将自身的属性共享给新对象。这样的写法和传统面向对象语言差异很大，很容易让新手感到困惑。

//测试

//定义类

class Peo1{

//...

}

console.log(typeof Peo1); //function

console.log(Peo1=== Peo1.prototype.constructor); //true

上面的测试中可以看出来，类的类型就是一个函数，是一个“特殊函数”，指向的是构造函数。

类实际上是个“特殊的函数"，定义方式和函数一样，函数是分为 函数表达式 和 函数声明 ;

类分为 类表达式 和 类声明。1.1 类声明

函数声明的关键字是 function, 类声明当然也有自己的关键字就是 class

class People {

constructor(name, age) {

this.name = name;

this.age = age;

}

}1.1.1函数声明和类声明的区别

提升，函数声明会提升，而类声明不会提升，所以，你在使用你的类之前一定要先声明它。

let people1 = new People();

//ReferenceError

class People {}

1.2 类表达式

一个类表达式是定义一个类的另一种方式。类表达式可以是被命名的或者是匿名的。

类表达式是定义类的另一种形式，类似于函数表达式，把一个函数作为值赋给变量。可以把定义的类赋值给一个变量，这时候变量就为类名。class关键字之后的类名可有可无，如果存在，则只能在类内部使用。

/* 匿名类 */

let People = class {

constructor(name,age){

this.name = name;

this.age = age;

}

}

/* 命名类 */

let People = class People1 {

constructor(name,age){

console.log(People1);//是一个函数 this.name = name;

this.age = age;

}

}

let p1 = new People()

注意: 类表达式也同样受到类声明中提到的提升问题的困扰。

1.3 立即执行的类

const p = new class {

constructor(name,age){

console.log(name,age);

}

}("andy",29)

立即执行的类，在类前要加上new。p为类的实例对象。

二，类体和方法定义

一个类的类体是一对花括号中的部分，这是定义类成员的位置，如方法或者构造函数。

2.1 构造函数

constructor方法是一个特殊的方法，其用于创建和初始化使用class创建的一个对象。一个类只能拥有一个名为 “constructor”的特殊方法。如果一个类包含多个constructor的方法，则会抛出错误 SyntaxError

constructor是一个默认方法，使用new来定义实例对象时，自动执行constructor函数，传入所需要的参数,执行完constructor后自动返回实例对象。

constructor中的this指向新创建的实例对象，利用this往新创建的实例对象扩展属性。

在定义实例对象时，不需要在初始化阶段做一些事，可以不用显示的写constructor函数。如果没有显式定义，一个空的constructor方法会被默认添加，constructor(){}

一个构造函数可以使用 super关键字来调用一个父类的构造函数

2.2 原型方法

class People {

//constructor constructor(name,age){

this.name = name;

this.age = age;

}

//getter get returnFn(){

return this.infoFn()

}

//method infoFn() {

return `name:${this.name},age:${this.age}`

}

}

const pepple1 = new People('andy',29);

console.log(pepple1.returnFn);// name:andy,age:29

//或者直接调用methodpeople1.infoFn();// name:andy,age:29

2.3 静态方法

static关键字用来定义一个类的一个静态方法。

调用静态方法不需要实例化该类，但是不能通过一个类的实例调用静态方法。 静态方法一般用于为一个应用程序创建工具函数

class Point {

constructor(x, y) {

this.x = x;

this.y = y;

}

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);

console.log(Point.distance(p1, p2));//7.0710678118654755

2.4 用原型和静态方法包装

当一个对象调用静态或原型方法时，如果该对象没有“this”值(或“this”作为布尔，字符串，数字，未定义或null) ，那么“this”值在被调用的函数内部将为 undefined。不会发生自动包装。即使我们以非严格模式编写代码，它的行为也是一样的，因为所有的函数、方法、构造函数、getters或setters都在严格模式下执行。因此如果我们没有指定this的值，this值将为undefined。

注： 下面的例子在浏览器环境中，指的是window对象调用静态或者原型方法。

class Animal {

speak() {

return this;

}

static eat() {

return this;

}

}

let obj = new Animal();

obj.speak(); // Animal {}let speak = obj.speak;

speak(); // undefined

Animal.eat() // class Animallet eat = Animal.eat;

eat(); // 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

三，使用 extends 创建子类

extends 关键字在类声明或类表达式中用于创建一个类作为另一个类的一个子类

使用extends关键字实现类之间的继承。这比在ES5中使用继承要方便很多。

使用继承的方式，子类就拥有了父类的方法。

//demo1class Animal {

constructor(name) {

this.name = name;

}

speak(){

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

}

}

class Dog extends Animal {

}

var d = new Dog('mini')

d.speak()// mini makes a noise

//demo2//使用extends关键字实现类之间的继承。这比在ES5中使用继承要方便很多。

//定义类父类class Parent {

constructor(name,age){

this.name = name;

this.age = age;

}

speakSometing(){

console.log("I can speek chinese");

}

}

//定义子类，继承父类class Child extends Parent {

coding(){

console.log("coding javascript");

}

}

var c = new Child();

//可以调用父类的方法c.speakSometing(); // I can speek chinese

注意：如果子类中存在constructor构造函数，则需要在使用“this”之前首先调用 super()

子类必须在constructor方法中调用super方法，否则新建实例时会报错(this is not defined)。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

class Animal223 {

constructor(name) {

this.name = name;

}

speak(){

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

}

}

class Dog223 extends Animal223 {

constructor(a) {

super();//这里不调用super则会报错Must call super constructor in derived c //lass before accessing 'this' or returning from derived constructor this.a = a;

}

speak() {

console.log(this.name +' barks.')

}

}

var d223 = new Dog223('mini')

d223.speak()//undefined barks.

注：也可以扩展传统的基于函数的“类”

function Animal (name) {

this.name = name;

}

Animal.prototype.speak = function () {

console.log(this.name + ' makes a noise.');

}

class Dog extends Animal {

speak() {

super.speak();

console.log(this.name + ' barks.');

}

}

var d = new Dog('Mitzie');

d.speak();

//在子类的原型方法speak中，首先调用了父类的原型方法//Mitzie makes a noise.//Mitzie barks.

请注意，类不能继承常规(非可构造)对象。如果要继承常规对象，可以改用

var Animal = {

speak() {

console.log(this.name + ' makes a noise.');

}

};

class Dog {

constructor(name) {

this.name = name;

}

}

Object.setPrototypeOf(Dog.prototype, Animal);// If you do not do this you will get a TypeError when you invoke speak

var d = new Dog('Mitzie');

d.speak(); // Mitzie makes a noise.

四，使用 super 调用超类

super 关键字用于调用对象的父对象上的函数。

class Cat {

constructor(name) {

this.name = name;

}

speak() {

console.log(this.name + ' makes a noise.');

}

}

class Lion extends Cat {

speak() {

super.speak();

console.log(this.name + ' roars.');

}

}

var p66 = new Lion66()

p66.speak()

//undefined makes a noise.//undefined roars.

注：一个类不能被重新定义

参考：类​developer.mozilla.org