javascript易錯知識點總結

//本文是我學習JavaScript過程當中收集與整理的一些易錯知識點，
//將分別從變量做用域，類型比較，this指向，函數參數，閉包問題及對象拷貝與賦值這6個方面進行由淺入深的介紹和講解，
//其中也涉及了一些ES6的知識點。
var a = 1;
function test(){
var a = 2;
console.log(a) //輸出的值爲:2
}
test()

//上方的函數做用域中聲明並賦值了a 在控制檯下 輸出的結果遵循就近原則 因此爲2
//局部變量 與 全局變量有所區別

var a =1;
function test2(){
console.log(a) //undefine
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 defind
let b = 2;
}
test4()
// 上方的函數 用到es6的新語法 let來聲明變量 b,而let不一樣於var其不存在變量提高功能，因此輸出報錯b is not defind

function test5(){
let a = 1;
{
let b = 2;
}
console.log(a); //1
}
test5()
//上方的函數做用域中用let聲明瞭a爲1，並在塊級做用域中聲明瞭a爲2，由於console並不在函數內的塊級做用域中，因此輸出1。

//2類型比較
var arr = [],
var2 = [1];
console.log(arr === arr2); //false
//以上由於兩個單獨的數組比較，因此console.log爲false

var arr =[];
arr2 = {};
console.log(arr === arr2); //false
//上方兩個相同的數組比較，由於兩個單獨的數組永不相等，因此console爲false。

var arr =[];
arr2 = {};
console.log(typeof(arr)===typeof(arr2)); //ture
//上方利用typeof比較數組和對象，由於typeof獲取NULL、數組、對象的類型都爲object，因此console爲true。

var arr = [];
console.log(arr instanceof Object); // true
console.log(arr instanceof Array); // true
//上方利用instanceof判斷一個變量是否屬於某個對象的實例，由於在JavaScript中數組也是對象的一種，因此兩個console都爲true。

//this指向問題
var obj ={
name:"xiaoming";
getname:function(){
return this.name
}
}
console.log(obj.getname());//xiaoming
//上方對象方法中的this指向對象自己，因此輸出"xiaoming"。

//閉包問題
var elem = document.getElementsByTagName('div'); // 若是頁面上有5個div

for(var i = 0; i < elem.length; i++) {
elem[i].onclick = function () {
alert(i); // 老是5
};
}
//上方是一個很常見閉包問題，點擊任何div彈出的值老是5，由於當你觸發點擊事件的時候i的值早已經是5，能夠用下面方式解決：

var elem = document.getElementsByTagName('div'); // 若是頁面上有5個div

for(var i = 0; i < elem.length; i++) {
(function (w) {
elem[w].onclick = function () {
alert(w); // 依次爲0,1,2,3,4
};
})(i);
}
//在綁定點擊事件外部封裝一個當即執行函數，並將i傳入該函數便可。