Javascript作用域和变量提拔

2019年8月26日 186次阅读 来源: fwon

引子

起首人人看一下下面的代码，猜猜会输出什么结果？

var foo = 1;
function bar() {
    if (!foo) {
        var foo = 10;
    }
    alert(foo);
}
bar();

答案是10!
你是不是会迷惑前提语句if(!foo)并不会实行，为何foo会被赋值为10

再来看第二个例子

var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);

答案照样10吗？明显不是，alert输出了1

假如你依然对上面两个输出结果摸不着头脑，那末请仔细浏览这篇文章

Scoping in Javascript

Javascript的作用域已经是陈词滥调的问题了，然则不一定每个人都能正确明白。
我们先来看一下C言语的一个例子：

#include <stdio.h>
int main() {
    int x = 1;
    printf("%d, ", x); // 1
    if (1) {
        int x = 2;
        printf("%d, ", x); // 2
    }
    printf("%d\n", x); // 1
}

顺序顺次输出了1，2，1
为何第三个输出了1而不是2呢？由于在C言语中，我们有块级作用域（block-level scope）。在一个代码块的中变量并不会覆蓋掉代码块表面的变量。我们无妨试一下Javascript中的表现

var x = 1;
console.log(x); // 1
if (true) {
    var x = 2;
    console.log(x); // 2
}
console.log(x); // 2

输出的结果为1，2，2 if代码块中的变量覆蓋了全局变量。那是由于JavaScript是一种函数级作用域（function-level scope）所以if中并没有自力保护一个scope,变量x影响到了全局变量x

C,C++,C#和Java都是块级作用域言语，那末在Javascript中，我们怎样完成一种相似块级作用域的结果呢？答案是闭包

function foo() {
    var x = 1;
    if (x) {
        (function () {
            var x = 2;
            // some other code
        }());
    }
    // x is still 1.
}

上面代码在if前提块中建立了一个闭包，它是一个马上实行函数，所以相当于我们又建立了一个函数作用域，所以内部的x并不会对外部产生影响。

Hoisting in Javascript

在Javascript中，变量进入一个作用域可以经由过程下面四种体式格局：

  1. 言语自定义变量：一切的作用域中都存在this和arguments这两个默许变量

  2. 函数形参：函数的形参存在函数作用域中

  3. 函数声明：function foo() {}

  4. 变量定义：var foo

个中，___在代码运行前，函数声明和变量定义一般会被诠释器移动到其地点作用域的最顶部___，怎样明白这句话呢？

function foo() {
    bar();
    var x = 1;
}

上面这段在吗，被代码诠释器编译完后，将变成下面的情势：

function foo() {
    var x;
    bar();
    x = 1;
}

我们注意到，x变量的定义被移动到函数的最顶部。然后在bar()后，再对其举行赋值。
再来看一个例子，下面两段代码实际上是等价的：

function foo() {
    if (false) {
        var x = 1;
    }
    return;
    var y = 1;
}
function foo() {
    var x, y;
    if (false) {
        x = 1;
    }
    return;
    y = 1;
}

所以变量的上升（Hoisting）只是其定义上升，而变量的赋值并不会上升。

我们都晓得，建立一个函数的要领有两种，一种是经由过程函数声明function foo(){}
另一种是经由过程定义一个变量var foo = function(){} 那这两种在代码实行上有什么区分呢？

来看下面的例子：

function test() {
    foo(); // TypeError "foo is not a function"
    bar(); // "this will run!"
    var foo = function () { // function expression assigned to local variable 'foo'
        alert("this won't run!");
    }
    function bar() { // function declaration, given the name 'bar'
        alert("this will run!");
    }
}
test();

在这个例子中，foo()挪用的时刻报错了，而bar可以一般挪用
我们前面说过变量会上升，所以var foo起首会上升到函数体顶部，但是此时的foo为undefined,所以实行报错。而关于函数bar, 函数自身也是一种变量，所以也存在变量上升的征象，然则它是上升了全部函数，所以bar()才可以顺遂实行。

再回到一开始我们提出的两个例子，能明白其输出道理了吗？

var foo = 1;
function bar() {
    if (!foo) {
        var foo = 10;
    }
    alert(foo);
}
bar();

实在就是：

var foo = 1;
function bar() {
    var foo;
    if (!foo) {
        foo = 10;
    }
    alert(foo);
}
bar();
var a = 1;
function b() {
    a = 10;
    return;
    function a() {}
}
b();
alert(a);

实在就是：

var a = 1;
function b() {
    function a() {}
    a = 10;
    return;
}
b();
alert(a);

这就是为何，我们写代码的时刻，变量定义总要写在最前面。

ES6有何区分

在ES6中，存在let关键字，它声明的变量一样存在块级作用域。
而且函数自身的作用域，只存在其地点的块级作用域以内，比方：

function f() { console.log('I am outside!'); }
if(true) {
   // 反复声明一次函数f
   function f() { console.log('I am inside!'); }
}
f();

上面这段代码在ES5中的输出结果为I am inside!由于f被前提语句中的f上升覆蓋了。
在ES6中的输出是I am outside!块级中定义的函数不会影响外部。

假如对let的运用，或ES6的其他新特征感兴趣，请自行浏览ES6文档。

    原文作者：fwon
    原文地址: https://segmentfault.com/a/1190000003114255
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞