关于js自执行函数报错的问题

没有名字就是名字
  • 121
var kim = kim || {};
    kim.prototype = {
        init : function (obj, i) {
            console.log('Hello World')
        },

        closeWindow : function (obj1, obj2) {
            obj1.onclick = function () {
                obj2.style.display = "none"
            }
        }
    }

//调用

function lala(){
    var First = document.querySelector('.first'),
        firstBody = document.querySelector('.first_body'),
        Btn = document.querySelector('.btn'),
        btnBody = document.querySelector('.btnbody');
    var myFunc = kim.prototype;
    myFunc.init(First, firstBody);
    myFunc.closeWindow(Btn, btnBody);
}
lala();

这么调用没问题,但是写成以下自执行函数就报错

(function(){
    var First = document.querySelector('.first'),
        firstBody = document.querySelector('.first_body'),
        Btn = document.querySelector('.btn'),
        btnBody = document.querySelector('.btnbody');
    var myFunc = kim.prototype;
    myFunc.init(First, firstBody);
    myFunc.closeWindow(Btn, btnBody);
})()

clipboard.png

新手不知道什么原理?不吝赐教,谢谢了

回复
阅读 3.7k
6 个回答
✓ 已被采纳

IIFE前面最好加上分号;

;(function(){
    var First = document.querySelector('.first'),
        firstBody = document.querySelector('.first_body'),
        Btn = document.querySelector('.btn'),
        btnBody = document.querySelector('.btnbody');
    var myFunc = kim.prototype;
    myFunc.init(First, firstBody);
    myFunc.closeWindow(Btn, btnBody);
})()

原因就在于代码压缩之后会出现以下情况:

// obj <obj>
var a = obj(function () {})()

这样就成了obj调用,就会报错,加上了分号

// obj <obj>
var a = obj;(function () {})();

这种尴尬就没有啦

var kim = kim || {};
    kim.prototype = {
        init : function (obj, i) {
            console.log('Hello World')
        },

        closeWindow : function (obj1, obj2) {
            obj1.onclick = function () {
                obj2.style.display = "none"
            }
        }
    }

后面加上分号。我估计是把后面的自调用的()当成传参数什么了。需要再确认一下。

我感觉问题可能是出现在没有等网页加载完成再去执行.你把你的那个自动执行的行数写在

$(funciton(){
    '你的自动执行函数';
});

分号真的好吝啬……

建议把documentkim传进IIFE里试试,写成这样:

(function(document, kim){
//blablabla...
})(document, kim)

估计这是JS的【变量提升】搞的鬼。
可以这样简单理解:

无论你变量或函数在什么地方定义,解析器都会默认将它们插放到当前作用域的最顶部,所以形象的叫它做“变量提升”。

这是我个人对这个概念形象的理解,希望对你有帮助

粗粗一看你的代码没任何问题,";"也没有问题,var之后同时声明多个变量本身就可以用","分割然后最后一个加";",而且现在已经有很多人主张去掉";"了,我从16年下半年开始也不加分号了,感觉代码清爽不少。当然也有副作用,有时候会因为自动插入;出点bug,不过对有些经验的开发不是什么问题。
最后你这个代码在我的chrome下是可以的啊,不报错。
clipboard.png
以我的代码知识来看你这个也没有任何问题,用括号括起来已经让解释器知道你这个是一个变量不是语句了,所以我认为代码是没什么问题的。从其他地方排查吧

宣传栏