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

    输出结果为:

    未完,待续。。。。

  • 相关阅读:
    layui第三方组件运用
    layui select lay-filter就不渲染和全局渲染用法和校验
    layui 点击操作列后背景色去掉
    layui混合案列问题
    使用layui富文本添加日志内容,并获取子窗体的富文本内容
    layu tab切换table
    layui 父窗体传子窗体select动态选中
    jstl过长的内容处理空格以及换行并通过js处理内容自动换行
    js中运用jstl标签解决checked是否选中等问题
    javaMD5实现加密解密
  • 原文地址:https://www.cnblogs.com/wfaceboss/p/10088388.html
Copyright © 2020-2023  润新知