這次帶給大家JavaScript的var與this，{}與function，使用JavaScript的var與this，{}與function的注意事項有哪些，以下就是實戰案例，一起來看一下。
JavaScript var是用來定義一個變量，this常用來定義或呼叫一個屬性或方法。但是在全域範圍內，this和var定義變數是等價的。
console.log('window:', name); var name = 'stone'; this.name = 'niqiu';
console.log('var:',name);
console.log('this:',this.name);
window物件有name屬性，初始值為空，但第一個console的時候怎麼獲取值了呢。 發現這個window記錄的是上次的值。重新開啟頁面，只執行 console.log('window:', name); 輸出為空。
console.log('window:', name); var name = 'stone';刷新兩次後輸出stone. 所以window物件在刷新的時候並沒有重新建立。 window是的{}物件。沒有建構子，不能new。
在函數內部，var定義的是局部變量，而this定義的是屬性。這兩者沒有覆蓋。但新建立的物件是無法取得到局部變數的。
var Fool = function () { var name = 'stone'; var nikename = 'stoneniqiu'; this.name = 'niqiu'; this.getName = function () {
console.log('var', name);
console.log('this', this.name);
}; this.getNickname = function() { return nikename;
};
};console.log(f.name); //niqiu console.log(f.nikename);//undefined console.log(f.getNickname());//stoneniqiu
但如果使用{}定義對象，內部變數等於全部都是屬性。
var block = {
name: 'stone',
nickname:'stoneniqiu',
getName: function () { // return this.name;//stone
return name; //'windows name'; },
getNickname:function() { return this.nickname;
},
printAllName:function() {
console.log(this.getNickname());
console.log(this.getName());
}
};
console.log(block.name);//stone
console.log(block.getName()); //windows name像window物件一樣，{}建立的物件不能new，因為沒有建構子。
所以如果物件重複使用，比較大，還是用function的形式比較好，分開私有變數和公共屬性或方法，function的內部模組可以用{}的形式。
透過this可取得它們所屬的上下文的方法稱為公共方法。 this到物件的綁定發生在呼叫的時候，這個「超級」延遲綁定使得函數可以對this高度重複使用。
this指的是目前執行的對象，為避免this發生變化。常用一個變數暫存一下this。
var self=this
下面看個例子，物件的參數中定義了回呼方法，但我們傳入Fool自身的一個方法，居然執行了。
var Fool = function (config) { var parmas = {
callback: function() {
console.log('raw callback');
}
};
parmas = $.extend(parmas, config); var name = 'stone'; var nikename = 'stoneniqiu'; this.name = 'niqiu'; this.getName = function () {
console.log('var', name);
console.log('this', this.name);
}; this.getNickname = function () { return nikename;
}; this.doSomething = function () {
parmas.callback();
};
}; var f = new Fool({callback:function() {
$("#bt").click(function() { f.getName()
});
}});
f.doSomething();執行無誤，點選button 觸發getName方法。但如果直接下面這樣寫，就會報錯了，這錯的很符合常理。
var f = new Fool({callback:f.getName()});
再修改下，用匿名函數包起來，也能跑。
var f = new Fool({callback:function() { (function() {
f.getName();
})();
}});
f.doSomething();今天弄清楚，這其實是一個閉包問題，函數內部執行的f.getName()相當於是一個變量，它綁定外部的f，而並不是函數構建那一刻的f，所以在匿名函式建置時不會在意f是否創建了。相當於下面的這個經典問題：
var addhandle=function(node){var ifor(i=0;i<node.length;i++){
node[i].onclick=function(e){
alert(i);
}
}
}如果執行上面的方法，綁定的就是循環結束之後的i。而不是循環那一刻的i。上面循環中的程式碼如果修改成下面這樣。
nodes[i].onclick=function(i){ return function(e){
alert(e)
}
}(i)就是函數建構時的變數i了。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#jQuery、Angular、node中的Promise詳解
以上是JavaScript的var與this，{}與function的詳細內容。更多資訊請關注PHP中文網其他相關文章！
