JavaScript中的变量提升、作用域

wwq0327 发布于2019-08-19 18:36 / 1342人阅读

摘要：即的变量提升此处变量未声明时便可以使用，其实是因为会自动将声明语句提升到顶部。但名字的初始化却是按其在代码中书写的顺序进行的，不受以上优先级的影响。

变量提升（hoisting）

在JavaScript中，函数、变量的声明都会被提升（hoisting）到该函数或变量所在的scope的顶部。即——JavaScript的变量提升.

var x = 5;    
alert(x);     // 5 
alert(y);     // undefined
var y = 7;    
alert(y);     // 7

此处变量y未声明时便可以使用，其实是因为JavaScript会自动将声明语句提升到顶部。
而第一次alert(y)时显示undefined，说明只提升了声明，未提升赋值语句。等同于以下：

var y;
alert(y);    // undefined
y = 7;
alert(y);    // 7

javascript中一个名字(name)以四种方式进入作用域(scope)，其优先级顺序如下：

语言内置：所有的作用域中都有 this 和 arguments 关键字;

形式参数：函数的参数在函数作用域中都是有效的;

函数声明：形如function foo() {};

变量声明：形如var bar;

名字声明的优先级如上所示。也就是说如果一个变量的名字与函数的名字相同，那么函数的名字会覆盖变量的名字，无论其在代码中的顺序如何。但名字的初始化却是按其在代码中书写的顺序进行的，不受以上优先级的影响。看代码：

(function(){
    var foo;
    console.log(typeof foo);  //function
     
    function foo(){}
 
    foo = "foo";
    console.log(typeof foo);  //string
    
    var foo;
})();

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(); // TypeError "foo is not a function"
bar(); // valid
baz(); // TypeError "baz is not a function"
spam(); // ReferenceError "spam is not defined"

var foo = function () {}; // anonymous function expression ("foo" gets hoisted)
function bar() {}; // function declaration ("bar" and the function body get hoisted)
var baz = function spam() {}; // named function expression (only "baz" gets hoisted)

foo(); // valid
bar(); // valid
baz(); // valid
spam(); // ReferenceError "spam is not defined"

JavaScript中的作用域

JavaScript中运行以下代码我们会发现，i为10？

for (var i = 0; i < 10; i++) {
    // some code
}
return i;      //10

在如Java、C、C++等其他语言中，作用域一般为for语句、if语句或{}内的一块区域，称为块级区域（block-level scope）;
而在JavaScript中，作用域则是函数域（function-level scope）.

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

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

    var foo = 1;
function bar() {
    if (!foo) {     // 由于var foo被提升，此处foo为undefined，进入if
        var foo = 10;
    }
    alert(foo);     // 10
}
bar();

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

引用自：JavaScript Scoping and Hoisting--written by ben cherry

云服务器 GPU云服务器 php变量作用域 javascript作用域链 js变量声明提升 javascript提升

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79759.html

ES6 变量作用域与提升：变量的生命周期详解

摘要：不同的是函数体并不会再被提升至函数作用域头部，而仅会被提升到块级作用域头部避免全局变量在计算机编程中，全局变量指的是在所有作用域中都能访问的变量。 ES6 变量作用域与提升：变量的生命周期详解从属于笔者的现代 JavaScript 开发：语法基础与实践技巧系列文章。本文详细讨论了 JavaScript 中作用域、执行上下文、不同作用域下变量提升与函数提升的表现、顶层对象以及如何避免创建...

lmxdawn 2019-08-21 11:55 评论0 收藏0
关于javascript中的作用域和作用域链

摘要：作用域的类别可以影响到变量的取值，分为词法作用域静态作用域和动态作用域。而，采用的就是词法作用域，或者叫静态作用域。关于javascript中的作用域和作用域链我GitHub上的菜鸟仓库地址：点击跳转查看其他相关文章文章在我的博客上的地址：点击跳转前面的文章说到，执行上下文的创建阶段，主要有三个内容： 1、创建变量对象；2、初始化作用域...

lcodecorex 2019-08-20 18:18 评论0 收藏0
作用域与提升

摘要：在当中，只存在函数作用域和全局作用域，而块级作用域是不存在的。作用域中作用域分为两种，分别是全局作用域函数作用域其中全局作用域指的是在一个文件中的作用域。 JavaScript中和C语言、Java这些语言不一样。在JavaScript当中，只存在函数作用域和全局作用域，而块级作用域是不存在的。刚刚接触JavaScript的话往往不知道这一点，所以很容易因为这一点在程序中出错。作用域 ...

idisfkj 2019-08-20 19:00 评论0 收藏0
【译】理解JavaScript：作用域

摘要：作用域是代码的不同部分在运行期间的可见性。大多数开发者想当然地理解作用域，但毫无疑问，有它自己的说明。变量可能是全局作用域的，或者是方法作用域的。总而言之，不要重复声明变量，使用良好命名，尽力避免在声明前调用和执行任何东西。原文链接：https://hackernoon.com/unders... 什么是作用域？就像JavaScript中的其他东西一样，作用域并无特别之处。尽管大多...

betacat 2019-08-22 17:13 评论0 收藏0
ES2015系列--块级作用域

摘要：在的闭包中，闭包函数能够访问到包庇函数中的变量，这些闭包函数能够访问到的变量也因此被称为自由变量。在之前最常见的两种作用域，全局作用局和函数作用域局部作用域。关于文章讨论请访问：https://github.com/Jocs/jocs.... 当Brendan Eich在1995年设计JavaScript第一个版本的时候，考虑的不是很周到，以至于最初版本的JavaScript有很多不...

darkbug 2019-08-22 10:34 评论0 收藏0