濡傛灉瀵逛綘鏉ヨJavaScript杩樻槸涓闂ㄥ叏鏂扮殑璇█锛屾垨鑰呬綘鏄湪鏈杩戠殑寮鍙戜腑鎵嶅垰鍒氬瀹冩湁鎵浜嗚В锛岄偅涔堜綘鍙兘浼氭湁浜涜鎸触鎰熴備换浣曠紪绋嬭瑷閮芥湁瀹冭嚜宸辩殑鎬櫀锛坬uirks锛夆斺旂劧鑰岋紝褰撲綘浠庨偅浜涘己绫诲瀷鐨勬湇鍔″櫒绔瑷杞悜JavaScript鐨勬椂鍊 锛屼綘浼氭劅鍒伴潪甯稿洶鎯戙傛垜灏辨槸杩欐牱锛佸綋鎴戝湪鍑犲勾鍓嶅仛鍏ㄨ亴JavaScript寮鍙戠殑鏃跺欙紝鎴戝涔堝笇鏈涘叧浜庤繖闂ㄨ瑷鐨璁稿浜嬫儏鎴戣兘灏芥棭鍦扮煡閬撱傛垜甯屾湜閫氳繃鏈枃涓垎浜殑涓浜涙櫀鑳借浣犲厤浜庨伃鍙楁垜鎵缁忓巻杩囩殑閭d簺澶寸柤鐨勬棩瀛愩傛湰鏂囧苟闈炰竴涓灏界殑鍒楄〃锛屽彧鏄竴浜涘彇鏍凤紝鐩殑鏄姏鐮栧紩鐜夛紝骞朵笖璁╀綘鏄庣櫧褰撲綘涓鏃﹂捐秺浜嗚繖浜涢殰纰嶏紝浣犱細鍙戠幇JavaScript鏄涔堝己澶с

鎴戜滑浼氭妸鐒︾偣鏀惧湪涓嬮潰杩欎簺鎬櫀涓婏細

1.鐩哥瓑

2.鐐瑰彿 vs 鏂规嫭鍙

3.鍑芥暟涓婁笅鏂

4.鍑芥暟澹版槑鍜屽嚱鏁拌〃杈惧紡

5.鍏峰悕鍜屽尶鍚嶅嚱鏁

6.鑷皟鐢ㄥ嚱鏁拌〃杈惧紡

7.typeof vs object.ptototype.toString

1.) 鐩哥瓑

鍥犱负C#鐨勭紭鏁呮垜涔犳儻浜庣敤==杩愮畻绗︽潵鍋氭瘮杈冦傚叿鏈夌浉鍚屽肩殑鍊肩被鍨嬶紙浠ュ強瀛楃涓诧級鏄浉绛夌殑锛屽弽涔嬩笉鐒躲傛寚鍚戠浉鍚屽紩鐢ㄧ殑寮曠敤绫诲瀷鏄浉绛夌殑锛屽弽涔嬩篃涓嶇劧銆傦紙褰撶劧杩欐槸寤虹珛鍦ㄤ綘娌℃湁閲嶈浇==杩愮畻绗︽垨鑰匞etHashCode鏂规硶鐨勫墠鎻愪笅锛夊綋鎴戠煡閬揓avaScript鏈==鍜===涓ょ鐩哥瓑杩愮畻绗︽椂锛屼护鎴戞儕璇т笉宸层傛垜鎵瑙佽繃鐨勫ぇ澶氭暟鎯呭喌閮芥槸浣跨敤==锛屾墍浠ユ垜濡傛硶鐐埗銆傜劧鑰岋紝褰撴垜杩愯涓嬮潰鐨勪唬鐮佹椂JavaScript骞舵病鏈夌粰鎴戞兂褰撶劧鐨勭粨鏋滐細

var x = 1;

if(x == "1") {
    console.log("YAY! They're equal!");
}

鍛冣︹﹁繖鏄粈涔堥粦榄旀硶锛熸暣鍨嬫暟1鎬庝箞浼氬拰瀛楃涓测1鈥濈浉绛夛紵

鍦↗avaScript閲屾湁鐩哥瓑锛坋quality ==锛夊拰鎭掔瓑锛坰trict equality ===锛夈傜浉绛夎繍绠楃浼氬厛浼氬厛鎶婅繍绠楃涓よ竟鐨勮繍绠楀厓寮哄埗杞崲涓哄悓绉嶇被鍨嬶紝鐒跺悗鍐嶈繘琛屾亽绛夋瘮杈冦傛墍浠ヤ笂闈緥瀛愪腑鐨勫瓧绗︿覆鈥1鈥濅細鍏堣杞崲鎴愭暣鏁1锛岀劧鍚庡啀鍜屾垜浠殑鍙橀噺x杩涜姣旇緝銆

鎭掔瓑涓嶄細杩涜寮哄埗绫诲瀷杞崲銆傚鏋滆繍绠楀厓鏄笉鍚岀被鍨嬬殑锛堝氨鍍忔暣鍨嬫暟1鍜屽瓧绗︿覆鈥1鈥濓級閭d箞浠栦滑灏辨槸涓嶇浉绛夌殑锛

var x = 1;

// 瀵逛簬鎭掔瓑锛岄鍏堢被鍨嬪繀椤讳竴鏍
if(x === "1") {
    console.log("Sadly, I'll never write this to the console");
}

if(x === 1) {
    console.log("YES! Strict Equality FTW.")
}

浣犲彲鑳藉凡缁忓紑濮嬩负鍚勭涓嶅彲棰勭煡鐨勫己鍒剁被鍨嬭浆鎹㈡媴蹇т簡锛屽畠浠彲鑳戒細鍦ㄤ綘鐨勫簲鐢ㄤ腑璁╃湡鍋囨贩涔憋紝瀵艰嚧涓浜沚ug锛岃岃繖浜沚ug浣犲緢闅句粠浠g爜涓湅鍑烘潵銆傝繖骞朵笉濂囨紝鍥犳锛岄偅浜涙湁缁忛獙鐨凧avaScript寮鍙戣呭缓璁垜浠绘槸浣跨敤鎭掔瓑杩愮畻绗︺

2.) 鐐瑰彿 vs 鏂规嫭鍙

浣犲彲鑳戒細瀵笿avaScript涓敤璁块棶鏁扮粍鍏冪礌鐨勬柟寮忔潵璁块棶涓涓璞$殑灞炴ц繖绉嶅舰寮忔劅鍒拌寮傦紝褰撶劧锛岃繖鍙栧喅浜庝綘涔嬪墠浣跨敤鐨勫叾浠栬瑷锛

// getting the "firstName" value from the person object:
var name = person.firstName;

// getting the 3rd element in an array:
var theOneWeWant = myArray[2]; // remember, 0-based index

鐒惰 锛屼綘鐭ラ亾鎴戜滑涔熻兘鐢ㄦ柟鎷彿鏉ュ紩鐢ㄥ璞$殑鎴愬憳鍚楋紵渚嬪锛

var name = person["firstName"];

閭h繖鏈変粈涔堢敤鍛紵鍙兘澶ч儴鍒嗘椂闂翠綘杩樻槸浣跨敤鐐瑰彿锛岀劧鑰屾湁浜涗负鏁颁笉澶氱殑鎯呭喌涓嬶紝鏂规嫭鍙风粰鎴戜滑鎻愪緵浜嗕竴浜涚偣鍙锋柟寮忔棤娉曞畬鎴愮殑鎹峰緞銆傛瘮濡傦紝鎴戝彲鑳戒細缁忓父鎶婁竴浜涘ぇ鐨剆witch璇彞閲嶆瀯鎴愪竴涓皟搴﹁〃锛坉ispatch table锛夛紝鍍忎笅闈㈣繖鏍凤細

var doSomething = function(doWhat) {
    switch(doWhat) {
        case "doThisThing":
            // more code...
        break;
        case "doThatThing":
            // more code...
        break;
        case "doThisOtherThing":
            // more code....
        break;
        // additional cases here, etc.
        default:
            // default behavior
        break;
    }
}

瀹冧滑鑳借杞崲鎴愪笅闈㈣繖鏍凤細

var thingsWeCanDo = {
    doThisThing      : function() { /* behavior */ },
    doThatThing      : function() { /* behavior */ },
    doThisOtherThing : function() { /* behavior */ },
    default          : function() { /* behavior */ }
};

var doSomething = function(doWhat) {
    var thingToDo = thingsWeCanDo.hasOwnProperty(doWhat) ? doWhat : "default"
    thingsWeCanDo[thingToDo]();
}

褰撶劧锛屼娇鐢╯witch鏈韩骞舵病鏈変粈涔堥敊锛堝苟涓旓紝鍦ㄥぇ澶氭暟鎯呭喌涓嬶紝濡傛灉浣犲杩唬鍜屾ц兘寰堝湪鎰忕殑璇濓紝switch鍙兘姣旇皟搴﹁〃瑕佸ソ锛夈傜劧鑰岋紝璋冨害琛ㄦ彁渚涗簡涓绉嶆洿濂界殑缁勭粐鍜屾墿灞曟柟寮忥紝骞朵笖鏂规嫭鍙峰厑璁镐綘鍦ㄨ繍琛屾椂鍔ㄦ佸湴寮曠敤灞炴с

3.) 鍑芥暟涓婁笅鏂

宸茬粡鏈夊緢澶氫笉閿欑殑鍗氬閲岃В閲婅繃JavaScript涓殑this鎵浠h〃鐨勪笂涓嬫枃锛堝苟涓旓紝鎴戝湪鏈枃鏈熬涔熸坊鍔犱簡杩欎簺鍗氭枃鐨勯摼鎺ワ級锛岀劧鑰岋紝鎴戣繕鏄槑纭湴鍐冲畾鎶婂畠鍔犲埌鎴戔滃笇鏈涜嚜宸卞敖鏃╃煡閬撶殑浜嬧濈殑娓呭崟閲屻傚湪浠g爜鐨勪换鎰忓湴鏂规槑纭畉his鎵浠h〃鐨勪笢瑗挎槸浠涔堝苟涓嶅洶闅锯斺斾綘鍙渶瑕佽浣忓嚑鏉¤鍒欍傜劧鑰岋紝鎴戜箣鍓嶈杩囩殑閭d簺鍏充簬杩欑偣鐨勮В璇诲彧鑳藉娣绘垜鐨勫洶鎯戯紝鍥犳锛屾垜灏濊瘯鐢ㄤ竴绉嶇畝鍗曠殑鏂瑰紡鏉ヨ〃杩般

绗竴锛屽紑濮嬫椂鍋囪瀹冩槸鍏ㄥ眬鐨

榛樿鎯呭喌涓嬶紝this寮曠敤鐨勬槸鍏ㄥ眬瀵硅薄锛坓lobal object锛夛紝鐩村埌鏈夊師鍥犺鎵ц涓婁笅鏂囧彂鐢熶簡鏀瑰彉銆傚湪娴忚鍣ㄩ噷瀹冩寚鍚戠殑灏辨槸window瀵硅薄锛堟垨鑰呭湪node.js閲屽氨鏄痝lobal锛夈

绗簩锛屾柟娉曞唴閮ㄧ殑this

濡傛灉浣犳湁涓璞′腑鐨勬煇涓垚鍛樻槸涓猣unction锛岄偅涔堝綋浣犱粠杩欎釜瀵硅薄涓婅皟鐢ㄨ繖涓柟娉曠殑鏃跺檛his灏辨寚鍚戜簡杩欎釜鐖跺璞°備緥濡傦細

var marty = {
    firstName: "Marty",
    lastName: "McFly",
    timeTravel: function(year) {
        console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
    }
}

marty.timeTravel(1955);
// Marty McFly is time traveling to 1955

浣犲彲鑳藉凡缁忕煡閬撲綘鍙互閫氳繃鍒涘缓涓涓柊鐨勫璞★紝鏉ュ紩鐢╩arty瀵硅薄涓婄殑timeTravel鏂规硶銆傝繖纭疄鏄疛avaScript涓涓潪甯稿己澶х殑鐗规р斺旇兘璁╂垜浠妸鍑芥暟搴旂敤鍒颁笉姝竴涓洰鏍囧疄渚嬩笂锛

var doc = {
    firstName: "Emmett",
    lastName: "Brown",
}

doc.timeTravel = marty.timeTravel;

閭d箞锛屾垜浠皟鐢╠oc.timeTravel(1885)浼氬彂鐢熶粈涔堜簨鍛紵

doc.timeTravel(1885);
// Emmett Brown is time traveling to 1885

鍛冣︹﹀啀涓娆¤榛戦瓟娉曟繁娣卞湴鍒轰激浜嗐傚叾瀹炰簨瀹炰篃骞堕潪濡傛锛岃繕璁板緱鎴戜滑鍓嶉潰鎻愬埌杩囩殑褰撲綘璋冪敤涓涓柟娉曪紝閭d箞杩欎釜鏂规硶涓殑this灏嗘寚鍚戣皟鐢ㄥ畠鐨勯偅涓埗瀵硅薄銆傛彙绱т綘寰风綏瀹侊紙DeLoreans锛夎窇杞︾殑鏂瑰悜鐩樺惂锛屽洜涓鸿溅瀛愬彉閲嶄簡銆傦紙璇戞敞锛氫綔鑰呯ず渚嬩唬鐮佺殑鍙傝冭儗鏅槸涓閮ㄥ彨銆鍥炲埌鏈潵銆嬬殑鐢靛奖锛孧arty McFly 鏄數褰遍噷鐨勪富瑙掞紝Emmett Brown 鏄妸DeLoreans璺戣溅鏀硅鎴愭椂鍏夋梾琛屾満鐨勫崥澹紝鎵浠arty瀵硅薄鍜宒oc瀵硅薄鍒嗗埆鎸囦唬杩欎袱浜恒傝屾鏃秚his鎸囧悜浜哾oc瀵硅薄锛屽崥澹瘮Marty閲嶏紝鎵浠モ︹︽垜涓瀹氫細鐪嬩竴涓嬭繖閮ㄧ數褰便 锛

褰撴垜浠繚瀛樹簡涓涓猰arty.TimeTravel鏂规硶鐨勫紩鐢ㄥ苟涓旈氳繃杩欎釜寮曠敤璋冪敤杩欎釜鏂规硶鏃跺埌搴曞彂鐢熶簡浠涔堜簨鍛紵鎴戜滑鏉ョ湅涓涓嬶細

var getBackInTime = marty.timeTravel;
getBackInTime(2014);
// undefined undefined is time traveling to 2014

涓轰粈涔堟槸鈥渦ndefined undefined鈥濓紵锛佷负浠涔堜笉鏄淢arty McFly鈥濓紵

璁╂垜浠棶涓涓叧閿殑闂锛氬綋鎴戜滑璋冪敤getBackInTime鍑芥暟鏃讹紝瀹冪殑鐖/鎷ユ湁鑰呭璞℃槸璋佸憿锛熷洜涓篻etBackInTime鍑芥暟鏄瓨鍦ㄤ簬window涓婄殑锛屾垜浠槸鎶婂畠褰撲綔鍑芥暟锛坒unction锛夎皟鐢紝鑰屼笉鏄煇涓璞$殑鏂癸紙method锛夈傚綋鎴戜滑鍍忎笂闈㈣繖鏍风洿鎺ヨ皟鐢ㄤ竴涓病鏈夋嫢鏈夎呭璞$殑鍑芥暟鐨勬椂鍊欙紝this灏嗕細鎸囧悜鍏ㄥ眬瀵硅薄銆侱avid Shariff瀵规鏈変釜寰堝鐨勬弿杩帮細

鏃犺浣曟椂锛屽綋涓涓嚱鏁拌璋冪敤锛屾垜浠繀椤荤湅鏂规嫭鍙锋垨鑰呮槸鍦嗘嫭鍙峰乏杈圭揣閭荤殑浣嶇疆锛屽鏋滄垜浠湅鍒颁竴涓紩鐢紙reference锛夛紝閭d箞浼犲埌function閲岄潰鐨則his鍊煎氨鏄寚鍚戣繖涓柟娉曟墍灞炰簬鐨勯偅涓璞★紝濡傝嫢涓嶇劧锛岄偅瀹冨氨鏄寚鍚戝叏灞瀵硅薄鐨勩

鍥犱负getBackInTime鐨則his鏄寚鍚憌indow鐨勶紝鑰寃indow瀵硅薄閲屽苟娌℃湁firstName鍜宭astName灞炴э紝杩欏氨鏄В閲婁簡涓轰粈涔堟垜浠湅鍒扮殑浼氭槸鈥渦ndefined undefined鈥濄

鍥犳锛屾垜浠氨鐭ラ亾浜嗙洿鎺ヨ皟鐢ㄤ竴涓病鏈夋嫢鏈夎呭璞$殑鍑芥暟鏃剁粨鏋滃氨鏄叾鍐呴儴鐨則his灏嗕細鏄叏灞瀵硅薄銆備絾鏄紝鎴戜篃璇磋繃鎴戜滑鐨刧etBackInTime鍑芥暟鏄瓨鍦ㄤ簬window涓婄殑銆傛垜鏄庝箞鐭ラ亾鐨勫憿锛熼櫎闈炴垜鎶奼etBackInTime鍖呰9鍒板彟涓涓笉鍚岀殑浣滅敤鍩熶腑锛屽惁鍒欐垜澹版槑鐨勪换浣曞彉閲忛兘浼氶檮鍔犲埌window涓娿備笅闈㈠氨鏄粠Chrome鐨勬帶鍒跺彴涓緱鍒扮殑璇佹槑锛

鐜板湪鏄璁哄叧浜巘his璇稿閲嶇偣涔嬩竴鈥斺旂粦瀹氫簨浠跺鐞嗗嚱鏁扳斺旂殑鏈浣虫椂鏈恒

绗笁锛堝叾瀹炲彧鏄浜岀偣鐨勪竴涓墿灞曪級锛屽紓姝ヨ皟鐢ㄧ殑鏂规硶鍐呴儴鐨則his

鎴戜滑鍋囪鍦ㄦ煇涓猙utton琚偣鍑荤殑鏃跺欐垜浠兂璋冪敤marty.timeTravel鏂规硶锛

var flux = document.getElementById("flux-capacitor");
flux.addEventListener("click", marty.timeTravel);

褰撴垜浠偣鍑籦utton鐨勬椂鍊欙紝涓婇潰鐨勪唬鐮佷細杈撳嚭鈥渦ndefined undefined is time traveling to [object MouseEvent]鈥濄備粈涔堬紵锛佸ソ鍚э紝棣栧厛锛屾渶鏄捐屾槗瑙佺殑闂鏄垜浠病鏈夌粰timeTravel鏂规硶鎻愪緵year鍙傛暟銆傚弽鑰屾槸鎶婅繖涓柟娉曠洿鎺ヤ綔涓轰竴涓簨浠跺鐞嗗嚱鏁帮紝骞朵笖锛孧ouseEvent琚綔涓虹涓涓弬鏁颁紶杩涗簡浜嬩欢澶勭悊鍑芥暟涓傝繖涓緢瀹规槗淇锛岀劧鑰岀湡姝g殑闂鏄垜浠張涓娆$湅鍒颁簡鈥渦ndefined undefined鈥濄傚埆澶辨湜锛屼綘宸茬粡鐭ラ亾涓轰粈涔堜細鍙戠敓杩欑鎯呭喌浜嗭紙鍗充娇浣犳病鏈夋剰璇嗗埌杩欎竴鐐癸級銆傝鎴戜滑淇敼涓涓媡imeTravel鍑芥暟锛岃緭鍑簍his鏉ュ府鍔╂垜浠幏寰椾竴浜涚嚎绱細

marty.timeTravel = function(year) {
    console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
    console.log(this);
};

鐜板湪鎴戜滑鍐嶇偣鍑籦utton鐨勬椂鍊欙紝搴旇灏辫兘鍦ㄦ祻瑙堝櫒鎺у埗鍙颁腑鐪嬪埌绫讳技涓嬮潰杩欐牱鐨勮緭鍑猴細

鍦ㄦ柟娉曡璋冪敤鏃剁浜屼釜console.log杈撳嚭浜唗his锛屽畠瀹為檯涓婃槸鎴戜滑缁戝畾鐨刡utton鍏冪礌銆傛劅鍒板鎬箞锛熷氨鍍忎箣鍓嶆垜浠妸marty.timeTravel璧嬪肩粰涓涓猤etBakInTime鐨勫彉閲忓紩鐢ㄤ竴鏍凤紝姝ゆ椂鐨刴arty.timeTravel琚繚瀛樹负鎴戜滑浜嬩欢澶勭悊鍑芥暟鐨勫紩鐢紝骞朵笖琚皟鐢ㄤ簡锛屼絾鏄苟涓嶆槸浠庘滄嫢鏈夎呪漨arty瀵硅薄閭i噷璋冪敤鐨勩傚湪杩欑鎯呭喌涓嬶紝瀹冩槸琚玝utton鍏冪礌瀹炰緥涓殑浜嬩欢瑙﹀彂鎺ュ彛璋冪敤鐨勩

閭d箞锛屾湁娌℃湁鍙兘璁﹖his鏄垜浠兂瑕佺殑涓滆タ鍛紵褰撶劧鍙互锛佽繖绉嶆儏鍐典笅锛岃В鍐虫柟妗堥潪甯哥畝鍗曘傛垜浠彲浠ョ敤涓涓尶鍚嶅嚱鏁颁唬鏇縨arty.timeTravel鏉ュ仛浜嬩欢澶勭悊鍑芥暟锛岀劧鍚庡湪杩欎釜鍖垮悕鍑芥暟閲岃皟鐢╩arty.timeTravel銆傚悓鏃惰繖鏍蜂篃璁╂垜浠湁鏈轰細淇涔嬪墠涓㈠けyear鍙傛暟鐨勯棶棰樸

flux.addEventListener("click", function(e) {
    marty.timeTravel(someYearValue); 
});

鐐瑰嚮button浼氱湅鍒板儚涓嬮潰杩欐牱鐨勮緭鍑猴細

鎴愬姛浜嗭紒浣嗘槸涓轰粈涔堟垚鍔熷憿锛熸濊冧竴涓嬫垜浠槸鎬庝箞璋冪敤timeTravel鏂规硶鐨勩傜涓娆$殑鏃跺欐垜浠槸鎶婅繖涓柟娉曠殑鏈韩鐨勫紩鐢ㄤ綔涓轰簨浠跺鐞嗗嚱鏁帮紝鍥犳瀹冨苟涓嶆槸浠庣埗瀵硅薄marty涓婅皟鐢ㄧ殑銆傜浜屾鐨勬椂鍊欙紝鎴戜滑鐨勫尶鍚嶅嚱鏁颁腑鐨則his鏄寚鍚慴utton鍏冪礌鐨勶紝鐒惰屽綋鎴戜滑璋冪敤marty.timeTravel鏃讹紝鎴戜滑鏄粠鐖跺璞arty涓婅皟鐢ㄧ殑锛屾墍浠ユ鏃惰繖涓柟娉曢噷鐨則his鏄痬arty銆

绗洓锛屾瀯閫犲嚱鏁伴噷鐨則his

褰撲綘鐢ㄦ瀯閫犲嚱鏁板垱寤轰竴涓璞$殑瀹炰緥鏃讹紝閭d箞鏋勯犲嚱鏁伴噷鐨則his灏辨槸浣犳柊寤虹殑杩欎釜瀹炰緥銆備緥濡傦細

var TimeTraveler = function(fName, lName) {
    this.firstName = fName;
    this.lastName = lName;
    // Constructor functions return the
    // newly created object for us unless
    // we specifically return something else
};

var marty = new TimeTraveler("Marty", "McFly");
console.log(marty.firstName + " " + marty.lastName);
// Marty McFly

浣跨敤Call锛孉pply鍜孊ind

浠庝笂闈㈢粰鍑虹殑渚嬪瓙浣犲彲鑳藉凡缁忕寽鍒颁簡锛岄氳繃涓浜涜瑷绾у埆鐨勭壒鎬ф槸鍏佽鎴戜滑鍦ㄨ皟鐢ㄤ竴涓嚱鏁扮殑鏃跺欐寚瀹氬畠鍦ㄨ繍琛屾椂鐨則his鐨勩傝浣犵粰鐚滃浜嗐俢all鍜宎pply鏂规硶瀛樺湪浜嶧unction鐨刾rototype涓紝瀹冧滑鍏佽鎴戜滑鍦ㄨ皟鐢ㄤ竴涓柟娉曠殑鏃跺欎紶鍏ヤ竴涓猼his鐨勫笺

call鏂规硶鐨勭鍚嶄腑鍏堟槸鎸囧畾this鍙傛暟锛屽叾鍚庤窡鐫鐨勬槸鏂规硶璋冪敤鏃惰鐢ㄥ埌鐨勫弬鏁帮紝杩欎簺鍙傛暟鏄悇鑷垎寮鐨勩

someFn.call(this, arg1, arg2, arg3);

apply鐨勭涓涓弬鏁板悓鏍蜂篃鏄痶his鐨勫硷紝鑰屽叾鍚庤窡鐫鐨勬槸璋冪敤杩欎釜鍑芥暟鏃剁殑鍙傛暟鐨勬暟缁勩

someFn.apply(this, [arg1, arg2, arg3]);

鎴戜滑鐨刣oc鍜宮argy瀵硅薄鑷繁鑳借繘琛屾椂鍏夋梾琛岋紙璇戞敞锛氬嵆瀵硅薄涓湁timeTravel鏂规硶锛夛紝鐒惰岀埍鍥犳柉鍧︼紙璇戞敞锛欵instein锛岀數褰变腑鍗氬+鐨勫疇鐗╋紝鏄竴鍙嫍锛夐渶瑕佸埆浜虹殑甯姪鎵嶈兘杩涜鏃跺厜鏃呰锛屾墍浠ョ幇鍦ㄨ鎴戜滑缁欎箣鍓嶇殑doc瀵硅薄锛堝氨鏄箣鍓嶆妸marty.timeTravel璧嬪肩粰doc.timeTravel鐨勯偅涓増鏈級娣诲姞涓涓柟娉曪紝杩欐牱doc瀵硅薄灏辫兘甯姪einstein瀵硅薄杩涜鏃跺厜鏃呰浜嗭細

doc.timeTravelFor = function(instance, year) {
    this.timeTravel.call(instance, year);
    // alternate syntax if you used apply would be
    // this.timeTravel.apply(instance, [year]);
};

鐜板湪鎴戜滑鍙互閫佺埍鍥犳柉鍧︿笂璺簡锛

var einstein = {
    firstName: "Einstein", 
    lastName: "(the dog)"
};
doc.timeTravelFor(einstein, 1985);
// Einstein (the dog) is time traveling to 1985

鎴戠煡閬撹繖涓緥瀛愯浣犳湁浜涘嚭涔庢剰鏂欙紝鐒惰岃繖宸茬粡瓒充互璁╀綘棰嗙暐鍒版妸鍑芥暟鎸囨淳缁欏叾浠栧璞¤皟鐢ㄧ殑寮哄ぇ銆

杩欓噷杩樻湁涓绉嶆垜浠皻鏈帰绱㈢殑鍙兘鎬с傛垜浠粰marty瀵硅薄鍔犱竴涓猤oHome鐨勬柟娉曪紝杩欎釜鏂规硶鏄釜璁﹎arty鍥炲埌鏈潵鐨勬嵎寰勶紝鍥犱负瀹冨叾瀹炴槸璋冪敤浜唗his.timeTravel(1985)锛

marty.goHome = function() {
    this.timeTravel(1985);
}

鎴戜滑宸茬粡鐭ラ亾锛屽鏋滄妸 marty.goHome 浣滀负浜嬩欢澶勭悊鍑芥暟缁戝畾鍒癰utton鐨刢lick浜嬩欢涓婏紝閭d箞this灏辨槸杩欎釜button銆傚苟涓旓紝button瀵硅薄涓婁篃骞舵病鏈塼imeTravel杩欎釜鏂规硶銆傛垜浠彲浠ョ敤涔嬪墠閭g鍖垮悕鍑芥暟鐨勫姙娉曟潵缁戝畾浜嬩欢澶勭悊鍑芥暟锛屽啀鍦ㄥ尶鍚嶅嚱鏁伴噷璋冪敤marty瀵硅薄涓婄殑鏂规硶銆備笉杩囷紝鎴戜滑杩樻湁鍙﹀涓涓姙娉曪紝閭e氨鏄痓ind鍑芥暟锛

flux.addEventListener("click", marty.goHome.bind(marty));

bind鍑芥暟鍏跺疄鏄繑鍥炰竴涓柊鍑芥暟锛岃岃繖涓柊鍑芥暟涓殑this鍊兼鏄敤bind鐨勫弬鏁版潵鎸囧畾鐨勩傚鏋滀綘闇瑕佹敮鎸侀偅浜涙棫鐨勬祻瑙堝櫒锛堟瘮濡侷E9浠ヤ笅鐨勶級浣犲氨闇瑕佺敤涓bind鏂规硶鐨勮ˉ涓锛堟垨鑰咃紝濡傛灉浣犱娇鐢ㄧ殑鏄痡Query锛岄偅涔堜綘鍙互鐢$.proxy;鍙﹀underscore鍜宭odash搴撲腑涔熸彁渚涗簡_.bind锛夈

鏈変竴浠朵簨闇瑕佹敞鎰忥紝濡傛灉浣犲湪涓涓師鍨嬫柟娉曚笂浣跨敤bind锛岄偅瀹冧細鍒涘缓涓涓疄渚嬬骇鍒殑鏂规硶锛岃繖鏍峰氨灞忚斀浜嗗師鍨嬩笂鐨勫悓鍚嶆柟娉曪紝浣犲簲璇ユ剰璇嗗埌杩欏苟涓嶆槸涓敊璇傚叧浜庤繖涓棶棰樼殑鏇村缁嗚妭鎴戝湪杩欑瘒鏂囩珷閲岃繘琛屼簡鎻忚堪銆

4.) 鍑芥暟澹版槑 vs 鍑芥暟琛ㄨ揪寮

鍦↗avaScript涓昏鏈変袱绉嶅畾涔夊嚱鏁扮殑鏂规硶锛堣孍S6浼氬湪杩欓噷浣滀粙缁嶏級锛氬嚱鏁板0鏄庡拰鍑芥暟琛ㄨ揪寮忋

鍑芥暟澹版槑涓嶉渶瑕乿ar鍏抽敭瀛椼備簨瀹炰笂锛屾濡 Angus Croll 鎵璇达細鈥滄妸浠栧綋浣滃彉閲忓0鏄庣殑鍏勫紵鏄緢鏈夊府鍔╃殑鈥濄備緥濡傦細

function timeTravel(year) {
    console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
}

涓婁緥涓悕鍙玹imeTravel鐨勫嚱鏁颁笉浠呬粎鍙湪鍏惰澹版槑鐨勪綔鐢ㄥ煙鍐呭彲瑙侊紝鑰屼笖瀵硅繖涓嚱鏁拌嚜韬唴閮ㄤ篃鏄彲瑙佺殑锛堣繖涓鐐瑰閫掑綊鍑芥暟鐨勮皟鐢ㄥ挨涓烘湁鐢級銆傚嚱鏁板0鏄庡叾瀹炲氨鏄懡鍚嶅嚱鏁帮紝鎹㈠彞璇濊锛屼笂闈㈢殑鍑芥暟鐨刵ame灞炴у氨鏄痶imeTravel銆

鍑芥暟琛ㄨ揪寮忔槸瀹氫箟涓涓嚱鏁板苟鎶婂畠璧嬪肩粰涓涓彉閲忋備竴鑸儏鍐典笅锛屽畠浠湅璧锋潵浼氭槸杩欐牱锛

var someFn = function() {
    console.log("I like to express myself...");
};

鍑芥暟琛ㄨ揪寮忎篃鏄彲浠ヨ鍛藉悕鐨勶紝鍙笉杩囦笉鍍忓嚱鏁板0鏄庨偅鏍凤紝琚懡鍚嶇殑鍑芥暟琛ㄨ揪寮忕殑鍚嶅瓧鍙兘鍦ㄨ鍑芥暟鍐呴儴鐨勪綔鐢ㄥ煙涓闂紙璇戞敞锛氫笂渚嬩腑鐨勪唬鐮侊紝鍏抽敭瀛梖unction鍚庨潰鐩存帴璺熺潃鍦嗘嫭鍙凤紝姝ゆ椂浣犲彲浠ョ敤someFn.name鏉ヨ闂嚱鏁板悕锛屼絾鏄緭鍑哄皢浼氭槸绌哄瓧绗︿覆锛涜屼笅渚嬩腑鐨剆omeFn.name浼氭槸鈥漣HazName鈥濓紝浣嗘槸浣犲嵈涓嶈兘鍦╥HazName杩欎釜鍑芥暟浣撲箣澶栫殑鍦版柟鐢ㄨ繖涓悕瀛楁潵璋冪敤姝ゅ嚱鏁帮級锛

var someFn = function iHazName() {
    console.log("I like to express myself...");
    if(needsMoreExpressing) {
        iHazName(); // the function's name can be used here
    }
};

// you can call someFn() here, but not iHazName()
someFn();

鍑芥暟琛ㄨ揪寮忓拰鍑芥暟澹版槑鐨勮璁鸿繙涓嶆杩欎簺锛岄櫎姝や箣澶栬嚦灏戣繕鏈夋彁鍗囷紙hoisting锛夈傛彁鍗囨槸鎸囧嚱鏁板拰鍙橀噺鐨勫0鏄庤瑙i噴鍣ㄧЩ鍔ㄥ埌鍖呭惈瀹冧滑鐨勪綔鐢ㄥ煙鐨勯《閮ㄣ傝櫧鐒舵垜浠湪杩欓噷娌℃湁缁嗚鎻愬崌锛屼絾鏄姟蹇呰涓涓Ben CherryAngus Croll瀵瑰畠鐨勮В璇汇

5.) 鍏峰悕鍜屽尶鍚嶅嚱鏁

鍩轰簬鎴戜滑鍒氬垰璁ㄨ鐨勶紝浣犺偗瀹氱寽鍒版墍璋撶殑鍖垮悕鍑芥暟灏辨槸娌℃湁鍚嶅瓧鐨勫嚱鏁般傚ぇ澶氭暟JavaScript寮鍙戣呴兘鑳藉緢蹇鍑轰笅渚嬩腑绗簩涓弬鏁版槸涓涓尶鍚嶅嚱鏁帮細

someElement.addEventListener("click", function(e) {
    // I'm anonymous!
});

鑰屼簨瀹炰笂鎴戜滑鐨刴arty.timeTravel鏂规硶涔熸槸鍖垮悕鐨勶細

var marty = {
    firstName: "Marty",
    lastName: "McFly",
    timeTravel: function(year) {
        console.log(this.firstName + " " + this.lastName + " is time traveling to " + year);
    }
}

鍥犱负鍑芥暟澹版槑蹇呴』鏈変釜鍚嶅瓧锛屽彧鏈夊嚱鏁拌〃杈惧紡鎵嶅彲鑳芥槸鍖垮悕鐨勩

6.) 鑷皟鐢ㄥ嚱鏁拌〃杈惧紡

鑷粠鎴戜滑寮濮嬭璁哄嚱鏁拌〃杈句互鏉ワ紝鏈変欢浜嬫垜灏辨兂绔嬮┈鎼炴竻妤氾紝閭e氨鏄嚜璋冪敤鍑芥暟琛ㄨ揪寮忥紙 the Immediately Invoked Function Expression (IIFE)锛夈傛垜浼氬湪鏈枃鐨勭粨灏剧綏鍒楀嚑绡囧IIFE璁茶В寰椾笉閿欑殑鏂囩珷銆備絾绠鑰岃█涔嬶紝瀹冨氨鏄竴涓病鏈夎祴鍊肩粰浠讳綍鍙橀噺鐨勫嚱鏁拌〃杈惧紡锛屽畠骞朵笉绛夊緟绋嶅悗琚皟鐢紝鑰屾槸鍦ㄥ畾涔夌殑鏃跺欏氨绔嬪嵆鎵ц銆備笅闈㈣繖浜涙祻瑙堝櫒鎺у埗鍙扮殑鎴浘鑳藉府鍔╂垜浠悊瑙o細

棣栧厛璁╂垜浠緭鍏ヤ竴涓嚱鏁拌〃杈惧紡锛屼絾鏄笉鎶婂畠璧嬪肩粰浠讳綍鍙橀噺锛岀湅鐪嬩細鍙戠敓浠涔

鏃犳晥鐨凧avaScript璇硶鈥斺斿畠鍏跺疄鏄竴涓己灏戝悕瀛楃殑鍑芥暟澹版槑銆傛兂璁╁畠鍙樻垚涓涓〃杈惧紡锛屾垜浠彧闇鐢ㄤ竴瀵瑰渾鎷彿鎶婂畠鍖呰9璧锋潵锛

褰撴妸瀹冨彉鎴愪竴涓〃杈惧紡鍚庢帶鍒跺彴绔嬪嵆杩斿洖缁欐垜浠繖涓尶鍚嶅嚱鏁帮紙鎴戜滑骞舵病鏈夋妸杩欎釜鍑芥暟璧嬪肩粰鍏朵粬鍙橀噺锛屼絾鏄紝鍥犱负瀹冩槸涓〃杈惧紡锛屾垜浠彧鏄幏鍙栧埌浜嗚〃杈惧紡鐨勫硷級銆傜劧鑰岋紝杩欏彧鏄疄鐜颁簡鈥滆嚜璋冪敤鍑芥暟琛ㄨ揪寮忊濅腑鐨勨滃嚱鏁拌〃杈惧紡鈥濋儴鍒嗐傚浜庘滆嚜璋冪敤鈥濊繖閮ㄥ垎锛屾垜浠槸閫氳繃缁欒繖涓繑鍥炵殑琛ㄨ揪寮忓悗闈㈠姞涓婂彟澶栦竴瀵瑰渾鎷彿鏉ュ疄鐜扮殑锛堝氨鍍忔垜浠皟鐢ㄤ换浣曞叾浠栧嚱鏁颁竴鏍凤級銆

鈥滀絾鏄瓑绛夛紒Jim锛屾垜璁板緱鎴戜互鍓嶅湪鍝湅鍒拌繃鎶婂悗闈㈢殑閭e鍦嗘嫭鍙锋斁杩涜〃杈惧紡鎷彿閲岄潰鐨勬儏鍐点傗濅綘璇村緱瀵癸紝杩欑璇硶瀹屽叏姝g‘锛堝洜涓篋ouglas Crockford 鏇村枩娆㈣繖绉嶈娉曪紝鎵嶈瀹冨彉寰椾紬鎵鍛ㄧ煡锛夛細

杩欎袱绉嶈娉曢兘鏄彲鐢ㄧ殑锛岀劧鑰屾垜寮虹儓寤鸿浣犺涓涓嬪杩欎袱绉嶇敤娉鏈夊彶浠ユ潵鏈濂界殑瑙i噴

OK锛屾垜浠幇鍦ㄥ凡缁忕煡閬撲粈涔堟槸IIFE浜嗭紝閭d负浠涔堣瀹冨緢鏈夌敤鍛紵

瀹冨彲浠ュ府鍔╂垜浠帶鍒朵綔鐢ㄥ煙锛岃繖鏄疛avaScript涓緢閲嶈鐨勪竴閮ㄥ垎锛乵arty瀵硅薄涓寮濮嬫槸琚垱寤哄湪涓涓叏灞浣滅敤鍩熼噷銆傝繖鎰忓懗鐫window瀵硅薄锛堝亣瀹氭垜浠繍琛屽湪娴忚鍣ㄩ噷锛夐噷鏈変釜marty灞炴с傚鏋滄垜浠琂avaScript浠g爜閮界収杩欎釜鍐欐硶锛岄偅涔堝緢蹇叏灞浣滅敤鍩熶笅灏变細琚ぇ閲忕殑鍙橀噺澹版槑缁欏~婊★紝姹℃煋浜唚indow瀵硅薄銆傚嵆浣挎槸鍦ㄦ渶鐞嗘兂鐨勬儏鍐典笅锛岃繖閮芥槸涓嶅ソ鐨勫仛娉曪紝鍥犱负鎶婂緢澶氱粏鑺傛毚闇茬粰浜嗗叏灞浣滅敤鍩燂紝閭d箞锛屽綋浣犲湪澹版槑涓涓璞℃椂瀵瑰畠鍛藉悕锛岃岃繖涓悕瀛楁伆宸у張鍜寃indow瀵硅薄涓婂凡缁忓瓨鍦ㄧ殑涓涓睘鎬у悓鍚嶏紝閭d箞浼氬彂鐢熶粈涔堜簨鍛紵杩欎釜灞炴т細琚鐩栨帀锛佹瘮濡傦紝浣犳墦绠楀缓涓滈樋姊呰帀浜毬峰焹灏斿搱鐗癸紙Amelia Earhart锛夆濈殑绮変笣缃戠珯锛屼綘鍦ㄥ叏灞浣滅敤鍩熶笅澹版槑浜嗕竴涓彨navigator鐨勫彉閲忥紝閭d箞鎴戜滑鏉ョ湅涓涓嬭繖鍓嶅悗鍙戠敓浜嗕簺浠涔堬紙璇戞敞锛氶樋姊呰帀浜毬峰焹灏斿搱鐗规槸涓浣嶄紶濂囩殑缇庡浗濂虫ч琛屽憳锛屼笉骞稿湪1937骞达紝褰撳ス灏濊瘯鍏ㄧ悆棣栨鐜悆椋炶鏃讹紝鍦ㄩ瓒婂お骞虫磱鏈熼棿澶辫釜銆傚綋鏃跺拰濂逛竴璧峰湪椋炴満涓婄殑瀵艰埅鍛橈紙navigator锛夊氨鏄笅闈唬鐮佷腑鐨勮繖浣嶄經鑾卞緱路鍔崡锛團red Noonan锛夛級锛

鍛冣︹

鏄剧劧锛屾薄鏌撳叏灞浣滅敤鍩熸槸绉嶄笉濂界殑鍋氭硶銆侸avaScript浣跨敤鐨勬槸鍑芥暟浣滅敤鍩燂紙鑰屼笉鏄潡浣滅敤鍩燂紝濡傛灉浣犳槸浠嶤#鎴栬匤ava杞繃鏉ョ殑锛岃繖鐐逛竴瀹氳灏忓績锛侊級鎵浠ワ紝闃绘鎴戜滑鐨勪唬鐮佹薄鏌撳叏灞浣滅敤鍩熺殑鍔炴硶灏辨槸鍒涘缓涓涓柊浣滅敤鍩燂紝鎴戜滑鍙互鐢↖IFE鏉ヨ揪鍒拌繖涓洰鐨勶紝鍥犱负瀹冮噷闈㈢殑鍐呭鍙細鍦ㄥ畠鑷繁鐨勫嚱鏁颁綔鐢ㄥ煙閲屻備笅闈㈢殑渚嬪瓙閲岋紝鎴戣鍏堝湪鎺у埗鍙版煡鐪嬩竴涓媤indow.navigator鐨勫硷紝鍐嶇敤涓涓狪IFE鏉ュ寘瑁硅捣鍏蜂綋鐨勮涓哄拰鏁版嵁锛屽苟鎶婁粬璧嬪肩粰amelia銆傝繖涓狪IFE杩斿洖涓涓璞′綔涓烘垜浠殑鈥滃簲鐢ㄧ▼搴忎綔鐢ㄥ煙鈥濄傚湪杩欎釜IIFE閲屾垜澹版槑浜嗕竴涓猲avigator鍙橀噺锛屽畠涓嶄細瑕嗙洊window.navigator鐨勫笺

浣滀负涓鐐归澶栫殑绂忓埄锛屾垜浠笂闈㈠垱寤虹殑IIFE鍏跺疄鏄疛avaScript妯″潡妯″紡锛坢odule pattern锛夌殑涓涓紑绔傚湪鏂囩珷缁撳熬鏈変竴浜涚浉鍏崇殑閾炬帴锛屼互渚夸綘鍙互缁х画鎺㈢储JavaScript鐨勬ā鍧楁ā寮忋

7.) typeof杩愮畻绗﹀拰Object.prototype.toString

缁堟湁涓澶╀綘浼氶亣鍒颁笌姝ょ被浼肩殑鎯呭舰锛岄偅灏辨槸浣犻渶瑕佹娴嬩竴涓嚱鏁颁紶杩涙潵鐨勫兼槸浠涔堢被鍨嬨倀ypeof杩愮畻绗︿技涔庢槸涓嶄簩涔嬮夛紝鐒惰岋紝瀹冨苟涓嶆槸閭d箞鍙潬銆備緥濡傦紝褰撴垜浠涓涓璞★紝涓涓暟缁勶紝涓涓瓧绗︿覆锛屾垨鑰呬竴涓鍒欒〃杈惧紡浣跨敤typeof鏃讹紝浼氬彂鐢熶粈涔堝憿锛

濂藉惂锛岃嚦灏戝畠鑳芥妸瀛楃涓蹭粠瀵硅薄锛屾暟缁勫拰姝e垯琛ㄨ揪寮忎腑鍖哄垎鍑烘潵銆傚垢浜忔垜浠繕鏈夊叾瀹冨姙娉曡兘浠庤繖浜涙娴嬬殑鍊奸噷寰楀埌鏇村鍑嗙‘鐨勪俊鎭傛垜浠彲浠ヤ娇鐢∣bject.prototype.toString鍑芥暟骞朵笖搴旂敤涓婃垜浠箣鍓嶆帉鎻$殑call鏂规硶鐨勭煡璇嗭細

涓轰粈涔堟垜浠浣跨敤Object.prototype涓婄殑toString鏂规硶鍛紵鍥犱负瀹冨彲鑳借绗笁鏂圭殑搴撴垨鑰呮垜浠嚜宸辩殑浠g爜涓殑瀹炰緥鏂规硶缁欓噸杞芥帀銆傝岄氳繃Object.prototype鎴戜滑鍙互寮哄埗浣跨敤鍘熷鐨則oString銆

濡傛灉浣犵煡閬搕ypeof浼氱粰浣犺繑鍥炰粈涔堬紝骞朵笖浣犱篃涓嶉渶瑕佺煡閬撻櫎姝や箣澶栫殑鍏朵粬淇℃伅锛堜緥濡傦紝浣犲彧闇瑕佺煡閬撴煇涓兼槸涓嶆槸瀛楃涓诧級锛岄偅涔堢敤typeof灏卞啀濂戒笉杩囦簡銆傜劧鑰岋紝濡傛灉浣犳兂鍖哄垎鏁扮粍鍜屽璞℃垨鑰呮鍒欒〃杈惧紡鍜屽璞$瓑绛夌殑锛岄偅涔堝氨鐢∣bject.prototype.toString鍚с

鎺ヤ笅鏉ュ幓鍝噷

鎴戜粠鍏朵粬鐨凧avaScript寮鍙戣呯殑鐪熺煡鐏艰閲屽彈鐩婂尓娴咃紝鍥犳锛岃璁块棶涓嬮潰鐨勯摼鎺ュ苟涓旀劅璋竴涓嬩粬浠惂銆

 


鐗瑰埆澹版槑锛姝ゆ枃鐢David鏍规嵁Jim Cowart鐨勮嫳鏂囨枃绔犮Seven JavaScript Quirks I Wish I鈥檇 Known About銆嬭繘琛岀炕璇戯紝鐩殑绾负涓汉瀛︿範鎵鐢ㄣ傚闇杞浇姝よ瘧鏂囷紝闇娉ㄦ槑鑻辨枃鍑哄锛http://developer.telerik.com/featured/seven-javascript-quirks-i-wish-id-known-about/聽浠ュ強浣滆呯浉鍏充俊鎭

鑻辨枃鍘熸枃锛http://developer.telerik.com/featured/seven-javascript-quirks-i-wish-id-known-about/

涓枃璇戞枃锛http://www.codingserf.com/index.php/2014/05/jsquirks/