常è§ç {...} è¯æ³å
许å建ä¸ä¸ªå¯¹è±¡ã使¯æä»¬ç»å¸¸éè¦å建å¾å¤ç±»ä¼¼ç对象ï¼ä¾å¦å¤ä¸ªç¨æ·æèå项çã
è¿å¯ä»¥ä½¿ç¨æé 彿°å "new" æä½ç¬¦æ¥å®ç°ã
æé 彿°
æé 彿°å¨ææ¯ä¸æ¯å¸¸è§å½æ°ãä¸è¿æä¸¤ä¸ªçº¦å®ï¼
- å®ä»¬çå½å以大å忝å¼å¤´ã
- å®ä»¬åªè½ç±
"new"æä½ç¬¦æ¥æ§è¡ã
ä¾å¦ï¼
function User(name) {
this.name = name;
this.isAdmin = false;
}
let user = new User("Jack");
alert(user.name); // Jack
alert(user.isAdmin); // false
å½ä¸ä¸ªå½æ°è¢«ä½¿ç¨ new æä½ç¬¦æ§è¡æ¶ï¼å®æç
§ä»¥ä¸æ¥éª¤ï¼
- ä¸ä¸ªæ°ç空对象被å建并åé
ç»
thisã - 彿°ä½æ§è¡ãé常å®ä¼ä¿®æ¹
thisï¼ä¸ºå ¶æ·»å æ°ç屿§ã - è¿å
thisçå¼ã
æ¢å¥è¯è¯´ï¼new User(...) åçå°±æ¯ç±»ä¼¼çäºæ
ï¼
function User(name) {
// this = {};ï¼éå¼å建ï¼
// æ·»å 屿§å° this
this.name = name;
this.isAdmin = false;
// return this;ï¼éå¼è¿åï¼
}
æä»¥ new User("Jack") çç»æå以䏿ä½çç»æç¸åï¼
let user = {
name: "Jack",
isAdmin: false
};
ç°å¨ï¼å¦ææä»¬æ³å建å
¶ä»ç¨æ·ï¼æä»¬å¯ä»¥è°ç¨ new User("Ann")ï¼new User("Alice") çãæ¯æ¯æ¬¡é½ä½¿ç¨åé¢éå建è¦çå¾å¤ï¼è䏿´æäºé
读ã
è¿æ¯æé å¨ç主è¦ç®ç ââ å®ç°å¯éç¨ç对象å建代ç ã
让æä»¬å强è°ä¸é ââ 仿æ¯ä¸è®²ï¼ä»»ä½å½æ°ï¼é¤äºç®å¤´å½æ°ï¼å®æ²¡æèªå·±ç thisï¼é½å¯ä»¥ç¨ä½æé å¨ãå³å¯ä»¥éè¿ new æ¥è¿è¡ï¼å®ä¼æ§è¡ä¸é¢çç®æ³ãâé¦åæ¯å¤§åâæ¯ä¸ä¸ªå
±åç约å®ï¼ä»¥æç¡®è¡¨ç¤ºä¸ä¸ªå½æ°å°è¢«ä½¿ç¨ new æ¥è¿è¡ã
妿æä»¬æè®¸å¤è¡ç¨äºå建åä¸ªå¤æå¯¹è±¡ç代ç ï¼æä»¬å¯ä»¥å°å®ä»¬å°è£ å¨ä¸ä¸ªç«å³è°ç¨çæé 彿°ä¸ï¼åè¿æ ·ï¼
// å建ä¸ä¸ªå½æ°å¹¶ç«å³ä½¿ç¨ new è°ç¨å®
let user = new function() {
this.name = "John";
this.isAdmin = false;
// â¦â¦ç¨äºç¨æ·å建çå
¶ä»ä»£ç
// ä¹è®¸æ¯å¤æçé»è¾åè¯å¥
// å±é¨åéç
};
è¿ä¸ªæé 彿°ä¸è½è¢«å次è°ç¨ï¼å 为å®ä¸ä¿åå¨ä»»ä½å°æ¹ï¼åªæ¯è¢«å建åè°ç¨ãå æ¤ï¼è¿ä¸ªæå·§æ¨å¨å°è£ æå»ºå个对象ç代ç ï¼èæ éå°æ¥éç¨ã
æé 卿¨¡å¼æµè¯ï¼new.target
æ¬èæ¶åçè¯æ³å 容å¾å°ä½¿ç¨ï¼é¤éä½ æ³äºè§£ææå 容ï¼å¦åä½ å¯ä»¥ç´æ¥è·³è¿è¯¥è¯æ³ã
å¨ä¸ä¸ªå½æ°å
é¨ï¼æä»¬å¯ä»¥ä½¿ç¨ new.target 屿§æ¥æ£æ¥å®æ¯å¦è¢«ä½¿ç¨ new è¿è¡è°ç¨äºã
对äºå¸¸è§è°ç¨ï¼å®ä¸º undefinedï¼å¯¹äºä½¿ç¨ new çè°ç¨ï¼åçäºè¯¥å½æ°ï¼
function User() {
alert(new.target);
}
// ä¸å¸¦ "new"ï¼
User(); // undefined
// 带 "new"ï¼
new User(); // function User { ... }
å®å¯ä»¥è¢«ç¨å¨å½æ°å
é¨ï¼æ¥å¤æè¯¥å½æ°æ¯è¢«éè¿ new è°ç¨çâæé 卿¨¡å¼âï¼è¿æ¯æ²¡è¢«éè¿ new è°ç¨çâå¸¸è§æ¨¡å¼âã
æä»¬ä¹å¯ä»¥è®© new è°ç¨å常è§è°ç¨åç¸åçå·¥ä½ï¼åè¿æ ·ï¼
function User(name) {
if (!new.target) { // å¦æä½ æ²¡æéè¿ new è¿è¡æ
return new User(name); // â¦â¦æä¼ç»ä½ æ·»å new
}
this.name = name;
}
let john = User("John"); // å°è°ç¨éå®åå°æ°ç¨æ·
alert(john.name); // John
è¿ç§æ¹æ³ææ¶è¢«ç¨å¨åºä¸ä»¥ä½¿è¯æ³æ´å çµæ´»ãè¿æ ·äººä»¬å¨è°ç¨å½æ°æ¶ï¼æ 论æ¯å¦ä½¿ç¨äº newï¼ç¨åºé½è½å·¥ä½ã
ä¸è¿ï¼å°å¤é½ä½¿ç¨å®å¹¶ä¸æ¯ä¸ä»¶å¥½äºï¼å 为çç¥äº new 使å¾å¾é¾è§å¯å°ä»£ç 䏿£å¨åçä»ä¹ãèéè¿ new æä»¬é½å¯ä»¥ç¥éè¿å建äºä¸ä¸ªæ°å¯¹è±¡ã
æé å¨ç return
éå¸¸ï¼æé 卿²¡æ return è¯å¥ãå®ä»¬ç任塿¯å°ææå¿
è¦çä¸è¥¿åå
¥ thisï¼å¹¶èªå¨è½¬æ¢ä¸ºç»æã
使¯ï¼å¦æè¿æä¸ä¸ª return è¯å¥ï¼é£ä¹è§åå°±ç®åäºï¼
- 妿
returnè¿åçæ¯ä¸ä¸ªå¯¹è±¡ï¼åè¿åè¿ä¸ªå¯¹è±¡ï¼è䏿¯thisã - 妿
returnè¿åçæ¯ä¸ä¸ªåå§ç±»åï¼å忽ç¥ã
æ¢å¥è¯è¯´ï¼å¸¦æå¯¹è±¡ç return è¿å该对象ï¼å¨ææå
¶ä»æ
åµä¸è¿å thisã
ä¾å¦ï¼è¿é return éè¿è¿åä¸ä¸ªå¯¹è±¡è¦ç thisï¼
function BigUser() {
this.name = "John";
return { name: "Godzilla" }; // <-- è¿åè¿ä¸ªå¯¹è±¡
}
alert( new BigUser().name ); // Godzillaï¼å¾å°äºé£ä¸ªå¯¹è±¡
è¿éæä¸ä¸ª return 为空çä¾åï¼æè
æä»¬å¯ä»¥å¨å®ä¹åæ¾ç½®ä¸ä¸ªåå§ç±»åï¼æ²¡æä»ä¹å½±åï¼ï¼
function SmallUser() {
this.name = "John";
return; // <-- è¿å this
}
alert( new SmallUser().name ); // John
é常æé 卿²¡æ return è¯å¥ãè¿éæä»¬ä¸»è¦ä¸ºäºå®æ´æ§èæåè¿å对象çç¹æ®è¡ä¸ºã
顺便说ä¸ä¸ï¼å¦ææ²¡æåæ°ï¼æä»¬å¯ä»¥çç¥ new åçæ¬å·ï¼
let user = new User; // <-- 没æåæ°
// çåäº
let user = new User();
è¿éçç¥æ¬å·ä¸è¢«è®¤ä¸ºæ¯ä¸ç§â好飿 ¼âï¼ä½æ¯è§èå 许使ç¨è¯¥è¯æ³ã
æé å¨ä¸çæ¹æ³
ä½¿ç¨æé 彿°æ¥å建对象ä¼å¸¦æ¥å¾å¤§ççµæ´»æ§ãæé 彿°å¯è½æä¸äºåæ°ï¼è¿äºåæ°å®ä¹äºå¦ä½æé 对象以åè¦æ¾å ¥ä»ä¹ã
å½ç¶ï¼æä»¬ä¸ä»
å¯ä»¥å°å±æ§æ·»å å° this ä¸ï¼è¿å¯ä»¥æ·»å æ¹æ³ã
ä¾å¦ï¼ä¸é¢ç new User(name) ç¨ç»å®ç name åæ¹æ³ sayHi å建äºä¸ä¸ªå¯¹è±¡ï¼
function User(name) {
this.name = name;
this.sayHi = function() {
alert( "My name is: " + this.name );
};
}
let john = new User("John");
john.sayHi(); // My name is: John
/*
john = {
name: "John",
sayHi: function() { ... }
}
*/
ç±» æ¯ç¨äºåå»ºå¤æå¯¹è±¡çä¸ä¸ªæ´é«çº§çè¯æ³ï¼æä»¬ç¨åä¼è®²å°ã
æ»ç»
- æé 彿°ï¼æç®ç§°æé å¨ï¼å°±æ¯å¸¸è§å½æ°ï¼ä½å¤§å®¶å¯¹äºæé å¨æä¸ªå ±åç约å®ï¼å°±æ¯å ¶å½åé¦åæ¯è¦å¤§åã
- æé 彿°åªè½ä½¿ç¨
newæ¥è°ç¨ãè¿æ ·çè°ç¨æå³çå¨å¼å§æ¶å建äºç©ºçthisï¼å¹¶å¨æåè¿åå¡«å äºå¼çthisã
æä»¬å¯ä»¥ä½¿ç¨æé 彿°æ¥å建å¤ä¸ªç±»ä¼¼ç对象ã
JavaScript 为许å¤å
建ç对象æä¾äºæé 彿°ï¼æ¯å¦æ¥æ Dateãéå Set 以åå
¶ä»æä»¬è®¡åå¦ä¹ çå
容ã
卿¬ç« ä¸ï¼æä»¬åªä»ç»äºå ³äºå¯¹è±¡åæé å¨çåºç¡ç¥è¯ãå®ä»¬å¯¹äºæä»¬å¨ä¸ä¸ç« ä¸ï¼å¦ä¹ æ´å¤å ³äºæ°æ®ç±»åå彿°çç¸å ³ç¥è¯é常éè¦ã
卿们å¦ä¹ äºé£äºä¹åï¼æä»¬å°åå°å¯¹è±¡ï¼å¨ ååï¼ç»§æ¿ å ç±» ç« è䏿·±å ¥ä»ç»å®ä»¬ã
è¯è®º
<code>æ ç¾æå ¥åªæå 个è¯ç代ç ï¼æå ¥å¤è¡ä»£ç å¯ä»¥ä½¿ç¨<pre>æ ç¾ï¼å¯¹äºè¶ è¿ 10 è¡ç代ç ï¼å»ºè®®ä½ ä½¿ç¨æ²ç®±ï¼plnkrï¼JSBinï¼codepenâ¦ï¼