javaScript 基础知识汇总 (十三)

1、Class

  在JavaScript中 calss即类是一种函数

  基本语法

  class Myclass{

    constructor(){}

    method1(){}

    method2(){}

    method3(){}

  }

  示例:

  class User{

    constructor(name){//构造函数

      this.name = name;

    }

    sayHI(){//属性方法

      alert(name);

    }

  }

  //使用方法

  let user = new User("XiaoMing");

  user.sayHi();

  类表达式

  let User = class{

    sayHi(){

      alert('Hello');

    }

  };

2、类继承

  在JavaScript中类继承通过 extends关键字实现。示例:

 1 class Animal {
 2   constructor(name) {
 3     this.speed = 0;
 4     this.name = name;
 5   }
 6   run(speed) {
 7     this.speed += speed;
 8     alert(`${this.name} runs with speed ${this.speed}.`);
 9   }
10   stop() {
11     this.speed = 0;
12     alert(`${this.name} stopped.`);
13   }
14 }
15 
16 // 通过指定“extends Animal”让 Rabbit 继承自 Animal
17 class Rabbit extends Animal {
18   hide() {
19     alert(`${this.name} hides!`);
20   }
21 }
22 
23 let rabbit = new Rabbit("White Rabbit");
24 
25 rabbit.run(5); // White Rabbit runs with speed 5.
26 rabbit.hide(); // White Rabbit hides!

  重写方法

  直接重新定义,从新写相同名字的就可以

 

1 class Rabbit extends Animal {
2   stop() {
3     // ...这将用于 rabbit.stop()
4   }
5 }

  如果想在字类中仍使用父类的方法,又不直接重写,则可以 通过 super 来实现

  

 1 class Animal {
 2 
 3   constructor(name) {
 4     this.speed = 0;
 5     this.name = name;
 6   }
 7 
 8   run(speed) {
 9     this.speed += speed;
10     alert(`${this.name} runs with speed ${this.speed}.`);
11   }
12 
13   stop() {
14     this.speed = 0;
15     alert(`${this.name} stopped.`);
16   }
17 
18 }
19 
20 class Rabbit extends Animal {
21   hide() {
22     alert(`${this.name} hides!`);
23   }
24 
25   stop() {
26     super.stop(); // 调用父类的 stop 函数
27     this.hide(); // 然后隐藏
28   }
29 }
30 
31 let rabbit = new Rabbit("White Rabbit");
32 
33 rabbit.run(5); // White Rabbit runs with speed 5.
34 rabbit.stop(); // White Rabbit stopped. White rabbit hides!

  重写构造函数

  不能直接重新写,要先执行super 之后才可以

  原因:1) 当一个普通构造函数执行时,它会创建一个空对象作为this,并继续执行

     2)但是当继承的构造函数执行时,它并不会做这件事情,而是运行符类中的构造函数来完成这项工作。

  用法示例;

  class Animal{

    constructor(name){

      this.speed = 0;

      this.name = name;

    }

  }

  class Rabbit extends Animal{

    constructor(name,earLength){

      super(name);

      this.earLength = earLength;

    }

   }

  let rabbit = new Rabbit("White Rabbit",10)

  alert(rabbit.name);

  alert(rabbit.earLength);

  箭头函数没有自己的this或super,所以它们能融入到就近的上下文。

3、静态属性和方法

  通过关键字static 设置静态方法或者静态属性

  静态方法:

  class User{

    static staticMethod(){

      alert(this === user);

    }

  }

  User.staticMethod();//true

  静态属性:

  class Article{

    static name = "xiaoming";

  }

  alert(Article.name);

  静态属性和方法是被继承的

  对于 class B extends A,类 B 的 prototype 指向了 AB.[[Prototype]] = A。因此,如果一个字段在 B 中没有找到,会继续在 A 中查找。  

 

4、私有的和受保护的属性和方法

  受保护的属性通常以下划线_作为前缀

  class CoffeeMachine{

    _waterAmount = 0;

    set waterAmount(value){

      if(value<0) throw new error("Negative water");

      this._waterAmount = value;

    }

    get waterAmount(){

      return this._waterAmount;

    }

  }

  let cofMachine = new CoffeeMachine();

  cofMachine.waterAmount = 10;

  alert(cofMachine.waterAmount);//10

 

  设置只读

  只有get 方法没有set 方法

  初始化可以给默认值或者通过构造函数赋值

  class CoffeeMachine{

    constructor(power){

      this._power = power;

    }

    get power(){

      return this._power;

    }

  }

 

5、类型监测 “instanceof”

  用法:obj instanceof Class

   如果 obj隶属于Class 或者是Class 衍生的类,表达式返沪true

  类型监测图表

 

 

  

posted @ 2019-09-10 17:30  小七要走  阅读(221)  评论(0编辑  收藏  举报