• es6+最佳入门实践(12)


    12.class基础用法和继承

    12.1.class基础语法

    在es5中,面向对象我们通常写成这样

    
    function Person(name,age) {
        this.name = name;
        this.age = age;
    }
    Person.prototype.showName = function () {
        console.log(this.name);
    };
    
    let p = new Person("xiaoqiang", 10);
    p.showName();
    

    上面这种写法与传统的面向对象写法有很大的不同,让学习过其他面向对象语言的同学感到很别扭,因此,在ES6中,增加了语法糖,使用class关键字来定义类,这里说的语法糖的意思简单的理解就是另一种更便捷的写法,编译后的功能实际上是一样的

    下面是ES6中定义类的语法:

    class Person{
        constructor(name, age){
            this.name = name;
            this.age = age;
        }
        showName(){
            console.log(this.name)
        }
    }
    let p = new Person("xiaoqiang2", 10);
    p.showName();
    

    注意1: constructor是默认添加的方法,当new 关键字去调用类的时候,constructor会默认被执行,即使不写这个constructor方法,也会默认添加一个空方法

    constructor(name, age){
        console.log("开始执行了")
        this.name = name;
        this.age = age;
    }
    

    注意2: 在类中写的方法之间不能加逗号,否则会报错

    class Person{
        constructor(name, age){
            console.log("开始执行了")
            this.name = name;
            this.age = age;
        }
        showName(){
            console.log(this.name)
        },
        showAge(){
            console.log(this.age);
        }
    }
    let p = new Person("xiaoqiang2", 10);
    p.showName();
    

    12.2.继承

    在ES6中使用extends关键字来实现继承

    
    class Parent{
        constructor(name, age){
            console.log("开始执行了");
            this.name = name;
            this.age = age;
        }
        showName(){
            console.log(this.name)
        }
    }
    
    //Child去继承 Parent
    class Child extends  Parent{
        
    }
    
    let c = new Child('nodeing', 20);
    console.log(c);
    

    上面代码就是继承的基本写法,只是我们并没有在子类中去增加方法,此时,子类相当于去拷贝了父类

    注意1: 在子类中如果重写父类的constructor方法,需要首先调用supper方法

    
    class Parent{
        constructor(name, age){
            console.log("开始执行了");
            this.name = name;
            this.age = age;
        }
        showName(){
            console.log(this.name)
        }
    }
    
    class Child extends  Parent{
        constructor(name, age, gender){
            super(name, age);
            this.gender = gender
        }
    }
    
    let c = new Child('nodeing', 20);
    console.log(c);
    

    注意2: 如果这样写会报错:

    class Child extends Parent{
        constructor(name, age, gender){
            this.gender = gender
            super(name, age);
        }
    }
    

    视频教程地址:http://edu.nodeing.com/course/50

  • 相关阅读:
    常用CSS代码大全(工作必备)
    微信开发新增拖动组件--movableview介绍
    CSS---解决文本溢出,换行
    SublimeText 自带格式化代码功能
    后台界面也可以很酷!31个高大上的后台管理系统模版
    漏洞:阿里云盾phpMyAdmin <=4.8.1 后台checkPageValidity函数缺陷可导致GETSHELL
    Linux系统定时备份网站文件到七牛云存储脚本
    php重定向的三种方法分享
    CentOS Gnome字体不清晰
    centos 6.5 安装mplayer
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/10358138.html
Copyright © 2020-2023  润新知