阅读 123

class类常用知识点

class 类的写法

疑问点 1. 放在 contructor 里的变量和方法和放在 class 上的区别 2. getter 是什么? 实际上,类是“特殊的函数”

  1. 如何通过一个实例化的类 调用 static 方法? 类声明不存在函数提升
  2. 子类继承父类方法,那么该如何调用呢?
let p = new Rectangle(); // ReferenceError

class Rectangle {}
复制代码

static 关键字用来定义一个类的一个静态方法 他只能通过 class 调用 不能通过实例(new 出来的)调用

class Rectangle {
  static hello() {
    console.log("你好");
  }
}
//  你好
// index.html:22 undefined
const square = new Rectangle(10, 10);
console.log(Rectangle.hello());
console.log(square.area);
// 100
复制代码

class 是严格模式下 所以全局 window 的 this 是 undefined

class Animal {
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat(); // class Animal
let eat = Animal.eat;
eat(); // undefined
复制代码

关于实例的属性

复制代码

你在 constructor 声明了 那你在 class 内部也要声明

 //   私有字段
      class Rectangle {
        height = 0;
        width;
        constructor(height, width) {
          this.#height = height;
          this.width = width;
        }
      }
      const a = new Rectangle(66,88);
      console.log(a.height);
复制代码
Private field '#height' must be declared in an enclosing class
复制代码

私有字段仅能在字段声明中预先定义。 correct

//   私有字段
class Rectangle {
  #height = 0;
  width;
  constructor(height, width) {
    this.#height = height;
    this.width = width;
    this.#height = 99;
    //   内部
    console.log("可以读取", this.#height);
  }
}
const a = new Rectangle(66, 88);
console.log(a.height); //undefined  你不能在外部读取
err code
```js

class Animal {
constructor(name) {
this.name = name;
}

        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      }

      class Dog extends Animal {
        constructor(name) {
          super.speak();
          super(name); // 调用超类构造函数并传入name参数
        }

        speak() {
          console.log(`${this.name} barks.`);
        }
      }

      var d = new Dog("Mitzie");
      d.speak(); // 'Mitzie barks.'

复制代码


必须在访问'this'或从派生构造函数返回之前调用派生类中的超级构造函数
意思是说 super()要在 this前面就声明了
```err bug
 Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
复制代码

correct

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(); // 调用超类构造函数并传入name参数
    this.name = name;
  }

  // speak() {
  //   console.log(`${this.name} barks.`);
  // }
}

var d = new Dog("Mitzie");
d.speak();
复制代码

子类的 speak 会覆盖父类的 speak 既便你用 super 调用了

function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(this.name + " makes a noise.");
};

class Dog extends Animal {
  constructor(name) {
    super();
    this.name = name;
  }
  speak() {
    console.log(this.name + " barks.");
  }
}

var d = new Dog("Mitzie");
d.speak(); //Mitzie makes a noise.  Mitzie barks.
复制代码

请注意,类不能继承常规对象(不可构造的)。如果要继承常规对象,可以改用Object.setPrototypeOf():

文章分类
前端
文章标签