今天在用canvas寫一個手勢解鎖的專案中，遇到一個問題，儘管我已經在js中聲明瞭一個全域性函式，但是沒有效果，開啟控制檯後一直報錯如下：

繞了很大一圈，發現我和原始碼就是在函式最後面缺少一個“();”，下面是原始碼，

(function(){

            window.canvasLock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = obj.chooseType;
            
        };

        // js方式動態生成dom
        canvasLock.prototype.initDom = function(){
		var wrap=document.createElement('div');
		var str='<h4 id="title" class="title">繪製解鎖圖案</h4>';
		wrap.setAttribute('style','position:absolute;top:0;left:0;right:0;bottom:0;');
		var canvas=document.createElement('canvas');
		canvas.setAttribute("id","canvas");
		canvas.style.cssText='background-color:#305066;display:inline-block;margin-top:15px;';
		wrap.innerHTML=str;
		wrap.appendChild(canvas);
		var width=this.width||300;
		var height=this.height||300;
        document.body.appendChild(wrap);
        canvas.style.width=width+"px";
        canvas.style.height=height+"px";
	}
	canvasLock.prototype.init=function(){
		this.initDom();
	}
})();
 

這個是我的程式碼：

(function(){

            window.canvasLock = function(obj){
            this.height = obj.height;
            this.width = obj.width;
            this.chooseType = obj.chooseType;
            
        };

        // js方式動態生成dom
        canvasLock.prototype.initDom = function(){
		var wrap=document.createElement('div');
		var str='<h4 id="title" class="title">繪製解鎖圖案</h4>';
		wrap.setAttribute('style','position:absolute;top:0;left:0;right:0;bottom:0;');
		var canvas=document.createElement('canvas');
		canvas.setAttribute("id","canvas");
		canvas.style.cssText='background-color:#305066;display:inline-block;margin-top:15px;';
		wrap.innerHTML=str;
		wrap.appendChild(canvas);
		var width=this.width||300;
		var height=this.height||300;
        document.body.appendChild(wrap);
        canvas.style.width=width+"px";
        canvas.style.height=height+"px";
	}
	canvasLock.prototype.init=function(){
		this.initDom();
	}
})
 

修改後，bug解決，究其原因，是因為我對js匿名函式理解的不夠深入，因為上面那個“();”，正是js匿名函式自動自行的方式，下面來詳細介紹一下js匿名函式及其自動自行的方式：

1.匿名函式的常見場景

js中的匿名函式是一種很常見的函式型別，比較常見的場景:

        <input type="button" value="點選" id="btn">  
    	<script type="text/javascript">
    		//匿名函式的第一種情形
    		var btn=document.querySelector("#btn");
    		btn.onclick=function(){
    			// alert("aaaaa");
    		}
    		//匿名函式的第二種情形
    		setInterval(function(){
    			// alert("bbbbb");
    		}, 1000);
    		//匿名函式的第三種情形
    		var fun=function(){
    			alert("ccccc");
    		}
    		// fun();
    		//匿名函式的第四種情形
    		var obj={
    			name:"dddd",
    			say:function(){
    				alert(this.name);
    			}
    		}
    		obj.say();
    	</script>
 

上面展示的就是常見的匿名函式的使用場景。(注意:querySelector是H5中新增的查詢dom元素的方法)

2.匿名自執行函式

見名思義，匿名自執行函式首先是一個匿名函式，但是這個函式是可以自己自動執行的，不需要藉助其他的元素。

        <input type="button" value="點選" id="btn">  
    	<script type="text/javascript">
    		//1，匿名函式的第一種實現方式
    		(function(data){
    			// alert(data);
    		})("eee");
    		//2.匿名自執行函式的第二種實現方式
    		(function(){
    			// alert("fff");
    		}());
    		//3.匿名自執行函式的第三種實現方式
    		!function(data){
    			// alert(data);
    		}("hhh");
    		//4.匿名自執行函式的第四種實現方式
    		var fun=function(data){
    			alert(data);
    		}("iii");

從上面的程式碼塊中我們可以總結出實現匿名自執行函式的方法一般有四種。

3.匿名自執行函式的作用

1.匿名自執行函式最常見的作用是用於實現閉包的情況中。關於閉包的概念我會在後面的部落格中詳細介紹。這裡簡單說明一下閉包。閉包:閉包是js的一種特性，我們可以通過閉包實現函式內外部的連線，並且可以使得函式的區域性變數始終存在於記憶體中。

2.匿名自執行函式還可以用於在js中模擬建立塊級作用域，即如果使用匿名自執行函式將某些程式碼包裹起來可以實現塊級作用域的效果，減少全域性變數的數量，在匿名自執行函式執行結束後變數就會被記憶體釋放掉，從而也會節省了記憶體。

4，匿名函式和匿名自執行函式總結

匿名函式可以簡單理解為沒有名字的函式，常見的場景一共就有4種。

匿名自執行函式可以簡單理解為可以自己執行的匿名函式，實現匿名自執行函式的方式一共有4種。

匿名自執行函式的作用就是用於閉包和建立獨立的名稱空間兩個方面。