zoukankan      html  css  js  c++  java
  • ES6 中关于Class类的继承理解

    ES5 和 ES6 在类和继承的不同,举例如下:

    ES5 的类和继承:
    
    function Person(name){
        this.name = name;
    }
    Person.prototype.showName = function(){
        return this.name;
    };
    var ops = new Person('娃哈哈');
    console.log(ops.showName());  // 娃哈哈
    ES6 的类和继承:
    
    class Person{  // Person类  它也是一个函数
        constructor(name){  // 构造函数
            this.name = name;
        }
        showName(){
            return this.name;
        }
    }
    var p1 = new Person('娃哈哈');
    console.log(p1.showName());  // 娃哈哈
     

    constructor的中文意思就是构造,他在这里代表的就是构造函数,那么class是一个类也是一个函数,只不过ES6标准是把这个函数包装成了一个class的写法而已,在new一个实例的时候,构造函数自动执行。

    Class 可以通过 extends 关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多,举例如下:

    ES5 之前的写法:
    
    function Person(name){  // 父类
        this.name = name;
    }
    Person.prototype.showName = function(){
        return this.name;
    };
    function SubPerson(name,job){  // 子类
        Person.call(this,name);  // 子类继承父类的属性 需要将this指向父类中的name
        this.job = job;  // job是子类自己的属性
    }
    SubPerson.prototype = new Person();  // 子类继承父类的方法
    var p1 = new SubPerson('娃哈哈');
    console.log(p1.name);  // 娃哈哈
    // console.log(p1.showName());  // 娃哈哈
    ES6 有Class类之后的写法:
    
    class Person{
        constructor(name){
            this.name = name;
        }
        showName(){
            return this.name;
        }
    }
    class SubPerson extends Person{
        constructor(name,job){
            super(name);    // 指向父类的构造函数
            this.job = job;
        }
        showJob(){
            return this.job;
        }
    }
    var p1 = new SubPerson('娃哈哈','喜洋洋');
    console.log(p1.name);  // 娃哈哈
    // console.log(p1.showName());  // 娃哈哈
    // console.log(p1.job); // 喜洋洋

    estends 就是继承的意思,super 就是指向父类的构造函数,指代了整个prototype对象或者_proto_指针指向的对象。

    如果在子类中也写入showName方法,和父类中的方法重名,这样就会覆盖父类的,倘若不想覆盖而是想引用父类的showName方法,那么就在子类的showName方法中通过super来调用父类的showName:super.showName
     

    该文引用了https://www.jianshu.com/p/129976ab0015,用作学习记录
  • 相关阅读:
    HDU 4539郑厂长系列故事――排兵布阵(状压DP)
    HDU 2196Computer(树形DP)
    HDU 4284Travel(状压DP)
    HDU 1520Anniversary party(树型DP)
    HDU 3920Clear All of Them I(状压DP)
    HDU 3853LOOPS(简单概率DP)
    UVA 11983 Weird Advertisement(线段树求矩形并的面积)
    POJ 2886Who Gets the Most Candies?(线段树)
    POJ 2828Buy Tickets
    HDU 1394Minimum Inversion Number(线段树)
  • 原文地址:https://www.cnblogs.com/panic404/p/13086379.html
Copyright © 2011-2022 走看看