JavaScript易錯(cuò)知識(shí)點(diǎn)整理

前言

本文是我學(xué)習(xí)JavaScript過(guò)程中收集與整理的一些易錯(cuò)知識(shí)點(diǎn)而晒,將分別從變量作用域,類(lèi)型比較阅畴,this指向倡怎,函數(shù)參數(shù),閉包問(wèn)題及對(duì)象拷貝與賦值這6個(gè)方面進(jìn)行由淺入深的介紹和講解贱枣,其中也涉及了一些ES6的知識(shí)點(diǎn)监署。

JavaScript知識(shí)點(diǎn)

1.變量作用域

var a = 1;function test() { var a = 2; console.log(a); // 2}

test();

上方的函數(shù)作用域中聲明并賦值了a,且在console之上纽哥,所以遵循就近原則輸出a等于2钠乏。

var a = 1;function test2() { console.log(a); // undefined

var a = 2;

}

test2();

上方的函數(shù)作用域中雖然聲明并賦值了a,但位于console之下春塌,a變量被提升晓避,輸出時(shí)已聲明但尚未被賦值簇捍,所以輸出undefined。

var a = 1;function test3() { console.log(a); // 1

a = 2;

}

test3();

上方的函數(shù)作用域中a被重新賦值俏拱,未被重新聲明暑塑,且位于console之下,所以輸出全局作用域中的a锅必。

let b = 1;function test4() { console.log(b); // b is not defined

let b = 2;

}

test4();

上方函數(shù)作用域中使用了ES6的let重新聲明了變量b事格,而let不同于var其不存在變量提升的功能,所以輸出報(bào)錯(cuò)b is not defined搞隐。

function test5() { let a = 1;

{ let a = 2;

} console.log(a); // 1}

test5();

上方的函數(shù)作用域中用let聲明了a為1驹愚,并在塊級(jí)作用域中聲明了a為2,因?yàn)閏onsole并不在函數(shù)內(nèi)的塊級(jí)作用域中劣纲,所以輸出1逢捺。

2.類(lèi)型比較

var arr = [],

arr2 = [1];console.log(arr === arr2); // false

上方兩個(gè)不同的數(shù)組比較,console為false癞季。

var arr = [],

arr2 = [];console.log(arr === arr2); // false

上方兩個(gè)相同的數(shù)組比較劫瞳,因?yàn)?b>兩個(gè)單獨(dú)的數(shù)組永不相等,所以console為false余佛。

var arr = [],

arr2 = {};console.log(typeof(arr) === typeof(arr2)); // true

上方利用typeof比較數(shù)組和對(duì)象,因?yàn)閠ypeof獲取NULL窍荧、數(shù)組辉巡、對(duì)象的類(lèi)型都為object,所以console為true蕊退。

var arr = [];console.log(arr instanceof Object); // trueconsole.log(arr instanceof Array); // true

上方利用instanceof判斷一個(gè)變量是否屬于某個(gè)對(duì)象的實(shí)例,因?yàn)樵贘avaScript中數(shù)組也是對(duì)象的一種,所以?xún)蓚€(gè)console都為true吩翻。

3.this指向

var obj = {

name: 'xiaoming',

getName: function () { return this.name

}

};console.log(obj.getName()); // 'xiaoming'

上方對(duì)象方法中的this指向?qū)ο蟊旧砗1危暂敵鰔iaoming。

var obj = {

myName: 'xiaoming',

getName: function () { return this.myName

}

};var nameFn = obj.getName;console.log(nameFn()); // undefined

上方將對(duì)象中的方法賦值給了一個(gè)變量输硝,此時(shí)方法中的this也將不再指向obj對(duì)象今瀑,從而指向window對(duì)象,所以console為undefined点把。

var obj = {

myName: 'xiaoming',

getName: function () { return this.myName

}

};var obj2 = {

myName: 'xiaohua'};var nameFn = obj.getName;console.log(nameFn.apply(obj2)); // 'xiaohua'

上方同樣將obj對(duì)象中的方法賦值給了變量nameFn橘荠,但是通過(guò)apply方法將this指向了obj2對(duì)象,所以最終console為xiaohua郎逃。

4.函數(shù)參數(shù)

function test6() { console.log(Array.prototype.slice.call(arguments)); // [1, 2]}

test6(1, 2);

上方利用函數(shù)中的arguments類(lèi)數(shù)組對(duì)象獲取傳入函數(shù)的參數(shù)數(shù)組哥童,所以輸出數(shù)組[1, 2]。

function test7 () { return function () { console.log(Array.prototype.slice.call(arguments)); // 未執(zhí)行到此褒翰,無(wú)輸出

}

}

test7(1, 2);

上方同樣利用arguments獲取參數(shù)贮懈,但因test7(1, 2)未執(zhí)行return中的函數(shù)匀泊,所以無(wú)輸出。若執(zhí)行test7(1, 2)(3, 4)則會(huì)輸出[3, 4]朵你。

var args = [1, 2];function test9() { console.log(Array.prototype.slice.call(arguments)); // [1, 2, 3, 4]}Array.prototype.push.call(args, 3, 4);

test9(...args);

上方利用Array.prototype.push.call()方法向args數(shù)組中插入了3和4各聘,并利用ES6延展操作符(...)將數(shù)組展開(kāi)并傳入test9,所以console為[1, 2, 3, 4]撬呢。

5.閉包問(wèn)題

var elem = document.getElementsByTagName('div'); // 如果頁(yè)面上有5個(gè)divfor(var i = 0; i < elem.length; i++) {

elem[i].onclick = function () {

alert(i); // 總是5

};

}

上方是一個(gè)很常見(jiàn)閉包問(wèn)題伦吠,點(diǎn)擊任何div彈出的值總是5,因?yàn)楫?dāng)你觸發(fā)點(diǎn)擊事件的時(shí)候i的值早已是5魂拦,可以用下面方式解決:

var elem = document.getElementsByTagName('div'); // 如果頁(yè)面上有5個(gè)divfor(var i = 0; i < elem.length; i++) {

(function (w) {

elem[w].onclick = function () {

alert(w); // 依次為0,1,2,3,4

};

})(i);

}

在綁定點(diǎn)擊事件外部封裝一個(gè)立即執(zhí)行函數(shù)毛仪,并將i傳入該函數(shù)即可。

6.對(duì)象拷貝與賦值

var obj = {

name: 'xiaoming',

age: 23};var newObj = obj;

newObj.name = 'xiaohua';console.log(obj.name); // 'xiaohua'console.log(newObj.name); // 'xiaohua'

上方我們將obj對(duì)象賦值給了newObj對(duì)象芯勘,從而改變newObj的name屬性箱靴,但是obj對(duì)象的name屬性也被篡改,這是因?yàn)閷?shí)際上newObj對(duì)象獲得的只是一個(gè)內(nèi)存地址荷愕,而不是真正的拷貝衡怀,所以obj對(duì)象被篡改。

var obj2 = {

name: 'xiaoming',

age: 23};var newObj2 = Object.assign({}, obj2, {color: 'blue'});

newObj2.name = 'xiaohua';console.log(obj2.name); // 'xiaoming'console.log(newObj2.name); // 'xiaohua'console.log(newObj2.color); // 'blue'

上方利用Object.assign()方法進(jìn)行對(duì)象的深拷貝可以避免源對(duì)象被篡改的可能安疗。因?yàn)镺bject.assign() 方法可以把任意多個(gè)的源對(duì)象自身的可枚舉屬性拷貝給目標(biāo)對(duì)象抛杨,然后返回目標(biāo)對(duì)象。

var obj3 = {

name: 'xiaoming',

age: 23};var newObj3 = Object.create(obj3);

newObj3.name = 'xiaohua';console.log(obj3.name); // 'xiaoming'console.log(newObj3.name); // 'xiaohua'

我們也可以使用Object.create()方法進(jìn)行對(duì)象的拷貝荐类,Object.create()方法可以創(chuàng)建一個(gè)具有指定原型對(duì)象和屬性的新對(duì)象怖现。

結(jié)語(yǔ)

學(xué)習(xí)JavaScript是一個(gè)漫長(zhǎng)的過(guò)程,不能一蹴而就玉罐。希望本文介紹的幾點(diǎn)內(nèi)容能夠幫助學(xué)習(xí)JavaScript的同學(xué)更加深入的了解和掌握J(rèn)avaScript的語(yǔ)法屈嗤,少走彎路。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末吊输,一起剝皮案震驚了整個(gè)濱河市饶号,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌季蚂,老刑警劉巖茫船,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異扭屁,居然都是意外死亡透硝,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)疯搅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)濒生,“玉大人,你說(shuō)我怎么就攤上這事幔欧∽镏危” “怎么了丽声?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀(guān)的道長(zhǎng)觉义。 經(jīng)常有香客問(wèn)我雁社,道長(zhǎng),這世上最難降的妖魔是什么晒骇? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任霉撵,我火速辦了婚禮,結(jié)果婚禮上洪囤,老公的妹妹穿的比我還像新娘徒坡。我一直安慰自己,他們只是感情好瘤缩,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布喇完。 她就那樣靜靜地躺著,像睡著了一般剥啤。 火紅的嫁衣襯著肌膚如雪锦溪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,268評(píng)論 1 309
  • 那天府怯,我揣著相機(jī)與錄音刻诊,去河邊找鬼。 笑死牺丙,一個(gè)胖子當(dāng)著我的面吹牛则涯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播赘被,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼是整,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼肖揣!你這毒婦竟也來(lái)了民假?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤龙优,失蹤者是張志新(化名)和其女友劉穎羊异,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體彤断,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡野舶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了宰衙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片平道。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖供炼,靈堂內(nèi)的尸體忽然破棺而出一屋,到底是詐尸還是另有隱情窘疮,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布冀墨,位于F島的核電站闸衫,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏诽嘉。R本人自食惡果不足惜蔚出,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望虫腋。 院中可真熱鬧骄酗,春花似錦、人聲如沸岔乔。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)雏门。三九已至嘿歌,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間茁影,已是汗流浹背宙帝。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留募闲,地道東北人步脓。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像浩螺,于是被迫代替她去往敵國(guó)和親靴患。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容