學習javascript基礎知識系列第三節 - ()()用法

總目錄：​​通過一段代碼學習基礎知識系列​​

注意：

為了便于執行和示範，建議使用chrome浏覽器，按F12,然後按Esc（或手動選擇）打開console，在console進行執行和示範。

由于代碼中使用了console.log或dir方法，是以如果在ie中執行，請自行替換為alert或注釋掉。

第三節 - ()()用法

在JS中，有一種特殊的寫法，就是兩個小括号，如下（代碼一）：

(function(){
  console.log("執行");
})();      

這段代碼會在頁面加載的時候直接執行，在控制台輸出“執行”。

這段代碼的等價代碼為（代碼二）：

function Run(){
  console.log("執行");
}
Run();      

就是建立了一個函數，然後執行。代碼一還有另外一種形式（代碼三）：

(function(){
  console.log("執行");
}());      

代碼三和代碼一的差别就在最後一對小括号寫在裡面或者外面，效果是一樣的。

在上一節中，講解了this的用法，而在()()和this同時出現時，如果不了解本質，我們可能還會分不清this的指向，

這裡舉幾個例子說明this在()()中的判斷。

下面這段代碼（代碼四）是在代碼一的基礎上增加了this.blog = "isea533"。

(function(){
  this.blog = "isea533";
  console.log("執行");
})();      

這段代碼執行之後，我們可以在console中輸入blog檢視，結果為“isea533"，

這就說明了this是指向全局的。按照我們上一節的來講，同時看這段代碼的等價代碼二，

我們可以知道這段代碼其實就是作為函數執行的，是以this在這裡就是window對象。

再看一種稍微複雜的情況（代碼五）：

function Five(){
  var blog = "isea533";
  this.blog = "isea";
  (function(){
    console.log(blog);
    console.log(this.blog);
  })();
}      

對這段代碼，有兩種執行方式，一種作為函數執行，一種作為構造函數執行，這兩種情況的結果是不一樣的。

我們先按函數執行Five();

我們可以看到兩個blog都輸出了。我們再看另一種情況：

這裡可以看到blog輸出了，this.blog為undefined，這就說明了在Five對象中的()()方法裡面，this仍然是指向全局的。

第一種情況的時候，應為Five()為函數執行，是以建立了全局變量blog，是以執行的時候能夠輸出Isea，

而第二種情況時，由于是構造函數，是以this.blog="isea"并沒有執行，因而下面執行的時候，是沒有定義的。

我們可以将Five方法按照代碼二的形式進行改造，如下（代碼六）：

function Five(){
  var blog = "isea533";
  this.blog = "isea";
  function run(){
    console.log(blog);
    console.log(this.blog);
  }
  run();
}      

這裡的run也是僅僅作為函數執行的，是以指向的是全局變量。

我們在看一種情況，當函數作為對象的方法執行的時候（代碼七）：

function Five(){
  var blog = "isea533";
  this.blog = "isea";
  this.run = function(){
    console.log(blog);
    console.dir(this);
    console.log(this.blog);
  }
  this.run();
}      

當我們執行var f = new Five();時，輸出結果如下圖：

我在這兒用dir輸出了this的結構，可以看到this指向的目前的對象，blog和this.blog都輸出了，

這裡的blog是局部對象，this.blog是目前對象的一個屬性，是以都會正常輸出。

看到這裡，如果你還夠清醒，我們繼續往下看看兩種簡單的使用方式。

第一種，帶參數的()()，如下代碼（代碼八）：

(function(blog){
  console.log("Hello "+blog);
})("isea533");      

function有一個參數blog,我們在第二個括号 ()("isea533") 傳入了參數。

第二種，帶傳回值的()()，如下代碼（代碼九）：

var result = (function(blog){
  var a = 4,
    b = 6;
  return a+b;
})();      

這段代碼執行後，result = 10;

第二種情況，在稍加複雜後，如下代碼（代碼十）：

var result = (function(blog){
  function Five(){
    var blog = "isea533";
    this.blog = "isea";
    this.run = function(){
      console.log(blog);
      console.log(this.blog);
    }
  }
  return new Five();
})();      

傳回的result為Five對象的執行個體。

上述内容為個人了解，如果有錯誤的地方，希望可以指正。

參考内容：