é¢å对象ç¼ç¨æéè¦çååä¹ä¸ ââ å°å 鍿¥å£ä¸å¤é¨æ¥å£åé弿¥ã
å¨å¼åæ¯ âhello worldâ åºç¨ç¨åºæ´å¤æçä¸è¥¿æ¶ï¼è¿æ¯âå¿ é¡»âéµå®çåæ³ã
为äºçè§£è¿ä¸ç¹ï¼è®©æä»¬è±ç¦»å¼åè¿ç¨ï¼æç®å 转åç°å®ä¸çã
éå¸¸ï¼æä»¬ä½¿ç¨ç设å¤é½é叏夿ã使¯ï¼å°å 鍿¥å£ä¸å¤é¨æ¥å£åé弿¥å¯ä»¥è®©æä»¬ä½¿ç¨å®ä»¬ä¸æ²¡æä»»ä½é®é¢ã
ä¸ä¸ªç°å®çæ´»ä¸çä¾å
ä¾å¦ï¼ä¸ä¸ªå塿ºãä»å¤é¢çå¾ç®åï¼ä¸ä¸ªæé®ï¼ä¸ä¸ªæ¾ç¤ºå¨ï¼å 个æ´â¦â¦å½ç¶ï¼ç»æå°±æ¯ ââ 徿£çåå¡ï¼:)
使¯å¨å é¨â¦â¦ï¼ä¸å¼ æèªç»´ä¿®æåçå¾çï¼
æé常å¤çç»èã使们å¯ä»¥å¨å®å ¨ä¸äºè§£è¿äºå é¨ç»èçæ åµä¸ä½¿ç¨å®ã
å塿ºé常å¯é ï¼ä¸æ¯åï¼ä¸å°å塿ºæä»¬å¯ä»¥ä½¿ç¨å¥½å å¹´ï¼åªæå¨åºç°é®é¢æ¶ ââ æå®éå»ç»´ä¿®ã
å塿ºçå¯é æ§åç®æ´æ§çç§è¯ ââ ææç»èé½ç»è¿ç²¾å¿æ ¡å¹¶ éè å¨å é¨ã
妿æä»¬ä»å塿ºä¸åä¸ä¿æ¤ç½©ï¼é£ä¹ä½¿ç¨å®å°åå¾å¤æå¾å¤ï¼è¦æåªéï¼ï¼ï¼å¹¶ä¸å¾å±é©ï¼ä¼è§¦çµï¼ã
æ£å¦æä»¬æçå°çï¼å¨ç¼ç¨ä¸ï¼å¯¹è±¡å°±åå塿ºã
使¯ä¸ºäºéèå é¨ç»èï¼æä»¬ä¸ä¼ä½¿ç¨ä¿æ¤ç½©ï¼èæ¯ä½¿ç¨è¯è¨å约å®ä¸çç¹æ®è¯æ³ã
å 鍿¥å£åå¤é¨æ¥å£
å¨é¢å对象çç¼ç¨ä¸ï¼å±æ§åæ¹æ³å为两ç»ï¼
- å 鍿¥å£ ââ å¯ä»¥éè¿è¯¥ç±»çå ¶ä»æ¹æ³è®¿é®ï¼ä½ä¸è½ä»å¤é¨è®¿é®çæ¹æ³å屿§ã
- å¤é¨æ¥å£ ââ ä¹å¯ä»¥ä»ç±»çå¤é¨è®¿é®çæ¹æ³å屿§ã
妿æä»¬ç»§ç»ç¨å塿ºè¿è¡ç±»æ¯ ââ å é¨éèçå 容ï¼é ç管ï¼å çå ä»¶ç ââ æ¯å塿ºçå 鍿¥å£ã
å 鍿¥å£ç¨äºå¯¹è±¡å·¥ä½ï¼å®çç»èç¸äºä½¿ç¨ãä¾å¦ï¼é çç®¡è¿æ¥å°å çå ä»¶ã
使¯ä»å¤é¢çï¼ä¸å°å塿ºè¢«ä¿æ¤å£³ç½©ä½äºï¼æä»¥æ²¡æäººå¯ä»¥æ¥è§¦å°å ¶å 鍿¥å£ãç»èä¿¡æ¯è¢«éèèµ·æ¥å¹¶ä¸æ æ³è®¿é®ãæä»¬å¯ä»¥éè¿å¤é¨æ¥å£ä½¿ç¨å®çåè½ã
æä»¥ï¼æä»¬éè¦ä½¿ç¨ä¸ä¸ªå¯¹è±¡æ¶åªéç¥éå®çå¤é¨æ¥å£ãæä»¬å¯è½å®å ¨ä¸ç¥éå®çå 鍿¯å¦ä½å·¥ä½çï¼è¿å¤ªå¥½äºã
è¿æ¯ä¸ªæ¦æ¬æ§çä»ç»ã
å¨ JavaScript ä¸ï¼æä¸¤ç§ç±»åçå¯¹è±¡åæ®µï¼å±æ§åæ¹æ³ï¼ï¼
- å ¬å ±çï¼å¯ä»ä»»ä½å°æ¹è®¿é®ãå®ä»¬ææäºå¤é¨æ¥å£ãå°ç®å为æ¢ï¼æä»¬åªä½¿ç¨äºå ¬å ±ç屿§åæ¹æ³ã
- ç§æçï¼åªè½ä»ç±»çå é¨è®¿é®ãè¿äºç¨äºå 鍿¥å£ã
å¨è®¸å¤å ¶ä»ç¼ç¨è¯è¨ä¸ï¼è¿åå¨âåä¿æ¤âçåæ®µï¼åªè½ä»ç±»çå é¨ååºäºå ¶æ©å±çç±»çå é¨è®¿é®ï¼ä¾å¦ç§æçï¼ä½å¯ä»¥ä»ç»§æ¿çç±»è¿è¡è®¿é®ï¼ãå®ä»¬å¯¹äºå 鍿¥å£ä¹å¾æç¨ãä»æç§æä¹ä¸è®²ï¼å®ä»¬æ¯ç§æç屿§åæ¹æ³æ´ä¸ºå¹¿æ³ï¼å 为æä»¬éå¸¸å¸æç»§æ¿ç±»æ¥è®¿é®å®ä»¬ã
åä¿æ¤çåæ®µä¸æ¯å¨è¯è¨çº§å«ç JavaScript ä¸å®ç°çï¼ä½å®é ä¸å®ä»¬é常æ¹ä¾¿ï¼å 为å®ä»¬æ¯å¨ JavaScript 䏿¨¡æçç±»å®ä¹è¯æ³ã
ç°å¨ï¼æä»¬å°ä½¿ç¨ææè¿äºç±»åç屿§å¨ JavaScript ä¸å¶ä½å塿ºãå塿ºæå¾å¤ç»èï¼æä»¬ä¸ä¼å¯¹å®ä»¬è¿è¡å ¨é¢æ¨¡æä»¥ä¿æç®æ´ï¼å°½ç®¡æä»¬å¯ä»¥ï¼ã
åä¿æ¤ç âwaterAmountâ
é¦å ï¼è®©æä»¬åä¸ä¸ªç®åçå塿ºç±»ï¼
class CoffeeMachine {
waterAmount = 0; // å
é¨çæ°´é
constructor(power) {
this.power = power;
alert( `Created a coffee-machine, power: ${power}` );
}
}
// å建å塿º
let coffeeMachine = new CoffeeMachine(100);
// å æ°´
coffeeMachine.waterAmount = 200;
ç°å¨ï¼å±æ§ waterAmount å power æ¯å
Œ
±çãæä»¬å¯ä»¥è½»æ¾å°ä»å¤é¨å°å®ä»¬ get/set æä»»ä½å¼ã
让æä»¬å° waterAmount 屿§æ´æ¹ä¸ºåä¿æ¤ç屿§ï¼ä»¥å¯¹å
¶è¿è¡æ´å¤æ§å¶ãä¾å¦ï¼æä»¬ä¸å¸æä»»ä½äººå°å®çå¼è®¾ç½®ä¸ºå°äºé¶çæ°ã
åä¿æ¤ç屿§é常以ä¸å线 _ ä½ä¸ºåç¼ã
è¿ä¸æ¯å¨è¯è¨çº§å«å¼ºå¶å®æ½çï¼ä½æ¯ç¨åºåä¹é´æä¸ä¸ªä¼æå¨ç¥ç约å®ï¼å³ä¸åºè¯¥ä»å¤é¨è®¿é®æ¤ç±»åç屿§åæ¹æ³ã
æä»¥æä»¬ç屿§å°è¢«å½å为 _waterAmountï¼
class CoffeeMachine {
_waterAmount = 0;
set waterAmount(value) {
if (value < 0) {
value = 0;
}
this._waterAmount = value;
}
get waterAmount() {
return this._waterAmount;
}
constructor(power) {
this._power = power;
}
}
// å建å塿º
let coffeeMachine = new CoffeeMachine(100);
// å æ°´
coffeeMachine.waterAmount = -10; // _waterAmount å°å为 0ï¼è䏿¯ -10
ç°å¨è®¿é®å·²åå°æ§å¶ï¼å æ¤å°æ°´éçå¼è®¾ç½®ä¸ºå°äºé¶çæ°åå¾ä¸å¯è½ã
åªè¯»ç âpowerâ
å¯¹äº power 屿§ï¼è®©æä»¬å°å®è®¾ä¸ºåªè¯»ãææ¶åä¸ä¸ªå±æ§å¿
é¡»åªè½è¢«å¨å建æ¶è¿è¡è®¾ç½®ï¼ä¹åä¸å被修æ¹ã
å塿ºå°±æ¯è¿ç§æ åµï¼åçæ°¸è¿ä¸ä¼æ¹åã
è¦åå°è¿ä¸ç¹ï¼æä»¬åªéè¦è®¾ç½® getterï¼èä¸è®¾ç½® setterï¼
class CoffeeMachine {
// ...
constructor(power) {
this._power = power;
}
get power() {
return this._power;
}
}
// å建å塿º
let coffeeMachine = new CoffeeMachine(100);
alert(`Power is: ${coffeeMachine.power}W`); // åçæ¯ï¼100W
coffeeMachine.power = 25; // Errorï¼æ²¡æ setterï¼
è¿éæä»¬ä½¿ç¨äº getter/setter è¯æ³ã
ä½å¤§å¤æ°æ¶åé¦é get.../set... 彿°ï¼åè¿æ ·ï¼
class CoffeeMachine {
_waterAmount = 0;
setWaterAmount(value) {
if (value < 0) value = 0;
this._waterAmount = value;
}
getWaterAmount() {
return this._waterAmount;
}
}
new CoffeeMachine().setWaterAmount(100);
è¿çèµ·æ¥æç¹é¿ï¼ä½å½æ°æ´çµæ´»ãå®ä»¬å¯ä»¥æ¥åå¤ä¸ªåæ°ï¼å³ä½¿æä»¬ç°å¨è¿ä¸éè¦ï¼ã
å¦ä¸æ¹é¢ï¼get/set è¯æ³æ´çï¼æä»¥æç»æ²¡æä¸¥æ ¼çè§å®ï¼èæ¯ç±ä½ èªå·±æ¥å³å®ã
妿æä»¬ç»§æ¿ class MegaMachine extends CoffeeMachineï¼é£ä¹ä»ä¹é½æ æ³é»æ¢æä»¬ä»æ°çç±»ä¸çæ¹æ³è®¿é® this._waterAmount æ this._powerã
æä»¥åä¿æ¤çåæ®µæ¯èªç¶å¯è¢«ç»§æ¿çã䏿们æ¥ä¸æ¥å°çå°çç§æåæ®µä¸åã
ç§æç â#waterLimitâ
è¿å¿æä¸ä¸ªé©¬ä¸å°±ä¼è¢«å å°è§èä¸ç已宿ç JavaScript ææ¡ï¼å®ä¸ºç§æå±æ§åæ¹æ³æä¾è¯è¨çº§æ¯æã
ç§æå±æ§åæ¹æ³åºè¯¥ä»¥ # å¼å¤´ãå®ä»¬åªå¨ç±»çå
é¨å¯è¢«è®¿é®ã
ä¾å¦ï¼è¿å¿æä¸ä¸ªç§æå±æ§ #waterLimit åæ£æ¥æ°´éçç§ææ¹æ³ #fixWaterAmountï¼
class CoffeeMachine {
#waterLimit = 200;
#fixWaterAmount(value) {
if (value < 0) return 0;
if (value > this.#waterLimit) return this.#waterLimit;
}
setWaterAmount(value) {
this.#waterLimit = this.#fixWaterAmount(value);
}
}
let coffeeMachine = new CoffeeMachine();
// ä¸è½ä»ç±»çå¤é¨è®¿é®ç±»çç§æå±æ§åæ¹æ³
coffeeMachine.#fixWaterAmount(123); // Error
coffeeMachine.#waterLimit = 1000; // Error
å¨è¯è¨çº§å«ï¼# æ¯è¯¥åæ®µä¸ºç§æçç¹æ®æ å¿ãæä»¬æ æ³ä»å¤é¨æä»ç»§æ¿çç±»ä¸è®¿é®å®ã
ç§æåæ®µä¸å
Œ
±å段ä¸ä¼åçå²çªãæä»¬å¯ä»¥åæ¶æ¥æç§æç #waterAmount åå
Œ
±ç waterAmount åæ®µã
ä¾å¦ï¼è®©æä»¬ä½¿ waterAmount æä¸º #waterAmount çä¸ä¸ªè®¿é®å¨ï¼
class CoffeeMachine {
#waterAmount = 0;
get waterAmount() {
return this.#waterAmount;
}
set waterAmount(value) {
if (value < 0) value = 0;
this.#waterAmount = value;
}
}
let machine = new CoffeeMachine();
machine.waterAmount = 100;
alert(machine.#waterAmount); // Error
ä¸åä¿æ¤çåæ®µä¸åï¼ç§æå段ç±è¯è¨æ¬èº«å¼ºå¶æ§è¡ãè¿æ¯å¥½äºå¿ã
使¯å¦ææä»¬ç»§æ¿èª CoffeeMachineï¼é£ä¹æä»¬å°æ æ³ç´æ¥è®¿é® #waterAmountãæä»¬éè¦ä¾é waterAmount getter/setterï¼
class MegaCoffeeMachine extends CoffeeMachine {
method() {
alert( this.#waterAmount ); // Error: can only access from CoffeeMachine
}
}
å¨è®¸å¤æ
åµä¸ï¼è¿ç§éå¶å¤ªä¸¥éäºã妿æä»¬æ©å± CoffeeMachineï¼åå¯è½ææ£å½çç±è®¿é®å
¶å
é¨ãè¿å°±æ¯ä¸ºä»ä¹å¤§å¤æ°æ¶åé½ä¼ä½¿ç¨åä¿æ¤å段ï¼å³ä½¿å®ä»¬ä¸åè¯è¨è¯æ³çæ¯æã
ç§æåæ®µå¾ç¹å«ã
æ£å¦æä»¬æç¥éçï¼é常æä»¬å¯ä»¥ä½¿ç¨ this[name] 访é®å段ï¼
class User {
...
sayHi() {
let fieldName = "name";
alert(`Hello, ${this[fieldName]}`);
}
}
对äºç§æå段æ¥è¯´ï¼è¿æ¯ä¸å¯è½çï¼this['#name'] ä¸èµ·ä½ç¨ãè¿æ¯ç¡®ä¿ç§ææ§çè¯æ³éå¶ã
æ»ç»
å°±é¢å对象ç¼ç¨ï¼OOPï¼èè¨ï¼å 鍿¥å£ä¸å¤é¨æ¥å£çåå被称为 å°è£ ã
å®å ·æä»¥ä¸ä¼ç¹ï¼
- ä¿æ¤ç¨æ·ï¼ä½¿ä»ä»¬ä¸ä¼è¯¯ä¼¤èªå·±
-
æ³è±¡ä¸ä¸ï¼æä¸ç¾¤å¼å人åå¨ä½¿ç¨ä¸ä¸ªå塿ºãè¿ä¸ªå塿ºæ¯ç±âæå¥½çå塿ºâå ¬å¸å¶é çï¼å·¥ä½æ£å¸¸ï¼ä½æ¯ä¿æ¤ç½©è¢«æ¿æäºãå æ¤å 鍿¥å£æ´é²äºåºæ¥ã
ææçå¼å人å齿¯ææç ââ ä»ä»¬æç §é¢æä½¿ç¨å塿ºãä½å ¶ä¸çä¸ä¸ªäººï¼çº¦ç¿°ï¼ä»è®¤ä¸ºèªå·±æ¯æèªæç人ï¼å¹¶å¯¹å塿ºçå é¨åäºä¸äºè°æ´ãç¶èï¼å塿ºä¸¤å¤©åå°±åäºã
è¿è¯å®ä¸æ¯çº¦ç¿°çéï¼èæ¯é£ä¸ªåä¸ä¿æ¤ç½©å¹¶è®©çº¦ç¿°è¿è¡æä½ç人çéã
ç¼ç¨ä¹ä¸æ ·ã妿ä¸ä¸ª class ç使ç¨è æ³è¦æ¹åé£äºæ¬ä¸æç®è¢«ä»å¤é¨æ´æ¹çä¸è¥¿ ââ åææ¯ä¸å¯é¢æµçã
- 坿¯ææ§
-
ç¼ç¨çæ 嵿¯ç°å®çæ´»ä¸çå塿ºè¦å¤æå¾å¤ï¼å 为æä»¬ä¸åªæ¯è´ä¹°ä¸æ¬¡ãæä»¬è¿éè¦ä¸æå¼ååæ¹è¿ä»£ç ã
妿æä»¬ä¸¥æ ¼çå®å 鍿¥å£ï¼é£ä¹è¿ä¸ª class çå¼å人åå¯ä»¥èªç±å°æ´æ¹å ¶å é¨å±æ§åæ¹æ³ï¼çè³æ ééç¥ç¨æ·ã
å¦æä½ æ¯è¿æ ·ç class çå¼åè ï¼é£ä¹ä½ ä¼å¾é«å ´ç¥éå¯ä»¥å®å ¨å°éå½åç§æåéï¼å¯ä»¥æ´æ¹çè³å é¤å ¶åæ°ï¼å 为没æå¤é¨ä»£ç ä¾èµäºå®ä»¬ã
对äºç¨æ·æ¥è¯´ï¼å½æ°çæ¬é®ä¸æ¶ï¼åºç¨çå é¨å¯è½è¢«è¿è¡äºå ¨é¢æ£ä¿®ï¼ä½å¦æå¤é¨æ¥å£ç¸åï¼åä»ç¶å¾å®¹æå级ã
- éè夿æ§
-
äººä»¬åæ¬¢ä½¿ç¨ç®åçä¸è¥¿ãè³å°ä»å¤é¨æ¥çæ¯è¿æ ·ãå é¨çä¸è¥¿åæ¯å¦å¤ä¸åäºäºã
ç¨åºåä¹ä¸ä¾å¤ã
å½å®æ½ç»è被éèï¼å¹¶æä¾äºç®å䏿æ®å¯æ¥çå¤é¨æ¥å£æ¶ï¼æ»æ¯å¾æ¹ä¾¿çã
为äºéèå 鍿¥å£ï¼æä»¬ä½¿ç¨åä¿æ¤çæç§æç屿§ï¼
- åä¿æ¤çåæ®µä»¥
_å¼å¤´ãè¿æ¯ä¸ä¸ªä¼æå¨ç¥ç约å®ï¼ä¸æ¯å¨è¯è¨çº§å«å¼ºå¶æ§è¡çãç¨åºååºè¯¥åªéè¿å®çç±»åä»å®ç»§æ¿çç±»ä¸è®¿é®ä»¥_å¼å¤´çåæ®µã - ç§æåæ®µä»¥
#å¼å¤´ãJavaScript ç¡®ä¿æä»¬åªè½ä»ç±»çå é¨è®¿é®å®ä»¬ã
ç®åï¼å个æµè§å¨å¯¹ç§æåæ®µçæ¯æä¸æ¯å¾å¥½ï¼ä½å¯ä»¥ç¨ polyfill è§£å³ã
è¯è®º
<code>æ ç¾æå ¥åªæå 个è¯ç代ç ï¼æå ¥å¤è¡ä»£ç å¯ä»¥ä½¿ç¨<pre>æ ç¾ï¼å¯¹äºè¶ è¿ 10 è¡ç代ç ï¼å»ºè®®ä½ ä½¿ç¨æ²ç®±ï¼plnkrï¼JSBinï¼codepenâ¦ï¼