闭包与自调用函数

一 闭包的特点

• 函数嵌套函数
• 内部函数可以引用外部函数的参数和变量
• 参数和变量不会被垃圾回收机制收回

所谓的垃圾回收机制是:找出不再使用的变量，然后释放掉其占用的内存，但是这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定的时间间隔周期性的执行.

function aa() {

        a = 1;
    }
    aa();----执行完以后,变量a就不存在了

二 闭包的好处

• 希望一个变量长期驻扎在内存中
• 避免全局变量的污染

var res = (function() {

        var count = 29;
        return function add() {
            count++;
            console.log(count);
        }
    })();
    res(); //30
    res(); //31
    res(); //32
    res(); //33

三 自调用函数

• 自调用函数与闭包一块使用
• 可以封闭变量的作用域

var btns = document.querySelectorAll("input");
for (var i = 0; i < btns.length; i++) {
//方法1
btns[i].index = i;
btns[i].onclick = function() {
console.log(this.index);
}
//方法2
(function(a) {
btns[a].onclick = function() {
alert(a);
}
})(i); //把变量i传到内部的函数中
}

四 创建构造函数和创建对象

• 当有很多的对象时需要创建一个类,即创建构造函数, 例如有很多的小球时

// 构造函数
function Ball(x,y,r,speedX,speedY,color) {
this.r = r || random(20, 40);
this.x = x || random(this.r, canvasWidth - this.r);
this.y = y || random(this.r, canvasHeight - this.r);
this.speedX = speedX || random(1, 5);

        this.speedY = speedY || random(5, 8);
        //console.log(randomColor(1));
        this.color = color || randomColor(2);
        // 绘制
        this.draw = function() {
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
            ctx.fillStyle = this.color;
            ctx.fill();
        }
        // 运动
        this.move = function () {
            this.x += this.speedX;
            this.y += this.speedY;
            if (this.x < this.r || (this.x > canvasWidth - this.r)) {
                this.speedX *= -1;
            }
            if (this.y < this.r || (this.y > canvasHeight - this.r)) {
                this.speedY *= -1;
            }
            this.draw();
        };
    }

• 当只有一个对象时,只需创建一个对象,例如只有一个飞机

        // 飞机对象

        var plane = {
            w: 66,
            h: 82,
            x: canvasWidth / 2 - 33,
            y: canvasHeight - 82,
            draw: function () {
                ctx.drawImage(loadedImgs.plane, 0, 0, this.w, this.h, this.x, this.y, this.w, this.h);
            },
            move: function () {
                canvas.onmousemove = function (e) {
                    var ev = e || window.event;
                    var x = ev.clientX - canvas.offsetLeft;
                    var y = ev.clientY - canvas.offsetTop;
                    plane.x = x - plane.w / 2;
                    plane.y = y - plane.h / 2;
                    plane.draw();
                };
            }
        };