tip:自己收集的一些前端注意事項

1.函式優先

函式宣告和變數宣告都會被提升，但是一個值得注意的細節是函式會首先被提升，然後才是變數

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

會輸出1而不是2，這個程式碼片會被引擎理解如下形式：

function foo(){
    console.log(1);
}
foo();//1
foo=function(){
    console.log(2);
};

注意，var foo儘管出現在function foo()…的宣告之前，但它是重複的宣告（因此被忽略了），因為函式宣告會被提升到普通變數之前。

2.迴圈和閉包

當函式可以記住並訪問所在的詞法作用域時，就產生了閉包，即使函式是在當前詞法作用域之外執行。

for(var i=1;i<=5;i++){
    setTimeout(function timer() {
        console.log(i);
    },i*1000);
}

正常情況下，我們對這段程式碼行為的預期是分別輸出數字1-5，每秒一個，每次一個，但實際上，這段程式碼在執行時會以每秒依次的頻率輸出五次6。
（1）通過立即執行函式IIFE進行修正。

for(var i=1;i<=5;i++){
    (function (j) {
 

        setTimeout(function timer() {
            console.log(j);
        },j*1000);
    })(i);
}

（2）更簡單的方法，使用let生成塊級作用域。

for(let i=1;i<=5;i++){
    setTimeout(function timer() {
        console.log(i);
    },i*1000);
}

3.被忽略的this

如果你把null或者undefined作為this的繫結物件傳入call，apply或者bind，這些值在呼叫時會被忽略，實際應用的是預設繫結規則

function foo(){
    console.log(this.a);
}
var a=2;
foo.call(null);//2

一種非常常見的做法是使用apply（）來展開一個數組，並當作引數傳入一個函式；類似的，bind（）可以對引數進行柯里化。
然而，總是使用null來忽略this繫結可能產生一些副作用，導致一些難以分析和追蹤的bug。更安全的做法是傳入一個空物件。在JavaScript中建立一個空物件最簡單的方法是Object.create(null)。
Object.create(null)和 { }很像，但是並不會建立Object.prototype這個委託，所以它比 { } “更空”

4.隱式丟失

一個最常見的this繫結問題就是被隱式繫結的函式會丟失繫結物件，從而把this繫結到全域性物件或者undefined上，取決去是否是嚴格模式。
引數傳遞就是一種隱式賦值，因此傳入函式時會被隱式賦值。

function foo(){
    console.log(this.a)
}
var obj={
    a:2,
    foo:foo
};
var a='oops,global';
setTimeout(obj.foo,1000);//oops,global

JavaScript環境中內建setTimeout（）函式實現和下面的虛擬碼類似，可以看出obj.foo被賦值給了fn，所以foo中的this被繫結到了全域性物件上。

function setTimeout(fn,delay){
    //等待delay毫秒
    fn();
}

5.物件屬性存在性

var obj={
    a:undefined
}

物件屬性訪問返回值可能是undefined，但是這個值有可能是屬性中儲存的undefined，也可能是因為屬性不存在而返回undefined

"a" in obj;//true
obj.hasOwnProperty("a");//true

但是有的物件可能沒有連線到Object.prototype(比如通過Object.create(null)來建立的)，這種情況下形如obj.hasOwnProperty()就會失敗，這時可以使用一種更加強硬的方法來進行判斷。

Object.prototype.hasOwnProperty.call(obj,"a");

6.計時器

由於歷史原因，setTimeout()和setInterval()的第一個引數可以作為字串傳入。如果這麼做，那麼這個字串就會在指定的間隔之後進行求值(相當於執行eval())

setTimeout('console.log(123)',1000)

7.值和型別

JavaScript中的變數是沒有型別的，只有值才有，變數可以隨時持有任何型別的值，即一個變數可以現在被賦值為字串型別值，隨後又被賦值為數字型別值。
在對變數執行typeof操作時，得到的結果並不是該變數的型別，而是該變數持有的值的型別，因為JavaScript中的變數沒有型別。
已在作用域中宣告但還沒賦值的變數是undefined。相反，還沒有在作用域中宣告過的變數是undeclared，讓人抓狂的是typeof處理undeclared變數的方式同樣返回“undefined”

var a;
typeof a;//undefined
typeof b;//undefined

8.陣列的鍵值

陣列通過數字進行索引，但有趣的是它們也是物件，所以也可以包含字串鍵值和屬性(但是，這些並不計算在陣列長度內！！！)

var a=[]
a[0]=1
a['foo']=2
a.length    //1

這裡有個問題需要特別注意，如果字串鍵值能夠被強制型別轉換為十進位制數字的話，它就會被當作數字索引來處理。

var a=[]
a['3']=3
a.length    //4

9.頁面擁有ID的元素會建立全域性變數

在一張HTML頁面中，所有設定了ID屬性的元素會在JavaScript的執行環境中建立對應的全域性變數，這意味著document.getElementById像人的闌尾一樣顯得多餘了。但實際專案中最好老老實實該怎麼寫就怎麼寫，畢竟常規程式碼出亂子的機會要小得多。

<div id="sample"></div>
<script type="text/javascript">
        console.log(sample);
</script>

10.if語句的變形

當你需要寫一個if語句的時候，不妨嘗試另一種更簡便的方法，用JavaScript中的邏輯操作符來代替。

var day=(new Date).getDay()===0;
//傳統if語句
if (day) {
    alert('Today is Sunday!');
};
//運用邏輯與代替if
day&&alert('Today is Sunday!');

11.數字的語法

對於 . 運算需要給予特別注意，因為它是一個有效的數字字元，會被優先識別為數字常量的一部分，然後才是物件屬性訪問運算子。

// 無效語法
42.toFixed(3)

// 有效語法
(42).toFixed(3) //"42.000"
0.42.toFixed(3) //"0.420"
42..toFixed(3)  //"42.000"
42 .toFixed(3)

42..toFixed(3)沒有問題，因為第一個.被視為number的一部分，第二個.是屬性訪問運算子

12.獲取當前時間

ES5引入了靜態函式Date.now()來獲取當前時間，Date.now()同樣返回毫秒數

if(!Date.now){
    Date.now = function() {
        return (new Date()).getTime()
    }
}