javascript - 求解释这段代码，尤其是两个return-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - 求解释这段代码，尤其是两个return

ringa_lee 2017-04-11 11:41:21

[JavaScript讨论组]

352

var createIframe=(function(){
    var iframe;
    return function(){
        if(!iframe){
            iframe=document.createElement('iframe');
            iframe.style.display='none';
            document.body.appendChild(iframe);
        }
        return iframe;
    }
})();

ringa_lee

全部回复(2)

PHP中文网2017-04-11 11:43:21 2楼

这是一个高阶函数，它返回一个函数，它返回的函数的返回值是 iframe
这样形成了一个闭包，保存了iframe的值，不必每次计算；

这样看：

var createIframe=(function(){
    var iframe;
    var r = function(){
            if(!iframe){
                iframe=document.createElement('iframe');
                iframe.style.display='none';
                document.body.appendChild(iframe);
            }
            return iframe;
        };
    return r;
})();

补充：

最外层右半部份是一个立即执行的函数：


var createIframe = (function(){...})();

//相当于
function temp(){
    ...
}
var createIframe = temp();

再补充：
每次使用 createIframe 变量时，使用的其实是这一段代码：

function(){
    if(!iframe){
        iframe=document.createElement('iframe');
        iframe.style.display='none';
        document.body.appendChild(iframe);
    }
    return iframe;
};

这段代码有一个作用域，就是外层function的内部，它声明了一个iframe变量，这个变量会随内层的function一起保存，不会清除

当第一次执行代码，会向 <body> 中增加一个 <iframe> ，返回这个引用，并把它保存在iframe变量中，
iframe变量会一直保存在内存中，不被清除
以后执行代码时，首先判断 iframe 是否存在，如果存在，则直接返回其引用，不再创建新的<iframe>

赞 +0

添加回复

高洛峰2017-04-11 11:43:21 1楼

除了那两个return，还有最后那个();

这里形成了一个闭包环境，通常在不想使用全局变量的时候，会采取这种方式。

先从全局变量的方式去理解。

var iframe;
var createIframe=function(){
    if(!iframe){
        iframe=document.createElement('iframe');
        iframe.style.display='none';
        document.body.appendChild(iframe);
    }
    return iframe;
}

我想这个createIframe方法很好理解，就是只创建一个iframe对象(有单实例的味道)。

其实，return不用多解释。无非就是将值返回给调用者仅此而已。

最后那个()表示该方法会被立即执行，所以createIframe方法的实际处理过程就是return function(){}那部分。

赞 +0

添加回复