• 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换行
    VC include 路径解析 冷夜
    DirectxDraw学习笔记 冷夜
    winmain窗口代码 冷夜
    DirectDraw 常用功能代码记录 冷夜
    C/C++ 内存分配方式,堆区,栈区,new/delete/malloc/free 冷夜
    BMP文件结构 冷夜
    管道流
    打印流
    字符编码
  • 原文地址:https://www.cnblogs.com/dadifeihong/p/10358138.html
Copyright © 2020-2023  润新知