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 指向了 A
:B.[[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
类型监测图表