ES6之Class类知识点总结（十三）

「爱情、让人受尽委屈。」 2022-05-27 11:42 167阅读 0赞

好的文章就要分享出来，让更多的小伙伴看到、嗯、继续推荐阮一峰大神的ES6文章，真的很棒，关于Class类的知识，想要了解的更清楚的建议到大神的官网走一走[http://es6.ruanyifeng.com/\#docs/class-extends][http_es6.ruanyifeng.com_docs_class-extends]

我们知道ES5及之前是没有类的概念的，生成实例的方法是通过构造函数，ES6引入了类的概念，通过class关键字，可以定义类

class Person{
           constructor(name,job){
               this.name = name;
               this.job = job;
           }
           sayJob(){
               console.log(`${this.name} is a ${this.job}`);
           }
       }
       var person = new Person("leo","boss");
       person.sayJob();//leo is a boss

嗯、分析一下上面的小例子

constructor方法就是构造方法，this关键字代表实例对象（此处就是person），该类中除了构造方法，还定义了一个sayJob方法。嗯、有两个注意点：

*  定义类的方法的时候，前面不需要加function关键字
 *  方法之间不需要用逗号分隔（加了反而会报错）

使用类的时候，也是直接对类使用new命令，跟构造函数的用法完全一致。类的所有方法都是定义在类的prototype属性上面，在类的实例上面调用方法，其实就是调用原型上的方法。

由于类的方法都是定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

class Person{
           constructor(name,job){
               this.name = name;
               this.job = job;
           }
           sayJob(){
               console.log(`${this.name} is a ${this.job}`);
           }
       }
       Object.assign(Person.prototype,{toLike(){console.log(`${this.name} like running`)},toDo(){return this.job;}});
       var person = new Person("leo","boss");
       person.sayJob();//leo is a teacher
       person.toLike();//leo like running
       console.log(person.toDo());//boss

还是针对上面的例子，看下面的代码

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

从结果中可以得出结论：类的数据类型就是函数，类本身就指向构造函数

注意：类的内部定义的所有方法，都是不可以枚举的，与ES5一样，类的所有实例共享一个原型对象

类不存在变量提升

new fn(); // ReferenceError
    class fn{}

fn类使用在前，定义在后面，会报错，因为类不存在变量提升

this指向问题

类的方法内部，如果含有this，它默认指向类的实例，但是必须非常小心，一旦单独使用该方法，很可能会报错

解决办法：

*  在构造方法中绑定this
 *  使用箭头函数（箭头函数，函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象）
 *  使用Proxy，获取方法的时候，自动绑定this。

Class继承

class可以通过extends关键字实现继承，子类通过extends关键字，可以继承父类的所有方法和属性，子类必须在constructor方法中调用super方法，它表示父类的构造函数，用来新建父类的this对象。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其加工，如果不调用super方法，子类就得不到this对象

注意：父类的静态方法也会被子类继承

class Person{
           constructor(name,job){
               this.name = name;
               this.job = job;
               this.sayJob = this.sayJob.bind(this);
           }
           sayJob(){
               return `${this.name} is a ${this.job}`;
           }
       }
       class Son extends Person{
           constructor(name,job,city){
               super(name,job,city);
               this.city = city;
           }
           sayJob(){
               return console.log(super.sayJob()+ ` living in ${this.city}`);
           }
    
       }
       var son = new Son("leo","boss","beijing");
       son.sayJob();//leo is a boss living in beijing

注意：在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例

判断一个类是否继承了另一个类的方法：Object.getPrototypeOf()（该方法可以从子类上获取父类）

console.log(Object.getPrototypeOf(Son)===Person);//true

[http_es6.ruanyifeng.com_docs_class-extends]: http://es6.ruanyifeng.com/#docs/class-extends