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

    输出结果为:

    未完,待续。。。。

  • 相关阅读:
    项目管理【53】 | 项目风险管理-规划风险应对
    Learning a Continuous Representation of 3D Molecular Structures with Deep Generative Models
    转:DenseNet
    转:期刊投稿中的简写(ADM,AE,EIC等)与流程状态解读
    论文中如何写算法伪代码
    氨基酸,多肽,蛋白质等
    pytorch查看全连接层的权重和梯度
    AI制药文章
    long-tail datasets
    转:Focal Loss理解
  • 原文地址:https://www.cnblogs.com/wfaceboss/p/10088388.html
Copyright © 2020-2023  润新知