今天在用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中模拟创建块级作用域，即如果使用匿名自执行函数将某些代码包裹起来可以实现块级作用域的效果，减少全局变量的数量，在匿名自执行函数执行结束后变量就会被内存释放掉，从而也会节省了内存。
扫描二维码关注公众号，回复：
3639715 查看本文章
4，匿名函数和匿名自执行函数总结
匿名函数可以简单理解为没有名字的函数，常见的场景一共就有4种。
匿名自执行函数可以简单理解为可以自己执行的匿名函数，实现匿名自执行函数的方式一共有4种。
匿名自执行函数的作用就是用于闭包和创建独立的命名空间两个方面。