javascript - 封闭函数变量

Question

昨天开始阅读stampit js的源码，发现了一个有趣的方法，通过调用apply()将函数变量封装在对象中

instance = fn.apply(instance, arguments) || instance;

这到底是如何运作的？为什么下面的代码行不起作用？

instance = fn.apply(instance, arguments);

更长的例子:

var createFoo = function() {
    var foo = {},
        fn = function() {
            var i = 0;

            this.increment = function() {
                i++;
            };

            this.get = function() {
                return i;
            };
        };
    foo = fn.apply(foo, arguments) || foo;
    return foo;
}, foo = createFoo();

test('foo test', function () {
    foo.increment();
    equal(foo.get(), 1, 'pass');
});

var createBar = function() {
    var bar = {},
        fn = function() {
            var i = 0;

            this.increment = function() {
                i++;
            };

            this.get = function() {
                return i;
            };
        };
    bar = fn.apply(bar, arguments);
    return bar;
}, bar = createBar();

test('bar tests', function () {
    bar.increment(); /* undefined */
});

http://jsfiddle.net/RMh78/59/

Answer 1

这里发生的事情与对象如何作为引用传递以及函数返回什么值有关。

在您的代码块中，您有:

var createFoo = function() {
    var foo = {},
        fn = function() {
            var i = 0;

            this.increment = function() {
                i++;
            };

            this.get = function() {
                return i;
            };
        };
    foo = fn.apply(foo, arguments) || foo;
    return foo;
},
foo = createFoo();

让我们分解一下 foo = fn.apply(foo,arguments) || foo; 行。

foo 被声明并初始化为空对象 ({})。然后它被设置为 foo 函数中的 this 上下文(这就是 .apply 所做的)。 arguments 会将发送到 createFoo 的任何参数(无)传递给 fn。

因此，当运行 fn.apply 时，foo 对象应用了 increment 和 get 属性到它。 fn 没有 return 语句，因此它返回 undefined。

所以，现在我们有 foo = undefined || foo;，并且我们更新了 foo 的一些属性。这将 foo 设置为自身，然后下一行返回它。

在第二个(栏) block 中:

var createBar = function() {
    var bar = {},
        fn = function() {
            var i = 0;

            this.increment = function() {
                i++;
            };

            this.get = function() {
                return i;
            };
        };
    bar = fn.apply(bar, arguments);
    return bar;
},
bar = createBar();

您没有|| fn.apply(bar, argument) 之后的 bar。因此，发生的情况是 fn 运行，它返回 undefined，bar 设置为该值，然后 bar (返回未定义)。