5

如果我在我的<head>标签中这样做：

<script type="text/javascript" src="foo.js"></script>

在 foo.js 我这样做：

var foo = new Foo();
function Foo()
{
   //code here
}

即使变量包含在函数定义之上，此代码是否会可靠地实例化变量foo，还是应该将其移动到文件底部，如下所示：

function Foo()
{
   //code here
}
var foo = new Foo();
4

3 回答 3

5

您的示例将在任何遵循 ECMAScript 标准的浏览器中运行（至少在这个问题上都可以）。

请参阅规范的第 10.3-10.5 节。

首先设置本地范围，然后实际运行函数体。

阅读 10.5（该部分真的不是很长）以了解为什么 @meder 的答案是正确的。

如果您不想自己阅读规格：

10.5 告诉以该顺序声明变量（如果某个名称出现两次则覆盖）：

从外部范围继承=设置将影响外部范围：

  • 周围范围的变量。
  • 自己的函数名。

本地范围 = 设置不会影响外部范围：

  • 参数（从左到右）。
  • 参数对象。
  • 声明所有内部变量（如果有的话，不覆盖当前值，undefined如果没有的话）

总而言之：

返回函数 x 本身：

function x() {
    return x;
}

返回参数 x：

function x(x) {
    return x;
}

返回内部函数 x：

function x(x) {
    return x; // the return does no harm, x is already set
    function x() {} // before the actual body is evaluated
}

还返回内部函数 x：

function x(x) {
    var x; // in this case a no-op 
    return x;
    function x() {}
}

返回 42：

function x(x) {
    var x = 42; // overwrite x in local scope
    return x;
    function x() {}
}

返回第二个参数：

function x(x,x) { // assign left to right, last one "wins"
    return x; // arguments[0] would still name the first argument
}

第二次调用时返回 2 x，因为 x 设置为内部函数：

function x() {
    x = function() { return 2; } // set x in outer scope
    return 1;
}
于 2012-05-29T01:26:41.507 回答
4

如果您通过 定义它，则只需将其移至上方var，例如：

var Foo = function(){};
var foo = new Foo;

否则，据我所知，解释器会提前读取函数定义。

于 2012-05-29T01:18:08.160 回答
3

据我所知，由于提升，JS 对您的代码执行此操作：

var foo;          //var declarations hoisted up
function Foo(){   //function declarations hoisted up
   //code here
}
foo = new Foo();  //the operation

所以应该没问题。但是，我不会仅仅依靠提升，因为至少对我来说，当声明到处都是时很难调试。为了便于阅读，请以这种方式订购代码：

  • 变量声明
  • 职能
  • 操作

代码1：

console.log(foo); //undefined
var foo = new Foo();
console.log(foo); //Foo
function Foo(){
   //code here
}
console.log(foo); //Foo

//acts like:
var foo;          //var declaration hoisted up
function Foo(){}  //function declaration hoisted up
console.log(foo); //undefined
foo = new Foo();
console.log(foo); //Foo
console.log(foo); //Foo

代码2：

console.log(foo); //undefined
function Foo(){
   //code here
}
console.log(foo); //undefined
var foo = new Foo();
console.log(foo); //Foo

//acts like:
var foo;          //var declaration hoisted up
function Foo(){}  //function declaration hoisted up
console.log(foo); //undefined
console.log(foo); //undefined
foo = new Foo();
console.log(foo); //Foo
于 2012-05-29T01:15:07.530 回答