ES5 和 ES6的继承

ES5:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    //定义构造函数
    function Person(name, age){
      this.name=name;
      this.age=age;
    }
    //在原型 prototype 上定义方法
    Person.prototype.show=function (){
      alert(this.name);
      alert(this.age);
    };
    //用到类的时候,实例化 new 一个
    let p = new Person("blue",18);
    p.show();

    //ES5的继承-------------------------------------------
    //定义子类的构造函数
    function Worker(name, age, job){
      Person.call(this, name, age);
      this.job=job;
    }

    Worker.prototype=new Person();  //继承父类的 prototype
    //继承父类的prototype后,自身的 constructor 会乱掉,需要还原一下
    Worker.prototype.constructor=Worker;  

    //添加 Worker 自己的方法
    Worker.prototype.showJob=function (){
      alert(this.job);
    };

    let w=new Worker('blue', 18, '打杂的');

    w.show();
    w.showJob();
    </script>
  </head>
  <body>

  </body>
</html>

ES6:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script>
    //ES6的面向对象 ,class 用来专门声明类的
    class Person{
      constructor(name, age){ // constructor 构造函数
        this.name=name;
        this.age=age;
      }

      show(){ // 直接在class里面写方法
        alert(this.name);
        alert(this.age);
      }
    }

    //ES6的继承--------------------------------------

    class Worker extends Person{  // 告诉系统 Worker 继承于 Person
      constructor(name, age, job){  // 子类的constructor,参数比父类只多不少
        super(name, age); //调父类的构造函数,用super关键字把需要的父类的参数传过来,需要什么就传什么
        this.job=job; //子类自己的参数
      }

      showJob(){  //加上自己需要的,子类的方法
        alert(this.job);
      }
    }

    //类的使用方法和 ES5 没什么不同,实例化
    let w=new Worker('blue', 18, '打杂的');

    w.show(); //调父类的方法
    w.showJob();  //调自己的方法

    /*
      
     */
    </script>
  </head>
  <body>

  </body>
</html>

 

上一篇:nginx工作模式


下一篇:【lamp架构】nginx并发优化、平滑升级与回滚