JavaScript æ¯ä¸ä¸ªåºäºååçè¯è¨ââä¸ä¸ªå¯¹è±¡çè¡ä¸ºåå³äºå®èªèº«ç屿§åå ¶ååç屿§ã对类æ¥è¯´ï¼ç¸è¾äºä¸å ¶ä»é¢å对象çè¯è¨ï¼è¬å¦ Javaï¼å建对象çå¤å±çº§ç»æåå ¶å±æ§çç»§æ¿å ³ç³»éè¦æ´å¤ç代ç è¡ãæ¬èï¼æä»¬å°å±ç¤ºå¦ä½å©ç¨ç±»å建å®ä¾ã
å¨è®¸å¤å
¶ä»è¯è¨ä¸ï¼ç±»ï¼ææé 彿°ï¼ä¸å¯¹è±¡ï¼æå®ä¾ï¼ï¼æ¯ä¸¤ä¸ªä¸åçæ¦å¿µãå¨ JavaScript ä¸ï¼ç±»å¯ä»¥ç使¯å·²æçååç»§æ¿æºå¶çä¸ç§æ½è±¡ââææè¯æ³é½å¯ä»¥è½¬æ¢ä¸ºååç»§æ¿ãç±»æ¬èº«ä¹æ¯ä¸è¿æ¯ JavaScript éä¸ç§æ®éçå¼ï¼å®ä»¬æå
¶èªå·±çååé¾ãäºå®ä¸ï¼å¤§å¤æ° JavaScript çº¯å½æ°é½å¯ç¨ä½æé 彿°ââä½ å¯ä»¥ç¨ new
è¿ç®ç¬¦æ¥è°ç¨ä¸ä¸ªæé 彿°ä»¥å建åºä¸ä¸ªæ°ç对象ã
æ¬æç¨ä¸ï¼æä»¬å°ç 究类模åçæ¹æ¹é¢é¢ãå¦æä½ æ³æ·±å ¥äºè§£åºå±ååç³»ç»ï¼è¯·åé ç»§æ¿ä¸åå龿åã
æ¬ç« èåå®ä½ å·²çæ JavaScript å¹¶è½ä½¿ç¨å¸¸è§ç对象ã
ç±»çæ¦è¿°å¦æä½ å·²ç»æå¨æå®è·µè¿ JavaScript çç»åï¼ææ¯é 读æåä¸è·¯è¿æ¥ï¼ä½ å¯è½å·²ç»ç¨è¿ç±»äºï¼å³ä¾¿ä½ è¿æ²¡æèªå·±å建è¿ãä¾å¦ï¼ä½ å¯è½ä¼å¯¹è¿ä¸ªå¾çæï¼
const bigDay = new Date(2019, 6, 19);
console.log(bigDay.toLocaleDateString());
if (bigDay.getTime() < Date.now()) {
console.log("Once upon a time...");
}
å¨ç¬¬ä¸è¡ï¼æä»¬å建äºä¸ä¸ª Date
ç±»çå®ä¾ï¼å¹¶å°å
¶å½å为 bigDay
ãå¨ç¬¬äºè¡ï¼æä»¬å¨ bigDay
å®ä¾ä¸è°ç¨äº toLocaleDateString()
æ¹æ³ï¼å¹¶è¿åäºä¸ä¸ªåç¬¦ä¸²ãæ¥ä¸æ¥ï¼æä»¬å¯¹æ¯äºä¸¤ä¸ªæ°åï¼ä¸ä¸ªæ¥èªäºæ¹æ³ getTime()
çè¿åå¼ï¼å¦ä¸ªä¸æ¥èªäºå¯¹ Date
ç±»æ¬èº«çç´æ¥è°ç¨ï¼æ¬ä¾ä¸º Date.now()
ã Date
æ¯ä¸ä¸ª JavaScript çå
建类ãä»è¿ä¸ªä¾åä¸ï¼æä»¬å¯ä»¥å¾å°ä¸äºå
³äºç±»çåºæ¬æ¦å¿µï¼
new
è¿ç®ç¬¦å建对象ãè¿äºå¯¹åºäºç±»çä¸ä¸ªå ³é®ç¹å¾ï¼
ç±»é常éè¿ç±»å£°ææ¥å建ã
class MyClass {
// ç±»ä½...
}
å¨ç±»ä½å ï¼æè¥å¹²ç¹æ§å¯ç¨ã
class MyClass {
// æé 彿°
constructor() {
// æé 彿°ä½
}
// å®ä¾å段
myField = "foo";
// å®ä¾æ¹æ³
myMethod() {
// myMethod ä½
}
// éæå段
static myStaticField = "bar";
// éææ¹æ³
static myStaticMethod() {
// myStaticMethod ä½
}
// éæå
static {
// éæåå§å代ç
}
// åæ®µãæ¹æ³ãéæå段ãéææ¹æ³ãéæåé½å¯ä»¥ä½¿ç¨ç§æå½¢å¼
#myPrivateField = "bar";
}
å¦æä½ ç¨è¿æ©äº ES6 ççæ¬ï¼ä½ å¯è½æ´çæä½¿ç¨å½æ°ä½ä¸ºæé 彿°ãä¸é¢ç模å¼å¤§è´å¯ä»¥è½¬æ¢ä¸ºä»¥ä¸å½æ°æé å¨ï¼
function MyClass() {
this.myField = "foo";
// æé 彿°ä½
}
MyClass.myStaticField = "bar";
MyClass.myStaticMethod = function () {
// myStaticMethod ä½
};
MyClass.prototype.myMethod = function () {
// myMethod ä½
};
(function () {
// éæåå§å代ç
})();
夿³¨ï¼ ç§æåæ®µåæ¹æ³æ¯ç±»ä¸çæ°ç¹æ§ï¼å¨å½æ°æé å¨ä¸å¹¶æ²¡æä¸ä¹çä»·çè¯æ³ã
æé ä¸ä¸ªç±»å¨å£°æä¸ä¸ªç±»ä¹åï¼ä½ å¯ä»¥ä½¿ç¨ new
è¿ç®ç¬¦æ¥å建å®çå®ä¾ã
const myInstance = new MyClass();
console.log(myInstance.myField); // 'foo'
myInstance.myMethod();
å
¸å彿°æé å¨å¯ä»¥ä½¿ç¨ new
æ¥æé ï¼ä¹å¯ä»¥ä¸ä½¿ç¨ new
æ¥è°ç¨ãç¶èï¼å¯¹äºç±»çè°ç¨åå¿
é¡»ä½¿ç¨ new
ï¼å¦åä¼å¯¼è´é误ã
const myInstance = MyClass(); // TypeError: Class constructor MyClass cannot be invoked without 'new'
类声ææå
ä¸å½æ°å£°æä¸åï¼ç±»å£°æå¹¶ä¸ä¼è¢«æåï¼æè ï¼å¨æäºè§£éå¨ä¸ï¼å¯ä»¥è¢«æåï¼ä½æ¯æææ¶æ§æ»åºçéå¶ï¼ï¼è¿æå³çä½ ä¸è½å¨å£°æä¹å使ç¨ç±»ã
new MyClass(); // ReferenceError: Cannot access 'MyClass' before initialization
class MyClass {}
该è¡ä¸ºä¸ä½¿ç¨ let
å const
声æåé类似ã
类似äºå½æ°ï¼ç±»å£°æä¹æå ¶è¡¨è¾¾å¼å½¢å¼ã
const MyClass = class {
// ç±»ä½...
};
类表达å¼ä¹å¯ä»¥æååã表达å¼çåååªå¨ç±»ä½å å¯è§ã
const MyClass = class MyClassLongerName {
// ç±»ä½ãè¿é MyClass å MyClassLongerName æååä¸ä¸ªç±»
};
new MyClassLongerName(); // ReferenceError: MyClassLongerName is not defined
æé 彿°
ç±»æéè¦çå·¥ä½ä¹ä¸å°±æ¯ä½ä¸ºå¯¹è±¡çâå·¥åâãä¾å¦ï¼å½æä»¬ä½¿ç¨ Date
æé 彿°æ¶ï¼æä»¬ææå®ç»æä»¬ä¸ä¸ªæ°ç对象ï¼è¿ä¸ªå¯¹è±¡ä»£è¡¨äºæä»¬ä¼ å
¥çæ¥ææ°æ®ï¼è䏿们å¯ä»¥ä½¿ç¨è¯¥å®ä¾ææ´é²çå
¶ä»æ¹æ³æ¥æä½å®ãå¨ç±»ä¸ï¼å®ä¾çå建æ¯éè¿æé 彿°æ¥å®æçã
ä¾å¦ï¼æä»¬å建ä¸ä¸ªå为 Color
çç±»ï¼å®ä»£è¡¨äºä¸ä¸ªç¹å®çé¢è²ãç¨æ·éè¿ä¼ å
¥ä¸ä¸ª RGB ä¸å
ç»æ¥å建é¢è²ã
class Color {
constructor(r, g, b) {
// å° RGB å¼ä½ä¸º `this` ç屿§
this.values = [r, g, b];
}
}
æå¼ä½ çæµè§å¨çå¼åè å·¥å ·ï¼å°ä¸é¢ç代ç ç²è´´å°æ§å¶å°ä¸ï¼ç¶åå建ä¸ä¸ªå®ä¾ï¼
const red = new Color(255, 0, 0);
console.log(red);
ä½ åºè¯¥ä¼çå°å¦ä¸è¾åºï¼
Object { values: (3) [â¦] } values: Array(3) [ 255, 0, 0 ]
ä½ å·²ç»æåå建äºä¸ä¸ª Color
å®ä¾ï¼è¯¥å®ä¾æä¸ä¸ª values
屿§ï¼å®æ¯ä¸ä¸ªå
å«äºä½ ä¼ å
¥ç RGB å¼çæ°ç»ãè¿ä¸ä¸é¢ç代ç å 乿¯çä»·çï¼
function createColor(r, g, b) {
return {
values: [r, g, b],
};
}
æé 彿°çè¯æ³ä¸æ®é彿°å®å ¨ç¸åââè¿æå³çä½ å¯ä»¥ä½¿ç¨å ¶ä»è¯æ³ï¼ä¾å¦å©ä½åæ°ï¼
class Color {
constructor(...values) {
this.values = values;
}
}
const red = new Color(255, 0, 0);
// å建ä¸ä¸ªä¸ä¸é¢çä»·çå®ä¾
æ¯ä¸æ¬¡è°ç¨ new
é½å°å建ä¸ä¸ªæ°çå®ä¾ã
const red = new Color(255, 0, 0);
const anotherRed = new Color(255, 0, 0);
console.log(red === anotherRed); // false
å¨ç±»çæé 彿°éï¼this
ç弿忰å建çå®ä¾ãä½ å¯ä»¥èµäºå®æ°ç屿§ï¼æè
读åå·²æç屿§ï¼å°¤å
¶æ¯æ¹æ³ââæä»¬å°å¨ä¸ä¸èä¸ä»ç»ï¼ã
this
çå¼å°èªå¨ä½ä¸º new
çç»æè¿åãä¸å»ºè®®ä»æé 彿°ä¸è¿åä»»ä½å¼ââå ä¸ºå¦æä½ è¿åä¸ä¸ªéåå§ç±»åçå¼ï¼å®å°æä¸º new
表达å¼çå¼ï¼è this
çå¼å°è¢«ä¸¢å¼ãä½ å¯ä»¥å¨ new è¿ç®ç¬¦çæè¿°ä¸é
读æ´å¤å
³äº new
çå
容ã
class MyClass {
constructor() {
this.myField = "foo";
return {};
}
}
console.log(new MyClass().myField); // undefined
å®ä¾æ¹æ³
妿ä¸ä¸ªç±»åªææé 彿°ï¼é£ä¹å®ä¸ä¸ä¸ªåªå建æ®é对象ç createX
å·¥å彿°å¹¶æ²¡æå¤ªå¤§çåºå«ãç¶èï¼ç±»ç强大ä¹å¤å¨äºå®ä»¬å¯ä»¥ä½ä¸ºâ模æ¿âï¼èªå¨å°æ¹æ³åé
ç»å®ä¾ã
ä¾å¦ï¼å¯¹äº Date
å®ä¾ï¼ä½ å¯ä»¥ç¨ä¸ç³»åæ¹æ³æ¥è·åæ¥æçä¸åé¨åï¼ä¾å¦å¹´ä»½ãæä»½ãææå ççãä½ ä¹å¯ä»¥éè¿ setX
æ¹æ³æ¥è®¾ç½®è¿äºå¼ï¼ä¾å¦ setFullYear
ã
å¯¹äºæä»¬ç Color
ç±»ï¼æä»¬å¯ä»¥æ·»å ä¸ä¸ªæ¹æ³æ¥è·å红è²å¼ï¼
class Color {
constructor(r, g, b) {
this.values = [r, g, b];
}
getRed() {
return this.values[0];
}
}
const red = new Color(255, 0, 0);
console.log(red.getRed()); // 255
æ²¡ææ¹æ³ç帮å©ï¼ä½ å¯è½ä¼å°è¯å¨æé 彿°å é¨å®ä¹è¯¥å½æ°ï¼
class Color {
constructor(r, g, b) {
this.values = [r, g, b];
this.getRed = function () {
return this.values[0];
};
}
}
è¿ä¹æ¯å¯ä»¥çãç¶èï¼è¿ä¼å¯¼è´æ¯æ¬¡å建 Color
å®ä¾æ¶é½ä¼å建ä¸ä¸ªæ°ç彿°ï¼å³ä½¿å®ä»¬é½åçåæ ·çäºæ
ï¼
console.log(new Color().getRed === new Color().getRed); // false
ä¸ä¹ç¸åå°ï¼å¦æä½ ä½¿ç¨æ¹æ³ï¼å®å°å¨ææå®ä¾ä¹é´å
±äº«ãä¸ä¸ªå½æ°å¯ä»¥å¨ææå®ä¾ä¹é´å
±äº«ï¼ä¸å¨ä¸åå®ä¾è°ç¨æ¶å
¶è¡ä¸ºä¹ä¸åï¼å 为 this
çå¼ä¸åãä½ ä¹è®¸å¥½å¥è¿ä¸ªæ¹æ³åå¨å¨åªéââå®è¢«å®ä¹å¨ææå®ä¾çååä¸ï¼å³ Color.prototype
ï¼è¯¦æ
åé
ç»§æ¿ä¸ååé¾ã
ç¸ä¼¼çï¼æä»¬ä¹å¯ä»¥æ·»å ä¸ä¸ª setRed
æ¹æ³æ¥è®¾ç½®çº¢è²å¼ï¼
class Color {
constructor(r, g, b) {
this.values = [r, g, b];
}
getRed() {
return this.values[0];
}
setRed(value) {
this.values[0] = value;
}
}
const red = new Color(255, 0, 0);
red.setRed(0);
console.log(red.getRed()); // 0; æ¤æ¶ä¹å³é»è²
ç§æåæ®µ
ä½ æè®¸ä¼å¥½å¥ï¼ä¸ºä»ä¹æä»¬è¦è´¹å¿ä½¿ç¨ getRed
å setRed
æ¹æ³ï¼è䏿¯ç´æ¥è®¿é®å®ä¾ä¸ç values
æ°ç»å¢ï¼
class Color {
constructor(r, g, b) {
this.values = [r, g, b];
}
}
const red = new Color(255, 0, 0);
red.values[0] = 0;
console.log(red.values[0]); // 0
å¨é¢å对象ç¼ç¨ä¸ï¼æä¸ä¸ªå«åâå°è£ âçå²å¦ãè¿æ¯è¯´ä½ ä¸åºè¯¥è®¿é®å¯¹è±¡çåºå±å®ç°ï¼èæ¯ä½¿ç¨æ½è±¡æ¹æ³æ¥ä¸ä¹äº¤äºãä¾å¦ï¼å¦ææä»¬çªç¶å³å®å°é¢è²è¡¨ç¤ºä¸º HSL è䏿¯ RGBï¼
class Color {
constructor(r, g, b) {
// values ç°å¨æ¯ä¸ä¸ª HSL æ°ç»ï¼
this.values = rgbToHSL([r, g, b]);
}
getRed() {
return this.values[0];
}
setRed(value) {
this.values[0] = value;
}
}
const red = new Color(255, 0, 0);
console.log(red.values[0]); // 0; ä¸åæ¯ 255ï¼å 为 HSL 模åä¸çº¯çº¢è²ç H åé为 0
ç¨æ·å¯¹ values
æ°ç»ä»£è¡¨ RGB å¼çå设ä¸åæç«ï¼è¿å¯è½ä¼æç ´ä»ä»¬ç代ç é»è¾ãå æ¤ï¼å¦æä½ æ¯ä¸ä¸ªç±»çå®ç°è
ï¼ä½ åºè¯¥éèå®ä¾çå
鍿°æ®ç»æï¼ä»¥ä¿æ API çç®æ´æ§ï¼å¹¶é²æ¢å¨ä½ åäºä¸äºâæ 害çéæâæ¶ï¼ç¨æ·ä»£ç ä¸è³äºå´©æºãå¨ç±»ä¸ï¼è¿æ¯éè¿ç§æå段æ¥å®ç°çã
ç§æåæ®µæ¯ä»¥ #
ï¼äºå·ï¼å¼å¤´çæ è¯ç¬¦ãäºå·æ¯è¿ä¸ªå段åçå¿
è¦é¨åï¼è¿ä¹å°±æå³çç§æåæ®µæ°¸è¿ä¸ä¼ä¸å
Œ
±åæ®µææ¹æ³åçå½åå²çªã为äºå¨ç±»ä¸çä»»ä½å°æ¹å¼ç¨ä¸ä¸ªç§æå段ï¼ä½ å¿
é¡»å¨ç±»ä½ä¸å£°æå®ï¼ä½ ä¸è½å¨ç±»ä½å¤é¨åå»ºç§æå
ç´ ï¼ã餿¤ä¹å¤ï¼ç§æåæ®µä¸æ®é屿§å 乿¯çä»·çã
class Color {
// 声æï¼æ¯ä¸ª Color å®ä¾é½æä¸ä¸ªå为 #values çç§æåæ®µã
#values;
constructor(r, g, b) {
this.#values = [r, g, b];
}
getRed() {
return this.#values[0];
}
setRed(value) {
this.#values[0] = value;
}
}
const red = new Color(255, 0, 0);
console.log(red.getRed()); // 255
å¨ç±»å¤è®¿é®ç§æå段ä¼å¯¼è´è¯æ³é误ï¼ä¸è¯¥é误å¯ä»¥å¨æ©æè¢«æè·ï¼æ©æè¯æ³é误ï¼ãå 为 #privateField
æ¯ä¸ä¸ªç¹æ®è¯æ³ï¼æä»¥è§£éå¨å¯ä»¥å¨æ§è¡ä»£ç ä¹ååä¸äºéæåæï¼æ¾å°ææè®¿é®ç§æå段çå°æ¹ã
console.log(red.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class
夿³¨ï¼ å¨ Chrome æ§å¶å°ä¸è¿è¡ç代ç å¯ä»¥å¨ç±»å¤è®¿é®ç§æå段ï¼JavaScript ä¸ºäºæ¹ä¾¿è°è¯èä» å¨ DevTools 䏿¾å®½äºè¿ä¸éå¶ã
JavaScript ä¸çç§æåæ®µæ¯ç¡¬ç§æçï¼å¦æç±»æ²¡æå®ç°æ´é²è¿äºç§æåæ®µçæ¹æ³ï¼ä¹å°±æ²¡æä»»ä½æºå¶å¯ä»¥ä»ç±»å¤è®¿é®å®ä»¬ãè¿æå³çä½ å¯ä»¥å¯¹ç±»çç§æåæ®µåä»»ä½éæï¼åªè¦æ´é²çæ¹æ³çè¡ä¸ºä¿æä¸åå³å¯ã
å¨æä»¬å° values
åæ®µç§æåä¹åï¼æä»¬å¯ä»¥å¨ getRed
å setRed
æ¹æ³ä¸æ·»å ä¸äºé»è¾ï¼èä¸ä»
ä»
æ¯ç®åä¿¡æ¯ä¼ éãä¾å¦ï¼æä»¬å¯ä»¥å¨ setRed
䏿·»å ä¸ä¸ªæ£æ¥é»è¾ï¼ä»¥ç¡®ä¿å®æ¯ä¸ä¸ªææç R å¼ï¼
class Color {
#values;
constructor(r, g, b) {
this.#values = [r, g, b];
}
getRed() {
return this.#values[0];
}
setRed(value) {
if (value < 0 || value > 255) {
throw new RangeError("æ æç R å¼");
}
this.#values[0] = value;
}
}
const red = new Color(255, 0, 0);
red.setRed(1000); // RangeErrorï¼æ æç R å¼
妿æä»¬æ´é² values
屿§ï¼æä»¬çç¨æ·å°±ä¼å¾å®¹æå°ç»è¿è¿ä¸ªæ£æ¥ï¼ç´æ¥ç» values[0]
èµå¼ï¼ä»èå建ä¸ä¸ªæ æçé¢è²ã使¯éè¿è¯å¥½å°è£
ç APIï¼æä»¬å¯ä»¥ä½¿æä»¬çä»£ç æ´å å¥å£®ï¼é²æ¢ä¸æ¸¸çé»è¾é误ã
ç±»æ¹æ³å¯ä»¥è¯»åå ¶ä»å®ä¾çç§æåæ®µï¼åªè¦å®ä»¬å±äºåä¸ä¸ªç±»å³å¯ã
class Color {
#values;
constructor(r, g, b) {
this.#values = [r, g, b];
}
redDifference(anotherColor) {
// #values ä¸ä¸å®è¦ä» this 访é®ï¼
// ä½ ä¹å¯ä»¥è®¿é®å±äºåä¸ä¸ªç±»çå
¶ä»å®ä¾çç§æåæ®µã
return this.#values[0] - anotherColor.#values[0];
}
}
const red = new Color(255, 0, 0);
const crimson = new Color(220, 20, 60);
red.redDifference(crimson); // 35
ç¶èï¼è¥ anotherColor
å¹¶éä¸ä¸ª Color
å®ä¾ï¼#values
å°ä¸åå¨ï¼å³ä½¿å¦ä¸ä¸ªç±»æä¸ä¸ªååçç§æåæ®µï¼å®ä¹ä¸æ¯åä¸ä¸ªä¸è¥¿ï¼ä¹ä¸è½å¨è¿é访é®ï¼ã访é®ä¸ä¸ªä¸åå¨çç§æåæ®µä¼æåºé误ï¼è䏿¯åæ®é屿§ä¸æ ·è¿å undefined
ãå¦æä½ ä¸ç¥éä¸ä¸ªå¯¹è±¡ä¸æ¯å¦åå¨ä¸ä¸ªç§æå段ï¼ä¸ä½ 叿å¨ä¸ä½¿ç¨ try
/catch
æ¥å¤çé误çæ
åµä¸è®¿é®å®ï¼ä½ å¯ä»¥ä½¿ç¨ in
è¿ç®ç¬¦ã
class Color {
#values;
constructor(r, g, b) {
this.#values = [r, g, b];
}
redDifference(anotherColor) {
if (!(#values in anotherColor)) {
throw new TypeError("Color instance expected");
}
return this.#values[0] - anotherColor.#values[0];
}
}
夿³¨ï¼ 请记ä½ï¼#
æ¯ä¸ç§ç¹æ®çæ è¯ç¬¦è¯æ³ï¼ä½ ä¸è½ååç¬¦ä¸²ä¸æ ·ä½¿ç¨è¯¥å段åã"#values" in anotherColor
伿¥æ¾ä¸ä¸ªå为 "#values"
ç屿§ï¼è䏿¯ä¸ä¸ªç§æå段ã
æä¸äºéå¶å¨ä½¿ç¨ç§æå段æ¶éè¦æ³¨æï¼å¨å个类ä¸ï¼ç¸åçåç§°ä¸è½å£°æä¸¤æ¬¡ï¼ä¸å®ä»¬ä¸è½è¢«å é¤ãè¿ä¸¤ç§æ åµé½ä¼å¯¼è´æ©æè¯æ³é误ã
class BadIdeas {
#firstName;
#firstName; // è¿éä¼åçè¯æ³é误
#lastName;
constructor() {
delete this.#lastName; // ä¹ä¼åçè¯æ³é误
}
}
æ¹æ³ãgetter ä¸ setter ä¹å¯ä»¥æ¯ç§æçãå½ä½ éè¦ç±»å é¨åä¸äºå¤æçäºæ ï¼ä½æ¯ä¸å¸æä»£ç çå ¶ä»é¨åè°ç¨æ¶ï¼å®ä»¬å°±å¾æç¨ã
ä¾å¦ï¼æ³è±¡ä¸ä¸å建 HTML èªå®ä¹å ç´ æ¶ï¼å½ç¹å»ã触æ¸çäºä»¶è¢«æ¿æ´»æ¶å¯è½ä¼åä¸äºæç¹å¤æçäºæ ãæ¤å¤ï¼å½å ç´ è¢«ç¹å»æ¶åççæç¹å¤æçäºæ åºè¯¥éå¶å¨è¿ä¸ªç±»ä¸ï¼å 为ç¨åºçå ¶ä»é¨åï¼æè ä¸åºè¯¥ï¼æ°¸è¿ä¸ä¼è®¿é®å®ã
class Counter extends HTMLElement {
#xValue = 0;
constructor() {
super();
this.onclick = this.#clicked.bind(this);
}
get #x() {
return this.#xValue;
}
set #x(value) {
this.#xValue = value;
window.requestAnimationFrame(this.#render.bind(this));
}
#clicked() {
this.#x++;
}
#render() {
this.textContent = this.#x.toString();
}
connectedCallback() {
this.#render();
}
}
customElements.define("num-counter", Counter);
å¨è¿ä¸ªä¾åä¸ï¼å 乿¯ä¸ªåæ®µåæ¹æ³é½æ¯ç§æçãå æ¤ï¼å®åç¨åºçå
¶ä»é¨åæä¾äºä¸ä¸ªæ¥å£ï¼è¿ä¸ªæ¥å£ä¸å
ç½®ç HTML å
ç´ é常ç¸ä¼¼ï¼è Counter
çå
é¨åä¸åå¤é¨å½±åã
color.getRed()
å color.setRed()
å
许æä»¬è¯»åååå
¥é¢è²ç红è²å¼ãå¦æä½ çæå Java è¿æ ·çè¯è¨ï¼ä½ ä¼å¯¹è¿ç§æ¨¡å¼é常çæãç¶èï¼å¨ JavaScript ä¸ï¼ä½¿ç¨æ¹æ³æ¥ç®åå°è®¿é®å±æ§ä»ç¶æäºä¸ä¾¿ãgetter åæ®µå
许æä»¬å访é®âå®é
屿§â䏿 ·æä½æäºä¸è¥¿ã
class Color {
constructor(r, g, b) {
this.values = [r, g, b];
}
get red() {
return this.values[0];
}
set red(value) {
this.values[0] = value;
}
}
const red = new Color(255, 0, 0);
red.red = 0;
console.log(red.red); // 0
è¿å°±åæ¯å¯¹è±¡æäºä¸ä¸ª red
屿§ââä½å®é
ä¸ï¼å®ä¾ä¸å¹¶æ²¡æè¿æ ·ç屿§ï¼å®ä¾åªæä¸¤ä¸ªæ¹æ³ï¼åå«ä»¥ get
å set
为åç¼ï¼èè¿ä½¿å¾æä»¬å¯ä»¥åæä½å±æ§ä¸æ ·æä½å®ä»¬ã
妿ä¸ä¸ªåæ®µä» æä¸ä¸ª getter èæ²¡æ setterï¼å®å°æ¯åªè¯»çã
class Color {
constructor(r, g, b) {
this.values = [r, g, b];
}
get red() {
return this.values[0];
}
}
const red = new Color(255, 0, 0);
red.red = 0;
console.log(red.red); // 255
å¨ä¸¥æ ¼æ¨¡å¼ä¸ï¼red.red = 0
è¿ä¸è¡å°æåºç±»åé误ï¼âCannot set property red of #<Color> which has only a getterâãå¨éä¸¥æ ¼æ¨¡å¼ä¸ï¼èµå¼å°è¢«éé»å¿½ç¥ã
æä»¬å·²ç»è§è¿äºç§æå段ï¼å¯¹åºå°ï¼è¿æå ¬å ±å段ãå ¬å ±åæ®µä½¿å¾å®ä¾å¯ä»¥è·å¾å±æ§ï¼ä¸å®ä»¬å¸¸å¸¸ç¬ç«äºæé 彿°çåæ°ã
class MyClass {
luckyNumber = Math.random();
}
console.log(new MyClass().luckyNumber); // 0.5
console.log(new MyClass().luckyNumber); // 0.3
å
Œ
±å段å ä¹çä»·äºå°ä¸ä¸ªå±æ§èµå¼ç» this
ãä¾å¦ï¼ä¸é¢çä¾åä¹å¯ä»¥è½¬æ¢ä¸ºï¼
class MyClass {
constructor() {
this.luckyNumber = Math.random();
}
}
éæå±æ§
å¨ä¸é¢ç Date
ä¾åä¸ï¼æä»¬è¿éå°äº Date.now()
æ¹æ³ï¼å®è¿åå½åæ¥æãè¿ä¸ªæ¹æ³ä¸å±äºä»»ä½æ¥æå®ä¾ââå®å±äºç±»æ¬èº«ãç¶èï¼å®è¢«æ¾å¨ Date
ç±»ä¸ï¼è䏿¯ä½ä¸ºå
¨å±ç DateNow()
彿°ï¼å 为å®å¨å¤çæ¥æå®ä¾æ¶ææç¨ã
夿³¨ï¼ ä¸ä¸ªå¥½çä¹ æ¯æ¯ç»å·¥å
·æ¹æ³ä¸ä¸ªåç¼ï¼è¿ä¹ç§°ä½âå½å空é´âï¼ãä¾å¦ï¼é¤äºæ§çãæ²¡æåç¼ç parseInt()
æ¹æ³ä¹å¤ï¼JavaScript åæ¥è¿æ·»å äºå¸¦æåç¼ç Number.parseInt()
æ¹æ³ï¼ä»¥è¡¨æå®æ¯ç¨äºå¤çæ°åçã
éæå±æ§æ¯ä¸ç»å¨ç±»æ¬èº«ä¸å®ä¹çç¹æ§ï¼è䏿¯å¨ç±»çå®ä¾ä¸å®ä¹çç¹æ§ãè¿äºç¹æ§å æ¬ï¼
å¯è§ï¼æä»¬ä¹åè§è¿çææç±»çç¹æ§é½æå
¶éæçæ¬ãä¾å¦ï¼å¯¹äºæä»¬ç Color
ç±»ï¼æä»¬å¯ä»¥å建ä¸ä¸ªéææ¹æ³ï¼å®æ£æ¥ç»å®çä¸å
ç»æ¯å¦æ¯ææç RGB å¼ï¼
class Color {
static isValid(r, g, b) {
return r >= 0 && r <= 255 && g >= 0 && g <= 255 && b >= 0 && b <= 255;
}
}
Color.isValid(255, 0, 0); // true
Color.isValid(1000, 0, 0); // false
éæå±æ§ä¸å®ä¾å±æ§çåºå«å¨äºï¼
static
åç¼ï¼ä¸console.log(new Color(0, 0, 0).isValid); // undefined
æä¸ä¸ªç¹æ®ç»æå«åéæåå§ååï¼å®æ¯ä¸ä¸ªå¨ç±»ç¬¬ä¸æ¬¡å è½½æ¶è¿è¡ç代ç åã
class MyClass {
static {
MyClass.myStaticProperty = "foo";
}
}
console.log(MyClass.myStaticProperty); // 'foo'
éæåå§ååå ä¹çä»·äºå¨ç±»å£°æä¹åç«å³æ§è¡ä¸äºä»£ç ãå¯ä¸çåºå«æ¯å®ä»¬å¯ä»¥è®¿é®éæç§æå ç´ ã
æ©å±ä¸ç»§æ¿ç±»çä¸ä¸ªå ³é®ç¹æ§ï¼é¤äºç§æåæ®µï¼æ¯ç»§æ¿ï¼è¿æå³çä¸ä¸ªå¯¹è±¡å¯ä»¥âåç¨âå¦ä¸ä¸ªå¯¹è±¡ç大é¨åè¡ä¸ºï¼åæ¶è¦çæå¢å¼ºæäºé¨åçé»è¾ã
ä¾å¦ï¼å宿们éè¦ä¸º Color
ç±»å¼å
¥éæåº¦æ¯æãæä»¬å¯è½ä¼å°è¯æ·»å ä¸ä¸ªæ°çåæ®µæ¥è¡¨ç¤ºå®çéæåº¦ï¼
class Color {
#values;
constructor(r, g, b, a = 1) {
this.#values = [r, g, b, a];
}
get alpha() {
return this.#values[3];
}
set alpha(value) {
if (value < 0 || value > 1) {
throw new RangeError("Alpha å¼å¿
é¡»å¨ 0 ä¸ 1 ä¹é´");
}
this.#values[3] = value;
}
}
ç¶èï¼è¿æå³çæ¯ä¸ªå®ä¾ââå³ä½¿æ¯å¤§å¤æ°ä¸éæçå®ä¾ï¼é£äº alpha å¼ä¸º 1 çå®ä¾ï¼ââé½å¿
é¡»æé¢å¤ç alpha å¼ï¼è¿å¹¶ä¸æ¯å¾ä¼é
ãæ¤å¤ï¼å¦æç¹æ§ç»§ç»å¢é¿ï¼æä»¬ç Color
ç±»å°åå¾é常èè¿ä¸é¾ä»¥ç»´æ¤ã
æä»¥ï¼å¨é¢å对象ç¼ç¨ä¸ï¼æä»¬æ´æ¿æå建ä¸ä¸ªæ´¾çç±»ãæ´¾çç±»å¯ä»¥è®¿é®ç¶ç±»çææå
Œ
±å±æ§ãå¨ JavaScript ä¸ï¼æ´¾çç±»æ¯éè¿ extends
åå¥å£°æçï¼å®æç¤ºå®æ©å±èªåªä¸ªç±»ã
class ColorWithAlpha extends Color {
#alpha;
constructor(r, g, b, a) {
super(r, g, b);
this.#alpha = a;
}
get alpha() {
return this.#alpha;
}
set alpha(value) {
if (value < 0 || value > 1) {
throw new RangeError("Alpha å¼å¿
é¡»å¨ 0 ä¸ 1 ä¹é´");
}
this.#alpha = value;
}
}
æä¸äºäºæ
éè¦æ³¨æãé¦å
ï¼å¨æé å¨ä¸ï¼æä»¬è°ç¨äº super(r, g, b)
ãå¨è®¿é® this
ä¹åï¼å¿
é¡»è°ç¨ super()
ï¼è¿æ¯ JavaScript çè¦æ±ãsuper()
è°ç¨ç¶ç±»çæé 彿°æ¥åå§å this
ââè¿é大è´ç¸å½äº this = new Color(r, g, b)
ãsuper()
ä¹åä¹å¯ä»¥æä»£ç ï¼ä½ä½ ä¸è½å¨ super()
ä¹åè®¿é® this
ââJavaScript ä¼é»æ¢ä½ è®¿é®æªåå§åç this
ã
å¨ç¶ç±»å®æå¯¹ this
çä¿®æ¹åï¼æ´¾çç±»æå¯ä»¥å¯¹å
¶è¿è¡èªå·±çé»è¾ãè¿éæä»¬æ·»å äºä¸ä¸ªå为 #alpha
çç§æåæ®µï¼å¹¶æä¾äºä¸å¯¹ getter/setter æ¥ä¸ä¹äº¤äºã
æ´¾çç±»ä¼ç»§æ¿ç¶ç±»çæææ¹æ³ãä¾å¦ï¼å°½ç®¡ ColorWithAlpha
èªèº«å¹¶æ²¡æå£°æä¸ä¸ª get red()
getterï¼ä½ ä»ç¶å¯ä»¥è®¿é® red
ï¼å 为è¿ä¸ªè¡ä¸ºæ¯ç±ç¶ç±»æå®çï¼
const color = new ColorWithAlpha(255, 0, 0, 0.5);
console.log(color.red); // 255
æ´¾çç±»ä¹å¯ä»¥è¦çç¶ç±»çæ¹æ³ãä¾å¦ï¼ææç±»é½éå¼ç»§æ¿èª Object
ç±»ï¼å®å®ä¹äºä¸äºåºæ¬æ¹æ³ï¼ä¾å¦ toString()
ãç¶èï¼åºæ¬ç toString()
æ¹æ³æ¯åºäºåçæ ç¨æ¹æ³ï¼å 为å®å¨å¤§å¤æ°æ
åµä¸æå° [object Object]
ï¼
console.log(red.toString()); // [object Object]
æä»¥ï¼æä»¬å¯ä»¥è¦çå®ï¼ä»¥ä¾¿å¨æå°é¢è²æ¶æå°å®ç RGB å¼ï¼
class Color {
#values;
// â¦
toString() {
return this.#values.join(", ");
}
}
console.log(new Color(255, 0, 0).toString()); // '255, 0, 0'
卿´¾çç±»å
ï¼ä½ å¯ä»¥ä½¿ç¨ super
访é®ç¶ç±»çæ¹æ³ãè¿å
è®¸ä½ å¯ä»¥å¨é¿å
代ç éå¤çæ
åµä¸å¢å¼ºç¶ç±»çæ¹æ³ã
class ColorWithAlpha extends Color {
#alpha;
// â¦
toString() {
// è°ç¨ç¶ç±»ç toString()ï¼å¹¶ä»¥æ¤æå»ºæ°çè¿åå¼
return `${super.toString()}, ${this.#alpha}`;
}
}
console.log(new ColorWithAlpha(255, 0, 0, 0.5).toString()); // '255, 0, 0, 0.5'
å½ä½ ç¨ extends
æ¶ï¼éææ¹æ³ä¹ä¼ç»§æ¿ï¼å æ¤ä½ ä¹å¯ä»¥è¦çæå¢å¼ºå®ä»¬ã
class ColorWithAlpha extends Color {
// ...
static isValid(r, g, b, a) {
// è°ç¨ç¶ç±»ç isValid()ï¼å¹¶å¨æ¤åºç¡ä¸å¢å¼ºè¿åå¼
return super.isValid(r, g, b) && a >= 0 && a <= 1;
}
}
console.log(ColorWithAlpha.isValid(255, 0, 0, -1)); // false
æ´¾çç±»æ æè®¿é®ç¶ç±»çç§æåæ®µââè¿æ¯ JavaScript ç§æåæ®µçä¸ä¸ªå ³é®ç¹æ§ï¼âç¡¬ç§æâï¼ãç§æåæ®µçææèå´è¢«ä¸¥æ ¼éå¶å¨ç±»ä½å ï¼æä»¥ä»»ä½å¤é¨ä»£ç 齿 æè®¿é®ã
class ColorWithAlpha extends Color {
log() {
console.log(this.#values); // SyntaxError: Private field '#values' must be declared in an enclosing class
}
}
ä¸ä¸ªç±»åªè½è³å¤æ©å±èªä¸ä¸ªç¶ç±»ãè¿å¯ä»¥é²æ¢å¤éç»§æ¿ä¸çé®é¢ï¼ä¾å¦è±å½¢é®é¢ãç¶èï¼ç±äº JavaScript ç卿æ§ï¼ä»ç¶å¯ä»¥éè¿ç±»ç»åå mixin æ¥å®ç°å¤éç»§æ¿çææã
æ´¾çç±»çå®ä¾åæ¶ä¹æ¯ç¶ç±»çå®ä¾ï¼å¯ç¨ instancesof
è¿ç®ç¬¦æ¥éªè¯ã
const color = new ColorWithAlpha(255, 0, 0, 0.5);
console.log(color instanceof Color); // true
console.log(color instanceof ColorWithAlpha); // true
为ä»ä¹ç¨ç±»ï¼
æ¬æåå°ç®å为æ¢ä¸ç´å¾å®ç¨ï¼æä»¬ä¸æ³¨äºå¦ä½ä½¿ç¨ç±»ï¼ä½æä¸ä¸ªé®é¢å°æªè§£çï¼ä¸ºä»ä¹è¦ä½¿ç¨ç±»ï¼çæ¡æ¯ï¼è§æ åµèå®ã
ç±»å¼å ¥äºä¸ç§èå¼ï¼æè 说æ¯ä¸ç§ç»ç»ä»£ç çæ¹å¼ãç±»æ¯é¢å对象ç¼ç¨çåºç¡ï¼èé¢å对象ç¼ç¨æ¯å»ºç«å¨è¯¸å¦ç»§æ¿å夿ï¼ç¹å«æ¯åç±»å夿ï¼çæ¦å¿µä¹ä¸çãç¶èï¼è®¸å¤äººå¨å²å¦ä¸å对æäºé¢å对象ç¼ç¨çåæ³ï¼å æ¤ä¸ä½¿ç¨ç±»ã
ä¾å¦ï¼Date
对象çä¸ä¸ªä»¤äººåæ¶çç¹æ§æ¯å®æ¯å¯åçã
function incrementDay(date) {
return date.setDate(date.getDate() + 1);
}
const date = new Date(); // 2019-06-19
const newDay = incrementDay(date);
console.log(newDay); // 2019-06-20
// æ§æ¥æä¹è¢«ä¿®æ¹äºï¼ï¼
console.log(date); // 2019-06-20
å¯åæ§ä¸å é¨ç¶ææ¯é¢å对象ç¼ç¨çéè¦æ¹é¢ï¼ä½é常ä¼ä½¿ä»£ç é¾ä»¥çè§£ââå 为任ä½çä¼¼æ 害çæä½é½å¯è½äº§çææ³ä¸å°çå¯ä½ç¨ï¼å¹¶æ¹åç¨åºä¸å ¶ä»é¨åçè¡ä¸ºã
为äºä»£ç çå¯éå¤å©ç¨ï¼æä»¬é叏伿±å©äºæ©å±ç±»ï¼ä½è¿ä¹ä¼å¯¼è´ç±»ç屿¬¡ç»æä¸ç»§æ¿å ³ç³»åå¾å¤æã
ç¶èï¼å¦ææä»¬åªè½ç»§æ¿èªä¸ä¸ªç¶ç±»ï¼æä»¬åå¾é¾æ¸ æ¥å°æè¿°è¿ç§ç»§æ¿å ³ç³»ãä¸ç§å¸¸è§çæ 嵿¯ï¼æä»¬æ³è¦åæ¶æ¥ææ¥èªå¤ä¸ªç±»çè¡ä¸ºãå¨ Java ä¸ï¼æä»¬å¯ä»¥å©ç¨æ¥å£ï¼å¨ JavaScript ä¸ï¼æä»¬æ¯ç¨ mixin æ¥è§£å³çãä½å½æ ¹ç»åºï¼ä»ä¸æ¯å¾æ¹ä¾¿ã
å¾å¥½çæ¹é¢æ³ï¼ç±»æ¯ä¸ç§é常强大çå·¥å
·ï¼æä»¬å¯ä»¥å©ç¨å®æé«æä»¬ç»ç»ä»£ç ç屿¬¡ãä¾å¦ï¼å¦è¥æ²¡æ Color
ç±»ï¼æä»¬å¯è½éè¦å建ä¸å å·¥å
·å½æ°ï¼
function isRed(color) {
return color.red === 255;
}
function isValidColor(color) {
return (
color.red >= 0 &&
color.red <= 255 &&
color.green >= 0 &&
color.green <= 255 &&
color.blue >= 0 &&
color.blue <= 255
);
}
// ...
ä½å©ç¨ç±»ï¼æä»¬å¯ä»¥å°å®ä»¬ç»ç»å
¥ Color
å½å空é´å
ï¼è¿æé«äºä»£ç çå¯è¯»æ§ãæ¤å¤ï¼ç§æå段å
许æä»¬éèå
鍿°æ®ç»æï¼è¿ä½¿å¾æä»¬å¯ä»¥å¨ä¸ç ´å API çæ
åµä¸å¯¹å
¶è¿è¡éæã
ç®èè¨ä¹ï¼ä½ åºè¯¥å¨ä½ æ³è¦å¨åä¸äºå 鍿°æ®ãå¹¶æ´é²å¤§éæ¹æ³çæ¶åèè使ç¨ç±»ãä¾å¦è¿äºå ç½®ç JavaScript ç±»ï¼
Map
ä¸ Set
ç±»åå¨äºè®¸å¤å
ç´ ï¼ä½ å¯ä»¥éè¿ get()
ãset()
ãhas()
çæ¹æ³è®¿é®å®ä»¬ãDate
类以 Unix æ¶é´æ³çå½¢å¼å卿¥æï¼å¹¶å
è®¸ä½ æ ¼å¼åãæ´æ°ä¸è¯»ååç¬çæ¥æå
ç´ ãError
ç±»åå¨äºç¹å®å¼å¸¸çä¿¡æ¯ï¼å
æ¬éè¯¯æ¶æ¯ãå æ è·è¸ªãåå çã宿¯å°æ°å ä¸ªæ¥æä¸°å¯ç»§æ¿ç»æçç±»ä¹ä¸ï¼æå¤ä¸ªå
置类ï¼ä¾å¦ TypeError
ä¸ ReferenceError
ï¼ç»§æ¿èª Error
ãå¨åçé误æ¶ï¼è¿ç§ç»§æ¿å
许ç»åé误çè¯ä¹ï¼æ¯ä¸ªé误类é½ä»£è¡¨ä¸ä¸ªç¹å®ç±»åçé误ï¼å¯ä»¥å¾å®¹æå°éè¿ instanceof
è¿è¡æ£æ¥ãJavaScript æä¾äºä»¥é¢åå¯¹è±¡çæ¹å¼ç»ç»ä»£ç çè½åï¼ä½æ¯å¦å¹¶å¦ä½ä½¿ç¨å®å®å ¨åå³äºç¨åºåç夿ã
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4