ES6系列_15之class类的使用

Posted 2021-01-25 bfwbfw

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("国歌")

输出结果为：

未完，待续。。。。