关于apply里arguments的问题

Question

var singleton = function(fn) {
    var result;
    return function() {
        return result || (result = fn.apply(this, arguments)); //关于这里的代码
    }
}

var createMask = singleton(
    function() {
        return document.body.appendChild(document.createElement('div'));
    }
)

关于这句代码：

fn.apply(this, arguments)

fn是后面创建div的函数吧，这里的apply是什么作用？
特别是arguments指向什么呀？
他作用是让this指向函数本身的this吗？

Answer 1

看了半天才理解。

这是一个单例模式的例子，让我们来分解代码解释一下

singleton是一个单一实例类。当result不为空时，直接返回result，让结果为空时，返回fn的执行结果，并且赋值到result以备下次可以直接返回result而不用再执行fn。

没看出里面的apply有什么用，调试了一下，看到arguments是一个空数组，这是一个js自带变量，表示当前函数接收到的参数数组，这里没有传参数进来，理所当然是空数组一个。

var singleton = function(fn) {
    var result;
    return function() {
        return result || (result = fn()); //关于这里的代码
    }
}

var createMask = singleton(
    function() {
        return document.body.appendChild(document.createElement('div'));
    }
)

代码改成这样仍然能正确的做好单例模式。

---

我们再来看createMask

我们看到createMask是一个函数。

这个函数里面能访问到我们从

singleton(
    function() {
        return document.body.appendChild(document.createElement('div'));
    }
)

传进去的回调函数，也就是fn，也能访问到singleton里面的result变量。那么，createMask函数就能实现根据单例变量'result'是否有值，来决定是否调用fn产生一个result值

综上所述，你不应该关注apply和arguments，它们只是一个简单的函数调用代理而已。 你应该关心的是：
1 这几行代码实现的单例模式的精巧结构
2.它为什么这样设计？是否有别的更直观的写法实现同样的功能？

Answer 2

var createMask = singleton(
    function() {
        return document.body.appendChild(document.createElement('div'));
    }
)

这段代码是个特例。没有参数。

如果换成下面这段有参数的呢

var result = singleton(
    function(a, b) {
        return a + b;
    }
)(1, 2);

使用fn.apply(this, arguments));来保证传进有参函数也可以执行并得到结果

Answer 3

这个特例中的fn是不需要参数，但是你无法保证其他的fn都不需要参数吧？