JavaScript基础知识:Class 静态属性和静态方法(二)
JavaScript基础知识:Class 其它(三)
一、Class 语法
class MyClass{
constractor() {} //初始化对象
method1() {} //类的方法间没有逗号
method2() {}
method3() {}
...
}
let myClass = new MyClass()
在 JavaScript 中,类是一种函数。如下,技术上来说,MyClass 是一个函数(我们提供作为 constructor 的那个),而 methods、getters 和 settors 都被写入了 MyClass.prototype。
class MyClass {
prop = value; // 属性
constructor(...) { // 构造器
// ...
}
method(...) {} // method
get something(...) {} // getter 方法
set something(...) {} // setter 方法
[Symbol.iterator]() {} // 有计算名称(computed name)的方法(此处为 symbol)
// ...
}
二、类继承
类继承是一个类扩展另一个类的一种方式。
1. “extends” 关键字
扩展另一个类的语法是:
class Child extends Parent
看个具体例子,创建继承自 Animal 的 class Rabbit:
class Animal{
constructor(name){
this.speed = 0;
this.name = name;
}
run(speed){
this.speed = speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop(){
this.speed = 0;
alert(`${this.name} stand still.`);
}
}
let animal = new Animal('My pet!');
class Rabbit extends Animal{
hide(){
alert(`And then ${this.name} hides!`)
}
}
let rabbit = new Rabbit('DuoDuo');
rabbit.run(5); // DuoDuo runs with speed 5.
rabbit.hide(); // And then DuoDuo hides!
注意: 在 extends 后允许任意表达式:
function f(phrase) {
return class {
sayHi() { alert(phrase); }
};
}
class User extends f("Hello") {}
new User().sayHi(); // Hello
2. 重写方法
继续上面 DuoDuo 的例子,stop 方法是 Animal 中的方法。
如果我们在 Rabbit 中,重新指定 stop 方法,
但是又想在 Animal 中的 stop 方法的基础上,怎么办?
class Rabbit extends Animal {
stop() {
// ……现在这个将会被用作 rabbit.stop()
// 而不是来自于 class Animal 的 stop()
}
}
Class 为此提供了 “super” 关键字。
- 执行 super.method(…) 来调用一个父类方法。
- 执行 super(…) 来调用一个父类** constructor**(只能在我们的 constructor 中)。
class Animal{
constructor(name){
this.speed = 0;
this.name = name;
}
run(speed){
this.speed = speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop(){
this.speed = 0;
alert(`${this.name} stand still.`);
}
}
let animal = new Animal('My pet!');
class Rabbit extends Animal{
hide(){
alert(`And then ${this.name} hides!`)
}
stop(){
super.stop();
this.hide();
}
}
let rabbit = new Rabbit('DuoDuo');
rabbit.run(5); // DuoDuo runs with speed 5.
rabbit.stop(); // DuoDuo stand still. // And then DuoDuo hides!
注意: 箭头函数没有 super
3. 重写constructor
继承类的 constructor 必须调用 super(…),并且 (!) 一定要在使用 this 之前调用。
继续上面DuoDuo的例子,在 Rabbit 中,并未写自己的 constructor,如果自己定义下会怎么呢?
class Animal{
constructor(name){
this.speed = 0;
this.name = name;
}
run(speed){
this.speed = speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
stop(){
this.speed = 0;
alert(`${this.name} stand still.`);
}
}
let animal = new Animal('My pet!');
class Rabbit extends Animal{
constructor(name, earLength){ // ***
this.name = name; // ***
this.earLength = earLength; // ***
} // ***
hide(){
alert(`And then ${this.name} hides!`)
}
stop(){
super.stop();
this.hide();
}
}
let rabbit = new Rabbit('DuoDuo');
alert(rabbit.name);
alert(rabbit.earLength);
结果:报错了。。。。
把标 //*** 的四行改下,就不会报错了:
constructor(name, earLength){
super(name);
this.earLength = earLength;
}
以上内容参考于 https://zh.javascript.info/class-inheritance ,在此学习记录!