常见的调试报错 - 基础:函数加载

  • 作者:KK

  • 发表日期:2016.11.09


function在后面定义也会优先加载

当一个定义函数的语法出现在script标签或者js文件里面时,一旦被浏览器加载到,它会最新被加载,比如:

alert(b); // 函数体就是值

var a = 1;
alert(a); //当然有了,就在上一行定义的嘛

function b(){}

所以说,尽管定义b函数的代码写在了下面,可是当这块JS代码被加载时,b函数就已经优先存在了

所以平时调试错误的程序时,要注意当前能调用一个函数,但前面又没见到它,那意味着它在当前脚本块中的后面有定义,并被预先加载了


两块不同的script区域会分开一块块来加载function

虽然写在后面的function会被优先加载,但并不意味着下面的代码就成立:

<script>
alert(a); //有值
alert(b); //报错:Uncaught ReferenceError: b is not defined

function a(){}
</script>

<script>
function b(){}
</script>

原因很简单,浏览器正在对一个个script标签执行,所以正在执行第1个script代码时,第2个还在排队等待被执行,可以说执行引擎与它“素未谋面”,所以它的b函数还没被加载

这里也包括了第2块script引用了外部js文件的情况也是相同的


但未被运行的代码,里面的函数不会产生

alert(b);

window.onload = function(){
	function b(){}
};

由于window的load事件未发生,所以不会执行它里面的代码,于是b也就不存在了


赋值定义不会被预加载

var a = function(){1+1;}
alert(a); //有,因为上一行定义了这个变量的值就是函数

alert(b); //报错,因为下面的赋值语句不会先被加载,依旧按顺序执行

var b = function(){2+2;}

如果你疑惑“为什么赋值形式产生的函数就无法被提前加载”的话,请见这样的代码:

var a = Math.random() * 10;

alert(b);
alert(c);

if(a > 5){
	var b = function(){1+1;}
}else{
	var c = function(){2+2;}
}

你说吧,如果要提前加载,你让它加载哪个好?a是否大于5都不清楚

那不如按顺序从上到下运行,那就知道a是否大于5了嘛