js作用域小记var变量和function区别

首先来一个例子做实验

function createD(){
    var dir = {
        name: "d",
        ctrl: myCtrl,
        ctrl2: yourCtrl
    };
    return dir;

    function myCtrl (){
        console.log('my ctrl');
    }

    var yourCtrl = function(){
        console.log('your ctrl');
    };
}

var d = createD();
d.ctrl();
d.ctrl2();

可以猜一下输出结果

//输出：

d.ctrl();                //输出： my ctrl               

d.ctrl2();               //输出： Uncaught TypeError: d.ctrl2 is not a function

首先以上例子中的写法其实不太符合规范，变量及函数的定义最好都放在前边。

var的function的声明是不同的， var的声明会让变量声明提升到作用域顶部，但是变量的赋值还是在原位， 所以变量赋值如果在return后，也不会执行。 而function声明的话，会全部提升到顶部执行。

所以，createD() 里边的 yourCtrl变量实际是undefined  还没有来的及赋值即return掉了。

预编译后的代码会如下：

function createD(){
    var dir = {
        name: "d",
        ctrl: function(){
            console.log('my ctrl');
        },
        ctrl2: yourCtrl
    },
    yourCtrl;
    
    return dir;

    yourCtrl = function(){
        console.log('your ctrl');
    };
}

 js预编译时，会扫描作用域， 将作用域内的函数声明提升到作用域顶部。而执行代码还在原位。

例如

function(){
　　console.log('start');
　　var a = 1;
}
经过预编译后，会变成：
function(){
　　var a;
　　console.log('start');
　　a = 1;
}

即使这个var a在if的花括号内，也会被提前。

所以，我们常常强调的编码规范还是很有存在意义的！