关于apply里arguments的问题

习泽涛
  • 194
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吗?

回复
阅读 4.8k
3 个回答

看了半天才理解。

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

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

clipboard.png

我们看到createMask是一个函数。

clipboard.png

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

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

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

综上所述,你不应该关注apply和arguments,它们只是一个简单的函数调用代理而已。 你应该关心的是:
1 这几行代码实现的单例模式的精巧结构
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));来保证传进有参函数也可以执行并得到结果

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

宣传栏