javascript - 自动执行函数与对象中的闭包

Question

假设我有以下内容:

var foo = (function(){
    var bar = 0;
    return {
       getBar: function(){
           return bar;
       },
       addOne: function(){
           bar++;
       },
       addRandom: function(rand){
           bar += rand;
       }
    }
})();

我有以下内容:

var foo2 = function(){
    var bar = 0;
    this.getBar = function(){
           return bar;
       };
    this.addOne = function(){
           bar++;
       };
    this.addRandom = function(rand){
           bar += rand;
       }
};

执行函数的唯一区别是 new 吗？

alert(foo.getBar()); //0
foo.addOne();
foo.addRandom(32);
alert(foo.getBar()); //33

var foo2_obj = new foo2;
alert(foo2_obj.getBar());//0
foo2_obj.addOne();
foo2_obj.addRandom(32);
alert(foo2_obj.getBar());//33

他们都输出了完全相同的东西。

那么从长远来看有什么不同呢？

有什么是一个人能做到而另一个人不能做到的？

上面的 fiddle 演示:http://jsfiddle.net/maniator/YtBpe/

Answer 1

在第一个中你只能创建一次对象，而在第二个中你可以创建任意数量的对象。 IE。第一个实际上是一个单例。

请注意，闭包不适用于第二个。每次实例化它时，您都在重新创建函数并浪费大量内存。原型(prototype)对象旨在解决这个问题，您可以在函数范围之外创建函数，并且不会创建意外闭包。

function foo2(){
    this._bar = 0;
}

foo2.prototype = {

    constructor: foo2,

    getBar: function(){
        return this._bar;
    },

    addOne: function(){
        this._bar++;
    },

    addRandom:function(rand){
        this._bar += rand;
    }

};

然后:

var a = new foo2, b = new foo2, c = new foo2;

创建三个具有自己的 _bar 但共享相同功能的实例。

jsperf

您可以将所有这些与 PHP 进行“比较”，有些代码甚至无法运行，但原则上是“等效的”:

---

var foo = (function(){
    var bar = 0;
    return {
       getBar: function(){
           return bar;
       },
       addOne: function(){
           bar++;
       },
       addRandom: function(rand){
           bar += rand;
       }
    }
})();

在 PHP 中大致“等同”于此:

$foo = new stdClass;

$foo->bar = 0;

$foo->getBar = function(){
    return $this->bar;
};

$foo->addOne = function(){
    $this->bar++;
}

$foo->addRandom = function($rand){
    $this->bar += $rand;
}

---

var foo2 = function(){
    var bar = 0;
    this.getBar = function(){
        return bar;
    };
    this.addOne = function(){
        bar++;
    };
    this.addRandom = function(rand){
        bar += rand;
    }
};

在 PHP 中大致“等同”于此:

Class foo2 {


    public function __construct(){
    $bar = 0;

        $this->getBar = function(){
            return $bar;
        };
        $this->addOne = function(){
            $bar++;
        };
        $this->addRandom = function($rand){
            $bar += rand;
        };


    }

}

---

function foo2(){
    this._bar = 0;
}

foo2.prototype = {

    constructor: foo2,

    getBar: function(){
        return this._bar;
    },

    addOne: function(){
        this._bar++;
    },

    addRandom:function(rand){
        this._bar += rand;
    }

};

在 PHP 中大致“等同”于此:

Class foo2 {

    public $_bar;

    public function __construct(){
        $this->_bar = 0;    
    }

    public function getBar(){
        return $this->_bar;    
    }

    public function addOne(){
        $this->_bar++
    }

    public function addRandom($rand){
        $this->_bar += $rand;
    }

}

...并且是上面三个例子中唯一接近OOP的

---