Javascript中的生命周期作用域

Question

我正在使用一个脚本，该脚本使用jsonP来共享跨域信息。它工作得很好，但我需要把它放在生活中。

var domain = "http://example.com/";
var myObj = {
    recupData : function(data){
        if (data.id) {
            console.log(data.id);
        }
    },
    scriptTag : function() {
        var siteOrigin = domain+"check?q=myObj.recupData",
            script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = siteOrigin;
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    }
}
myObj.scriptTag();

这是可行的！(我只取了我的全局脚本的一小部分，只是为了向您展示它的结构，所以如果有任何语法错误，那不是重点)。

但是当我把这段代码放入一个生命，一个自我调用的函数时，我遇到了一些麻烦。

(function(){
var domain = "http://example.com/";
var myObj = {
    recupData : function(data){
        if (data.id) {
            console.log(data.id);
        }
    },
    scriptTag : function() {
        var siteOrigin = domain+"check?q=myObj.recupData",
            script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = true;
        script.src = siteOrigin;
        document.getElementsByTagName('HEAD')[0].appendChild(script);
    }
}
myObj.scriptTag();
})();

我得到了错误myObj未定义，错误来自scriptTag方法，我真的不明白为什么我不能访问这个方法，直到我添加了一个生命，它不应该改变任何东西，它只是避免污染全局命名空间。我认为这只是一个背景问题，但我需要一个解释。

Answer 1

使用IIFE的动机是您的变量名不会“泄漏”到全局作用域中。然而，当您使用JSONP时，您必须向全局作用域公开至少一个变量，以便加载的脚本可以调用它(或它的一个方法)。这个加载的脚本作为一个单独的script标记插入到head中，在一个完全不同的作用域中，因此您只能通过全局作用域与它共享变量。

例如，假设您对http://mydomain.com/check?q=myObj.recupData的调用会产生如下响应：

myObj.recupData({"id":123,"more":"stuff"})

这是在一个单独的脚本标记中加载的，就好像您已经编写了：

<script type="text/javascript">
myObj.recupData({"id":123,"more":"stuff"})
</script>

显然，如果此调用应该有效，myObj需要在全局作用域中，因此您应该将其声明移到生命周期之外，或者显式地在window对象上注册它：

// Global declaration
var myObj;
(function(){
    var domain = "http://mydomain.com/";
    myObj = { ... };
    myObj.scriptTag();
})();

// Registering on window
(function(){
    var domain = "http://mydomain.com/";
    // Also get it as a local variable
    // for a minor scope lookup optimization
    var myObj = window.myObj = { ... };
    myObj.scriptTag();
})();

第二个选项可能更有趣，因为无论您将代码片段放在哪里，它都将始终在全局范围内结束。如果由于某种原因，您最终将第一个代码片段嵌套在另一个生命周期中，那么您还需要记住移动myObj声明，这可能会很麻烦。