JavaScript基础知识：Class 静态属性和静态方法(二)

本文链接：https://blog.csdn.net/thingir/article/details/112857534

JavaScript基础知识：Class 基本语法(一)
JavaScript基础知识：Class 其它(三)

一、静态方法

1. 理解含义

我们可以把一个方法赋值给类的函数本身，而不是赋给它的 “prototype”。这样的方法被称为 静态的（static）。
在类中，静态方法以 static 关键字开头

看个具体例子：

class User{
    static staticMethod(){
        console.log(this === User);
    }
}
User.staticMethod();     // true

let user = new User();
user.staticMethod();     // Uncaught TypeError: user.staticMethod is not a function

在这里插入图片描述

注意：

1）静态方法用于实现属于该类但不属于该类任何特定对象的函数

2）在 User.staticMethod() 调用中的 this 的值是类构造器 User 自身（“点符号前面的对象”规则，即 this==user）。

2. 具体使用

使用案例1：

我们有对象 Article，并且需要一个方法来比较它们
compare不是文章( article )的方法，而是整个 class ( Article )的方法

class Article{
    constructor(title,date){
        this.title = title;
        this.date = date;
    }

    static compare(articleA, articleB){
        return articleA.date - articleB.date;
    }
}

let article = [
    new Article('My ArticleOne', new Date(2020,8,1)),
    new Article('My ArticleTwo', new Date(2020,1,15)),
    new Article('My ArticleThree', new Date(2020,5,20)),
];
// console.log('排序前：', article);
// console.log('排序前：', article[0].title);

article.sort(Article.compare);

console.log('排序后：', article);
console.log('排序后：', article[0].title);

在这里插入图片描述

二、静态属性

静态的属性也是可能的，它们看起来就像常规的类属性，但前面加有 static：

class Article {
  static publisher = "Levi Ding";
}

alert( Article.publisher ); // Levi Ding

三、继承静态属性和方法

静态属性和方法是可被继承的。
看下面的例子，可以正确的 alert：

class Animal{
    static planet ='earth';        // 静态属性
    constructor(name, speed){
        this.name = name;
        this.speed = speed;
    }

    run(speed = 0){
        this.speed += speed;
        alert(`${this.name} runs width speed ${this.speed}!`)
    }

    // 静态方法
    static compare(animalA, animalB){
        return animalA.speed - animalB.speed;
    }

}


class Rabbit extends Animal{
    hide(){
        alert(`${this.name} hides!`);
    }
}

let rabbits = [
    new Rabbit('tutuOne', 8),
    new Rabbit('tutuTwo', 5),
    new Rabbit('tutuThree', 10),
]

rabbits.sort(Rabbit.compare);

rabbits[0].run();        // tutuOne runs with speed 8.

alert(Rabbit.planet);   // Earth