JavaScript的var與this，{}與function

這次帶給大家JavaScript的var與this，{}與function，使用JavaScript的var與this，{}與function的注意事項有哪些，以下就是實戰案例，一起來看一下。

JavaScript var是用來定義一個變量，this常用來定義或呼叫一個屬性或方法。但是在全域範圍內，this和var定義變數是等價的。

window

 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。

function與{}

在函數內部，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中文網其它相關文章！

推薦閱讀：

JavaScript的事件管理

#jQuery、Angular、node中的Promise詳解

#

以上是JavaScript的var與this，{}與function的詳細內容。更多資訊請關注PHP中文網其他相關文章！