æä»¬è¿å¯ä»¥ä¸ºæ´ä¸ªç±»åé ä¸ä¸ªæ¹æ³ãè¿æ ·çæ¹æ³è¢«ç§°ä¸º éæçï¼staticï¼ã
å¨ä¸ä¸ªç±»ç声æä¸ï¼å®ä»¬ä»¥ static å
³é®åå¼å¤´ï¼å¦ä¸æç¤ºï¼
class User {
static staticMethod() {
alert(this === User);
}
}
User.staticMethod(); // true
è¿å®é ä¸è·ç´æ¥å°å ¶ä½ä¸ºå±æ§èµå¼çä½ç¨ç¸åï¼
class User { }
User.staticMethod = function() {
alert(this === User);
};
User.staticMethod(); // true
å¨ User.staticMethod() è°ç¨ä¸ç this ç弿¯ç±»æé å¨ User èªèº«ï¼âç¹ç¬¦å·åé¢ç对象âè§åï¼ã
é常ï¼éææ¹æ³ç¨äºå®ç°å±äºæ´ä¸ªç±»ï¼ä½ä¸å±äºè¯¥ç±»ä»»ä½ç¹å®å¯¹è±¡ç彿°ã
ä¾å¦ï¼æä»¬æå¯¹è±¡ Articleï¼å¹¶ä¸éè¦ä¸ä¸ªæ¹æ³æ¥æ¯è¾å®ä»¬ã
é常çè§£å³æ¹æ¡å°±æ¯æ·»å Article.compare éææ¹æ³ï¼
class Article {
constructor(title, date) {
this.title = title;
this.date = date;
}
static compare(articleA, articleB) {
return articleA.date - articleB.date;
}
}
// ç¨æ³
let articles = [
new Article("HTML", new Date(2019, 1, 1)),
new Article("CSS", new Date(2019, 0, 1)),
new Article("JavaScript", new Date(2019, 11, 1))
];
articles.sort(Article.compare);
alert( articles[0].title ); // CSS
è¿é Article.compare æ¹æ³ä»£è¡¨âä¸é¢çâæç« ï¼æææ¯æ¯è¾å®ä»¬ãå®ä¸æ¯æç« çæ¹æ³ï¼èæ¯æ´ä¸ª class çæ¹æ³ã
å¦ä¸ä¸ªä¾åæ¯æè°çâå·¥åâæ¹æ³ã
æ¯å¦è¯´ï¼æä»¬éè¦éè¿å¤ç§æ¹å¼æ¥å建ä¸ç¯æç« ï¼
- éè¿ç¨ç»å®çåæ°æ¥å建ï¼
titleï¼dateçï¼ã - 使ç¨ä»å¤©çæ¥ææ¥å建ä¸ä¸ªç©ºçæç« ã
- â¦â¦å ¶å®æ¹æ³ã
第ä¸ç§æ¹æ³æä»¬å¯ä»¥éè¿ constructor æ¥å®ç°ã对äºç¬¬äºç§æ¹å¼ï¼æä»¬å¯ä»¥å建类çä¸ä¸ªéææ¹æ³æ¥å®ç°ã
ä¾å¦è¿éç Article.createTodays()ï¼
class Article {
constructor(title, date) {
this.title = title;
this.date = date;
}
static createTodays() {
// è®°ä½ this = Article
return new this("Today's digest", new Date());
}
}
let article = Article.createTodays();
alert( article.title ); // Today's digest
ç°å¨ï¼æ¯å½æä»¬éè¦å建ä¸ä¸ªä»å¤©çæç« æ¶ï¼æä»¬å°±å¯ä»¥è°ç¨ Article.createTodays()ãå说æä¸æ¬¡ï¼å®ä¸æ¯ä¸ä¸ªæç« çæ¹æ³ï¼èæ¯æ´ä¸ª class çæ¹æ³ã
éææ¹æ³ä¹è¢«ç¨äºä¸æ°æ®åºç¸å ³çå ¬å ±ç±»ï¼å¯ä»¥ç¨äºæç´¢/ä¿å/å 餿°æ®åºä¸çæ¡ç®ï¼ å°±åè¿æ ·ï¼
// åå® Article æ¯ä¸ä¸ªç¨æ¥ç®¡çæç« çç¹æ®ç±»
// éè¿ id æ¥ç§»é¤æç« çéææ¹æ³ï¼
Article.remove({id: 12345});
éææ¹æ³å¯ä»¥å¨ç±»ä¸è°ç¨ï¼è䏿¯å¨å个对象ä¸ã
ä¾å¦ï¼è¿æ ·çä»£ç æ æ³æ£å¸¸å·¥ä½ï¼
// ...
article.createTodays(); /// Error: article.createTodays is not a function
éæå±æ§
éæç屿§ä¹æ¯å¯è½çï¼å®ä»¬çèµ·æ¥å°±å常è§çç±»å±æ§ï¼ä½åé¢å æ staticï¼
class Article {
static publisher = "Levi Ding";
}
alert( Article.publisher ); // Levi Ding
è¿çåäºç´æ¥ç» Article èµå¼ï¼
Article.publisher = "Levi Ding";
ç»§æ¿éæå±æ§åæ¹æ³
éæå±æ§åæ¹æ³æ¯å¯è¢«ç»§æ¿çã
ä¾å¦ï¼ä¸é¢è¿æ®µä»£ç ä¸ç Animal.compare å Animal.planet æ¯å¯è¢«ç»§æ¿çï¼å¯ä»¥éè¿ Rabbit.compare å Rabbit.planet æ¥è®¿é®ï¼
class Animal {
static planet = "Earth";
constructor(name, speed) {
this.speed = speed;
this.name = name;
}
run(speed = 0) {
this.speed += speed;
alert(`${this.name} runs with speed ${this.speed}.`);
}
static compare(animalA, animalB) {
return animalA.speed - animalB.speed;
}
}
// ç»§æ¿äº Animal
class Rabbit extends Animal {
hide() {
alert(`${this.name} hides!`);
}
}
let rabbits = [
new Rabbit("White Rabbit", 10),
new Rabbit("Black Rabbit", 5)
];
rabbits.sort(Rabbit.compare);
rabbits[0].run(); // Black Rabbit runs with speed 5.
alert(Rabbit.planet); // Earth
ç°å¨æä»¬è°ç¨ Rabbit.compare æ¶ï¼ç»§æ¿ç Animal.compare å°ä¼è¢«è°ç¨ã
宿¯å¦ä½å·¥ä½çï¼å次ï¼ä½¿ç¨ååãä½ å¯è½å·²ç»çå°äºï¼extends 让 Rabbit ç [[Prototype]] æåäº Animalã
æä»¥ï¼Rabbit extends Animal å建äºä¸¤ä¸ª [[Prototype]] å¼ç¨ï¼
Rabbit彿°ååç»§æ¿èªAnimal彿°ãRabbit.prototypeååç»§æ¿èªAnimal.prototypeã
ç»æå°±æ¯ï¼ç»§æ¿å¯¹å¸¸è§æ¹æ³åéææ¹æ³é½ææã
è¿éï¼è®©æä»¬éè¿ä»£ç æ¥æ£éªä¸ä¸ï¼
class Animal {}
class Rabbit extends Animal {}
// 对äºéæç
alert(Rabbit.__proto__ === Animal); // true
// 对äºå¸¸è§æ¹æ³
alert(Rabbit.prototype.__proto__ === Animal.prototype); // true
æ»ç»
éææ¹æ³è¢«ç¨äºå®ç°å±äºæ´ä¸ªç±»çåè½ãå®ä¸å ·ä½çç±»å®ä¾æ å ³ã
举个ä¾åï¼ ä¸ä¸ªç¨äºè¿è¡æ¯è¾çæ¹æ³ Article.compare(article1, article2) æä¸ä¸ªå·¥åï¼factoryï¼æ¹æ³ Article.createTodays()ã
å¨ç±»å£°æä¸ï¼å®ä»¬é½è¢«ç¨å
³é®å static è¿è¡äºæ è®°ã
éæå±æ§è¢«ç¨äºå½æä»¬æ³è¦åå¨ç±»çº§å«çæ°æ®æ¶ï¼è䏿¯ç»å®å°å®ä¾ã
è¯æ³å¦ä¸æç¤ºï¼
class MyClass {
static property = ...;
static method() {
...
}
}
仿æ¯ä¸è®²ï¼éæå£°æä¸ç´æ¥ç»ç±»æ¬èº«èµå¼ç¸åï¼
MyClass.property = ...
MyClass.method = ...
éæå±æ§åæ¹æ³æ¯å¯è¢«ç»§æ¿çã
å¯¹äº class B extends Aï¼ç±» B ç prototype æåäº Aï¼B.[[Prototype]] = Aãå æ¤ï¼å¦æä¸ä¸ªåæ®µå¨ B 䏿²¡ææ¾å°ï¼ä¼ç»§ç»å¨ A 䏿¥æ¾ã
è¯è®º
<code>æ ç¾æå ¥åªæå 个è¯ç代ç ï¼æå ¥å¤è¡ä»£ç å¯ä»¥ä½¿ç¨<pre>æ ç¾ï¼å¯¹äºè¶ è¿ 10 è¡ç代ç ï¼å»ºè®®ä½ ä½¿ç¨æ²ç®±ï¼plnkrï¼JSBinï¼codepenâ¦ï¼