美文网首页
JavaScript es6新语法class

JavaScript es6新语法class

作者: 1CC4 | 来源:发表于2020-04-01 17:45 被阅读0次

    在没有es6带来的class的时候,编写JavaScript的时候很多时候会通过构造函数和原型链来添加方法属性,实现class的功能。

    一、类

    • es5
    // 构造函数
            function Person(name, age) {
                this.name = name;
                this.age = age;
                this.sayName = function () {
                    console.log("name", this.name)
                }
            }
    // 原型方法
            Person.prototype.getName = function(){
                return this.name;
            }
    
    • es6
    class Person {
      constructor(name, age) {  // 构造函数
        this.name = name;
        this.age = age;
      }
      getName() {   // 这种写法表示将方法添加到原型中
        return this.name
      }
      static a = 20;  // 等同于 Person.a = 20
      c = 20;   // 表示在构造函数中添加属性 在构造函数中等同于 this.c = 20
    // 箭头函数的写法表示在构造函数中添加方法,在构造函数中等同于this.getAge = function() {}
      getAge = () => this.age   
    }
    

    二、继承extends

    class Student extends Person{
        constructor(name,age){
            super(name,age); //调父类Person类构造函数
        }
    }
    
    const stu1 = new Student('张三',12);
    stu1.sayhi();
    

    只需要一个extends关键字,就可以实现继承了,不用像ES5那样去担心构造函数继承和原型继承,除此之外,我们还需要关注一个叫做super的方法。

    super还可以直接调用父级的原型方法

    // 构造函数中
    // es6 
    super(name, age);
    
    // es5
    Person.call(this);
    

    相关文章

      网友评论

          本文标题:JavaScript es6新语法class

          本文链接:https://www.haomeiwen.com/subject/yxpouhtx.html