ES6系列_15之class类的使用

JS语言的传统方法是经过构造函数，定义并生成新对象，是一种基于原型的面向对象系统。在ES6中新增长了类的概念，能够使用 class 关键字声明一个类，以后以这个类来实例化对象。
1.先来看看es5与es6的写法：
（1）构造函数示例：

const Animal = function (name, age) {
    this.name= name;
    this.age = age;
    return this;
};

Animal.prototype = {
    constructor: Animal,
    print: function () {
        console.log(this.name+ ' ' + this.age);
    }
};


const panda= new Animal('熊猫', '3').print();

 （2）使用ES6提供的class改写为：

class Animal {
    constructor(name,age){
        this.name=name;
        this.age=age;
        return this;
    }

    print(){
        console.log(this.name+''+this.age);
    }
}

const panda=new Animal('熊猫', '3');
panda.print()

2.如今来看看es6的类如何使用？

（1）类的声明

先声明一个最简单的Animal类，类里只有一个print方法，方法中打印出传递的参数。

class Animal{
    print(val){
        console.log(val);
    }
}

（2）类的使用

咱们已经声明了一个类，并在类里声明了print方法，如今要实例化类，并使用类中的方法。

class Animal{
    print(val){
        console.log(val);
    }
}
let p= new Animal();
p.print('熊猫');

输出结果为：熊猫。

    （2.1）类的多方法声明

咱们在上述基础上在声明一个eat方法。

class Animal{
    print(val){
        console.log(val);
    }
    eat(val){
        console.log(this.print("熊猫"),"eat===>",val)
    }
}
let panda= new Animal();

panda.eat("竹子")

此时咱们会发现输出的结果为：

也就是this.print("熊猫") 这句代码出现了undefined。这是为啥呢?

这是因为类中的print方法没有返回值形成的，咱们给print方法返回值，代码以下：

class Animal{
    print(val){
        console.log(val);
        return val;
    }
    eat(val){
        console.log(this.print("熊猫"),"eat===>",val)
    }
}
let panda= new Animal();

panda.eat("竹子")

此时的结果为：

这里须要注意的是两个方法中间不要写逗号了，还有这里的this指类自己，还有 使用return返回值。

（3） 类的传参

在类的参数传递中咱们用constructor( )进行传参。传递参数后能够直接使用this.xxx进行调用。

 例如一开始时咱们改写的代码同样，如今再把该代码贴出以下：

class Animal {
    constructor(name,age){
        this.name=name;
        this.age=age;
        return this;
    }

    print(){
        console.log(this.name+''+this.age);
    }
}

const panda=new Animal('熊猫', '3');
panda.print()

使用constructor来约定了传递参数，而后在print方法中打印。

（4）class的继承

类的一大特色就是继承。ES6中也有继承，使用关键子extends。

例如，如今有一个动物，除了基本的姓名与年龄外，还有独特的爱好--唱歌，咱们该怎么处理呢，这里用到了类的继承，代码以下：

class Bird extends Animal{
    sing(val){
        console.log("唱",val)
    }
}

let bird=new Bird("鹦鹉",3)
bird.sing("国歌")

输出结果为：

未完，待续。。。。