Class类

类的由来以及其基础用法

简介:通过class关键字，可以定义类，基本上，es6的class可以看做只是一个语法糖，它的绝大部分功能,es5都可以做到class写法只是让对象原型的写法更加清晰更象面向对象编程的语法而已.

JavaScript 语言中，生成实例对象的传统方法是通过构造函数.
如下：

 function Phone(brand, price) {
            this.brand = brand;
            this.price = price
        }

        // 添加方法
        Phone.prototype.call = function () {
            console.log('我可以打电话');
        }

        // 实例化对象

        let Huawei = new Phone('华为', 5999);
        Huawei.call();
        console.log(Huawei);

上面这种写法跟传统的面向对象语言（比如 C++ 和 Java）差异很大，很容易让新学习这门语言的程序员感到困惑。（开始就是学前端的我只感觉到懵逼！）

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。


 class Phone {  //定义一个名为 Phone 的类
            constructor(brand, price) {    //constructor 是一个构造方法，用来接收参数 
                this.brand = brand;   //这里的 this 代表的是实例对象
                this.price = price;
            }
            call() {
                console.log('我可以打电话');
            }
        }
        let Huawei = new Phone('华为', 5999);
        console.log(Huawei);

        console.log(typeof Phone);// function
        console.log(Phone === Phone.prototype.constructor);// true

由上面可以看出类的实质上就是一个函数，类的自身指向的就是构造函数，所以可以认为es6中的类其实就是构造函数的另一种写法。

类的继承

 class Wallet {
        constructor(money) {
            this.money = money;
        }
        goShopping() {
            console.log(this.money);
        }
        goBuycar() {
            console.log('买辆夸戳');
        }
    }
    class BankCard extends Wallet {
        goBuyhouse() {
            console.log(this.money);
        }
        goBuycar() {   //重写（覆盖）父类函数
            console.log('买辆浴皇大帝');
        }
    }

    const endlessMoney = new BankCard('endlessMoney')
    endlessMoney.goShopping(); //endlessMoney
    endlessMoney.goBuyhouse(); //endlessMoney
    endlessMoney.goBuycar(); //买辆浴皇大帝

子类 BankCard 继承了 Wallet 类的 goShopping 函数和 money 这个内部变量。
但是同名函数 goBuycar 没有继承，是调用到了子类的 goBuycar 函数。
这里也可以理解为子类的 goBuycar 函数覆盖了父类的 goBuycar 函数。

super关键字的使用

简述：super关键字用于访问和调用一个对象的父对象上的函数。
在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。
super关键字也可以用来调用父对象上的函数。

 class Wallet {
        constructor(money) {
            this.money = money;
        }
        goShopping() {
            console.log(this.money);
        }
        goBuycar() {
            console.log('买辆夸戳');
        }
    }
    class Pocket extends Wallet {
        constructor(money, bankCard) {  //子类中扩展了一个 bankCard
            super(money);   //必须先使用super调用，才会有下文的this对象，
            this.bankCard = bankCard;
        }

        goBuycar() {
            super.goBuycar();
            console.log('买辆浴皇大帝');
            console.log(this.money);
            console.log(this.bankCard);

        }
    }

    const endlessMoney = new Pocket('endlessMoney', 'endlessLover')

    endlessMoney.goBuycar();

//依次输出：买辆夸戳  //买辆浴皇大帝  //endlessMoney  //endlessLover

用super关键字实现了子类的构造器，并扩展了1个变量 bankCard，同时使用super调用到了父类的方法，
所以在子类中即使有父类的同名方法，一样可以实现父类同名方法的调用。
super可以理解为父类的一个会实例化的对象，但不同的是super只能访问父类的方法，不能访问私有变量。

static关键字

简述：类（class）通过 static 关键字定义静态方法。
不能在类的实例上调用静态方法，而应该通过类本身调用。
这些通常是实用程序方法，例如创建或克隆对象的功能。
静态方法调用直接在类上进行，不能在类的实例上调用。静态方法通常用于创建实用程序函数

 class Wallet {  //没有constructor的类会默认生成一个constructor构造器
        static BankCard() {
            console.log('endlessMoney');
        }
    }
    class Money extends Wallet { }

    const endlessLover = new Money()

    Wallet.BankCard();
    Money.BankCard();
    // endlessLover.BankCard();  //报错 BankCard is not a function at