JavaScript 易錯知識點整理 詳解
前言
本文是我學習JavaScript過程中收集與整理的一些易錯知識點,將分別從變數作用域,類型比較,this指向,函數參數,閉包問題及物件拷貝與賦值這6個面向進行由淺入深的介紹與講解,其中也涉及了一些ES6的知識點。
JavaScript知識點
1.變數作用域
var a = 1; function test() { var a = 2; console.log(a); // 2 } test();
上方的函數作用域中宣告並賦值了a,且在console之上,所以遵循就近原則輸出a等於2。
var a = 1; function test2() { console.log(a); // undefined var a = 2; } test2();
上方的函數作用域中雖然宣告並賦值了a,但位於console之下,a變數被提升,輸出時已宣告但尚未被賦值,所以輸出undefined。
var a = 1; function test3() { console.log(a); // 1 a = 2; } test3();
上方的函數作用域中a被重新賦值,未被重新聲明,且位於console之下,所以輸出全域作用域中的a。
let b = 1; function test4() { console.log(b); // b is not defined let b = 2; } test4();
上方函數作用域中使用了ES6的let重新宣告了變數b,而let不同於var其不存在變數提升的功能,所以輸出錯誤b is not defined。
function test5() { let a = 1; { let a = 2; } console.log(a); // 1 } test5();
上方的函數作用域中用let宣告了a為1,並在區塊級作用域中宣告了a為2,因為console並不在函數內的區塊級作用域中,所以輸出1 。
2.型別比較
var arr = [], arr2 = [1]; console.log(arr === arr2); // false
上方兩個不同的陣列比較,console為false。
var arr = [], arr2 = []; console.log(arr === arr2); // false
上方兩個相同的陣列比較,因為兩個單獨的陣列永遠不相等,所以console為false。
var arr = [], arr2 = {}; console.log(typeof(arr) === typeof(arr2)); // true
上方利用typeof比較數組和對象,因為typeof取得NULL、數組、對象的型別都是object,所以console為true。
var arr = []; console.log(arr instanceof Object); // true console.log(arr instanceof Array); // true
上方利用instanceof判斷一個變數是否屬於某個物件的實例,因為在JavaScript中陣列也是物件的一種,所以兩個console都為true。
3.this指向
var obj = { name: 'xiaoming', getName: function () { return this.name } }; console.log(obj.getName()); // 'xiaoming'
上方物件方法中的this指向物件本身,所以輸出xiaoming。
var obj = { myName: 'xiaoming', getName: function () { return this.myName } }; var nameFn = obj.getName; console.log(nameFn()); // undefined
上方將對像中的方法賦值給了一個變量,此時方法中的this也將不再指向obj對象,從而指向window對象,所以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對像中的方法賦值給了變數nameFn,但是透過apply方法將this指向了obj2對象,所以最終console為xiaohua。
4.函數參數
function test6() { console.log(Array.prototype.slice.call(arguments)); // [1, 2] } test6(1, 2);
上方利用函數中的arguments類別陣列物件取得傳入函數的參數數組,所以輸出數組[1, 2]。
function test7 () { return function () { console.log(Array.prototype.slice.call(arguments)); // 未执行到此,无输出 } } test7(1, 2);
上方同樣利用arguments取得參數,但因test7(1, 2)未執行return中的函數,所以無輸出。若執行test7(1, 2)(3, 4)則會輸出[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數組中插入了3和4,並利用ES6延展操作符(…)將數組展開並傳入test9,所以console為[ 1, 2, 3, 4]。
5.閉包問題
var elem = document.getElementsByTagName('p'); // 如果页面上有5个p for(var i = 0; i < elem.length; i++) { elem[i].onclick = function () { alert(i); // 总是5 }; }
上方是一個很常見閉包問題,點擊任何p彈出的值總是5,因為當你觸發點擊事件的時候i的值早已是5,可以用下面方式解決:
var elem = document.getElementsByTagName('p'); // 如果页面上有5个p for(var i = 0; i < elem.length; i++) { (function (w) { elem[w].onclick = function () { alert(w); // 依次为0,1,2,3,4 }; })(i); }
在綁定點擊事件外部封裝一個立即執行函數,並將i傳入該函數即可。
6.物件拷貝與賦值
var obj = { name: 'xiaoming', age: 23 }; var newObj = obj; newObj.name = 'xiaohua'; console.log(obj.name); // 'xiaohua' console.log(newObj.name); // 'xiaohua'
上方我們將obj物件賦值給了newObj對象,從而改變newObj的name屬性,但是obj物件的name屬性也被竄改,這是因為實際上newObj物件所獲得的只是一個記憶體位址,而不是真正的拷貝,所以obj物件被竄改。
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()方法進行物件的深拷貝可以避免來源物件被竄改的可能。因為Object.assign() 方法可以把任意多個的來源物件本身的可枚舉屬性拷貝給目標對象,然後返回目標對象。
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()方法進行物件的拷貝,Object.create()方法可以建立一個具有指定原型物件和屬性的新物件。
結語
學習JavaScript是一個漫長的過程,不能一蹴而就。希望本文介紹的幾點內容能幫助學習JavaScript的同學更深入的了解並掌握JavaScript的語法,少走彎路。
以上就是JavaScript 易錯知識點整理 詳解的內容,更多相關內容請關注PHP中文網(www.php.cn)!
#

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

如何使用WebSocket和JavaScript實現線上語音辨識系統引言:隨著科技的不斷發展,語音辨識技術已成為了人工智慧領域的重要組成部分。而基於WebSocket和JavaScript實現的線上語音辨識系統,具備了低延遲、即時性和跨平台的特點,成為了廣泛應用的解決方案。本文將介紹如何使用WebSocket和JavaScript來實現線上語音辨識系

WebSocket與JavaScript:實現即時監控系統的關鍵技術引言:隨著互聯網技術的快速發展,即時監控系統在各個領域中得到了廣泛的應用。而實現即時監控的關鍵技術之一就是WebSocket與JavaScript的結合使用。本文將介紹WebSocket與JavaScript在即時監控系統中的應用,並給出程式碼範例,詳細解釋其實作原理。一、WebSocket技

如何利用JavaScript和WebSocket實現即時線上點餐系統介紹:隨著網路的普及和技術的進步,越來越多的餐廳開始提供線上點餐服務。為了實現即時線上點餐系統,我們可以利用JavaScript和WebSocket技術。 WebSocket是一種基於TCP協定的全雙工通訊協議,可實現客戶端與伺服器的即時雙向通訊。在即時線上點餐系統中,當使用者選擇菜餚並下訂單

如何使用WebSocket和JavaScript實現線上預約系統在當今數位化的時代,越來越多的業務和服務都需要提供線上預約功能。而實現一個高效、即時的線上預約系統是至關重要的。本文將介紹如何使用WebSocket和JavaScript來實作一個線上預約系統,並提供具體的程式碼範例。一、什麼是WebSocketWebSocket是一種在單一TCP連線上進行全雙工

JavaScript和WebSocket:打造高效的即時天氣預報系統引言:如今,天氣預報的準確性對於日常生活以及決策制定具有重要意義。隨著技術的發展,我們可以透過即時獲取天氣數據來提供更準確可靠的天氣預報。在本文中,我們將學習如何使用JavaScript和WebSocket技術,來建立一個高效的即時天氣預報系統。本文將透過具體的程式碼範例來展示實現的過程。 We

JavaScript教學:如何取得HTTP狀態碼,需要具體程式碼範例前言:在Web開發中,經常會涉及到與伺服器進行資料互動的場景。在與伺服器進行通訊時,我們經常需要取得傳回的HTTP狀態碼來判斷操作是否成功,並根據不同的狀態碼來進行對應的處理。本篇文章將教你如何使用JavaScript來取得HTTP狀態碼,並提供一些實用的程式碼範例。使用XMLHttpRequest

用法:在JavaScript中,insertBefore()方法用於在DOM樹中插入一個新的節點。這個方法需要兩個參數:要插入的新節點和參考節點(即新節點將要插入的位置的節點)。

JavaScript是一種廣泛應用於Web開發的程式語言,而WebSocket則是一種用於即時通訊的網路協定。結合二者的強大功能,我們可以打造一個高效率的即時影像處理系統。本文將介紹如何利用JavaScript和WebSocket來實作這個系統,並提供具體的程式碼範例。首先,我們需要明確指出即時影像處理系統的需求和目標。假設我們有一個攝影機設備,可以擷取即時的影像數
