记录高级js学习(十一)ES6的Class以及实现继承

64 阅读2分钟

Class的基本使用:

      var randomNameList = ["张三","李斯","王五","陈六"]
      var randomAddressList = ["深圳市","北京市","上海市","重庆市"]
      class Person{
        // 构造函数,New的时候执行
        constructor(name,age){
          this.name = name
          this.age = age
          this._address = "广州"
        }
        // 普通的实例方法,绑定在Person的prototype上
        eating(){
          console.log(this.name,"在吃饭");
        }
        // 类的访问器方法,可以监听address属性的get和set事件
        get address(){
          return this._address
        }
        set address(newValue){
          this._address = newValue
        }
        // 类的静态方法,可以直接通过Person.来直接访问
        // 随机从数组中抽取人名和随机年龄
        static randomPerson(){
          var randomNameIndex = Math.floor(Math.random()*randomNameList.length)
          var randomName = randomNameList[randomNameIndex]
          var randomAge = Math.floor(Math.random()*100)
          return new Person(randomName,randomAge)
        }
      }
      for(var i=0;i<50;i++){
        var p = Person.randomPerson()  //调用类的静态方法,随机获得地址
        var randomAddressIndex = Math.floor(Math.random()*randomAddressList.length)
        p.address = randomAddressList[randomAddressIndex]
        console.log('p: ', p);
      }

Class实现继承:

      class Person {
        constructor(name, age) {
          this.name = name;
          this.age = age;
        }
        running(){
          console.log("父类在跑,等子类接力");
        }
        static foo() {
          console.log("父类静态方法");
        }
      }
      // 通过extends就可以实现继承了,Student.prototype.__proto = Person.prototype
      class Student extends Person {
        constructor(name, age, sno) {
          // 在子类的构造函数中使用this或者返回默认对象之前,必须先通过super()调用父类的构造函数,不然会报错
          super(name, age);
          this.sno = sno;
        }
        // 子类对父类方法的重写,用super就是续写
        running(){
          super.running();
          console.log("子类接力成功");
        }
        // 无论是实例方法还是静态方法,要调用父类借用super.执行,这里的super是根据需求可有可无的,只有构造函数的super()是必须存在的
        static foo() {
          super.foo();
          console.log("子类静态方法");
        }
      }
      var p1 = new Student("张三", 23, 0);
      console.log('p1: ', p1);
      p1.running()
      console.log(Student.__proto__);  //子类的隐式原型直接指向父类
      Student.foo()

继承的应用,内置类自定义方法:

      //拥有自定义的方法又继承Array的所有属性
      class myArray extends Array {
        //不声明constructor会有默认值,会自动调用super并把所有参数传给父类
        getFirstItem(){
          return this[0]
        }
        getLastItem(){
          return this[this.length-1]
        }
      }
      var arr = new sslArray(1,2,3,4,5)  //此时可以说是new Array创建数组了
      console.log(arr.getFirstItem());
      console.log(arr.getLastItem());