概念:

沙箱:環境,黑盒,在一個虛擬的環境中模擬真實世界,做實驗,實驗結果和真實世界的結果是一樣,但是不會影響真實世界 首先我們來看一下格式

   function (){
   }();//這種格式的函式叫做自呼叫函式

    //也可以寫做下面這種格式，這樣的寫法比較一體，推薦這種格式,
    //但是注意在外層括號後面不能漏掉分號不然會出現未知錯誤。
    (function(){
    }());

而所謂的沙箱也就是在這個函式中間寫入的程式碼塊，因為被包裹在函式當中，它和外層的變數/函式，不會相互影響，下面我們來看幾個案例：

   var num=100;
   (function
 
 () {
     var num=10;
     console.log(num);//10
   }());


   console.log(num);//100

注意點：作用域，預解析

因為預解析的問題函式的宣告和變數的宣告會被提前看下面一段程式碼

    (function () {
        var str="小白喜歡小黑";
        str=str.substr(2);
        console.log(str);
    }());
    //沙箱
    (function () {
        // console.log(str);//undefined     //裡面和外面的變數互相不會衝突，
 

        var str="小紅喜歡小明";    // 裡面可以訪問外面的變數，但是外面不可以訪問裡面的變數
        str=str.substr(2);
        console.log(str);
    }());

雖然2個函式分別在2個沙箱中並不會相互影響，函式裡面的變數可以訪問函式外的變數，並且也允許同名不會衝突， 但是： 如果是一個同名函式函式內的宣告通過預解析就會造成上面console.log(str);//undefined 的情況

下面來看一段函式的：

var  getTag=10；
function getTag(tagName) {//一個方法，通過類名選擇元素
 

            return document.getElementsByTagName(tagName);
        }
   console.log(getTag);//報錯

讓這個方法呼叫，並且輸出

//需要把重名的2個宣告用沙箱包裹起來  這樣既能獲取到全域性的變數，也能獲取的作用域內的的方法拿到頁面中的元素

var  getTag=10；
(function () {
        function getTag(tagName) {
            return document.getElementsByTagName(tagName);
        }
    }());
    console.log(getTag);//10