浅谈JavaScript 声明提升

1 引例及基本原理

在学习JavaScript声明提升之前，我们先看下面这个例子：

console.log(a);
var a=2;

运行结果会是什么？你可能会有以下的猜测：

1.报错ReferenceError: a is not defined；

2.打印2；

3.打印undefined。

正确的结果是第三种，打印undefined。

下面让我们来看看具体的原因。其实，对于var a=2;这条语句，JavaScript会将其视为两个声明：

  1. 定义声明var a，会在编译阶段进行；
  2. 赋值声明a=2，会留在原地等待执行阶段进行。

而所谓的声明提升：就是JavaScript会把var变量声明和函数声明都会被提升到各自作用域的顶部，而赋值操作并不会被提升。
因此，上面的例子实际是按照这样的流程来处理：

var a;
console.log(a);
a=2;

我们还需要知道，不仅仅是var变量声明会提升，函数声明同样也会提升，现在来看下面这个例子

foo();
function foo(){
 console.log(a);
 var a=2;
}

这个例子的运行结果为：打印undefined。这段代码实际上会被理解为为下面的形式：

function foo(){
 var a;
 console.log(a);
 a=2;
}
foo();

2 关于声明提升的常见问题

2.1 函数表达式

先看一个函数表达式的例子：

console.log(foo);
var foo=function(){}

上面代码的运行结果为：打印undefined。实际上，变量标识符foo被提升了，但它的赋值操作并没有被提升，我们可以理解为下面的形式：

var foo;
console.log(foo);
foo=function(){}

结论：函数声明会被提升，但函数表达式不会被提升。

2.2 声明的优先级

如果在同一个作用域内，存在同名的函数声明和var变量声明，那么会发生什么样的情况呢？我们同样再来看一个例子：

function a(){}
var a;
console.log(a);

var a;
function a(){}
console.log(a);

上面的两种写法，运行结果均为打印a(){}。也就是说，如果在同一个作用域内，存在同名的函数声明和var变量声明，则函数声明的优先级更高。
还有一种情况：如果同一个作用域内，存在多个同名的函数声明。这种情况下，后面声明的会覆盖前面声明的。

3 练习题

3.1 第一题

var getName = function() {
 console.log(1);
}
function getName() {
 console.log(2);
}
getName();

答案：打印1

解析：提升后的顺序如下

var getName;//与函数声明同名，故失效
function getName() {
 console.log(2);
}
getName = function() {//赋值
 console.log(1);
};
getName();

3.2 第二题

var a = 1;
function b(){
 a = 10;
 return;
 function a(){
  console.log(a);
 }
}
b();
console.log(a);

答案：打印1

解析：首先，我们需要梳理清楚声明的提升。
本题有几个关键点，我们需要明白：

函数b内的a函数虽然在return之后，但它并没有失效，它会发生声明提升，从而提升到b函数作用域的顶部。

很多童鞋（比如我TAT）可能会错误地认为这题的答案是10，认为我们在最后调用了b函数，修改了全局变量a。实际上，由于函数a发生了声明提升，导致在函数b内“遮蔽”了全局作用域中的变量a，因此，a=10;其实是将函数a重新赋值。为了进一步测验，大家可以把a函数注释掉，会发现此时的答案就变成了10。

注：本题还涉及到了闭包的相关知识，这一题详细的解析请见参考资料[2]，讲得非常详细。

var a;//全局变量a发生了声明提升
function b(){
 function a(){//函数a发生声明提升
   console.log(a);
  }
 a = 10;//因为函数a离它最近，因此赋值给函数a
 return;
}
a = 1;//赋值给了全局变量a
b();
console.log(a);

4 参考资料

[1] 《你不知道的JavaScript》

[2] js中变量名与函数名重名的问题，Charles_Tian

[3] 函数声明与变量声明的提升机制优先级问题，一个菜鸟的奋斗史

以上就是浅谈JavaScript 声明提升的详细内容，更多关于JavaScript 声明提升的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 浅谈JavaScript中变量和函数声明的提升

    现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.

  • JavaScript中Hoisting详解 (变量提升与函数声明提升)

    JavaScript中Hoisting详解 (变量提升与函数声明提升)

    本文主要给大家介绍了关于JavaScript中Hoisting(变量提升与函数声明提升)的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 如何将 函数声明 / 变量 "移动" 到作用域的顶部. 术语 Hoisting(提升) 在很多 JavaScript 博文中被用来解释标识符的解析.其实 Hoisting(提升) 这个词是用来解释 变量 和 函数声明 是如何被提升到 函数或全局 作用域顶部的.你在任何的 JavaScript 文档中找不到这个术语,我们说的

  • JavaScript的变量声明提升问题浅析(Hoisting)

    一.变量声明提升 hoisting 英['hɔɪstɪŋ] 美['hɔɪstɪŋ] n. 起重,提升 v. 把-吊起,升起( hoist的现在分词 ) 先来看一个栗子 var cc = 'hello'; function foo(){ console.log(cc); var cc = 'world'; console.log(cc); } foo(); console.log(cc); 这里将会输出 undefined.'world' .'hello' 此处主要有两个知识点: 1.作用域 2.

  • 跟我学习javascript的var预解析与函数声明提升

    1.var 变量预编译 JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对"先声明.后使用"的规则很熟悉,如果使用未经声明的变量或函数,在编译阶段就会报错.然而,JavaScript 却能够在变量和函数被声明之前使用它们.下面我们就深入了解一下其中的玄机. 先来看一段代码: (function() { console.log(noSuchVariable);//ReferenceError: noSuchVari

  • JavaScript进阶（一）变量声明提升实例分析

    本文实例讲述了JavaScript变量声明提升.分享给大家供大家参考,具体如下: 如下代码输出的结果是? var num = 123; function foo1(){ console.log( num ); //undefined var num = 456; console.log( num ); //456 } foo1(); Javascript代码执行分为两个大步: 预解析的过程 代码的执行过程 1.预解析与变量声明提升 程序在执行过程中,会先将代码读取到内存中检查,会将所有的声明在此

  • 浅谈JavaScript 声明提升

    1 引例及基本原理 在学习JavaScript声明提升之前,我们先看下面这个例子: console.log(a); var a=2; 运行结果会是什么?你可能会有以下的猜测: 1.报错ReferenceError: a is not defined: 2.打印2: 3.打印undefined. 正确的结果是第三种,打印undefined. 下面让我们来看看具体的原因.其实,对于var a=2;这条语句,JavaScript会将其视为两个声明: 定义声明var a,会在编译阶段进行: 赋值声明a=

  • 浅谈javascript:两种注释,声明变量,定义函数

    浅谈javascript:两种注释,声明变量,定义函数

    JavaScript:单行注释用//呵呵呵呵:多行注释用/*hdhdhdh*/ javascript中区别大小写,定义变量使用关键字var,语法如下:var 变量名,其中变量从编程角度讲,变量是用于存储某种/某些数值的存储器. javascript函数调用: 以上就是小编为大家带来的浅谈javascript:两种注释,声明变量,定义函数全部内容了,希望大家多多支持我们~

  • 浅谈javascript运算符——条件,逗号,赋值,()和void运算符

    前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多运算符.本文将介绍条件运算符.逗号运算符.赋值运算符.()和void运算符 条件运算符 条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'.通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后 varia

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

  • 浅谈JavaScript 执行环境、作用域及垃圾回收

    浅谈JavaScript 执行环境、作用域及垃圾回收

    执行环境定义了变量或函数有权访问的其他数据,决定了它们各自的行为.每个执行环境都有一个与之关联的变量对象. 全局执行环境是最外围的一个执行环境.根据JavaScript实现所在的宿主环境不同,表示执行环境的对象也不一样.在Web浏览器中,全局执行环境被认为是window对象.因此,所有的全局变量和函数都是作为window对象的属性和方法创建的. 变量对象:环境中定义的所有变量和函数都保存在这个对象中. 作用域链:当代码在一个环境中执行时,会创建变量对象的一个作用域链.作用域链的用途是保证对执行环

  • 浅谈JavaScript的全局变量与局部变量

    一.JavaScript scope 的划分标准是function函数块,不是以 if.while.for来划分的 <script> function f1(){ alert("before for scope:"+i); //i未赋值(并不是没有声明!使用未声明变量或函数会导致致命错误从而中断脚本执行) //此时i值为undefined for(var i=0; i<3;i++){ alert("in for scope:"+i);} //i的值

  • 浅谈JavaScript编程语言的编码规范

    JavaScript 编程语言作为最流行的客户端脚本语言,早已被众多 Web 开发人员所熟悉.随着 Web2.0 时代的到来和 Ajax 技术的广泛应用,JavaScript 也逐渐吸引着更多的视线.工作中要求越多的是对 JavaScript 语言的深入学习,灵活运用,和对编码质量的保证. 对于熟悉 C/C++ 或 Java 语言的工程师来说,JavaScript 显得灵活,简单易懂,对代码的格式的要求也相对松散.很容易学习,并运用到自己的代码中.也正因为这样,JavaScript 的编码规范也

  • 浅谈JavaScript 函数参数传递到底是值传递还是引用传递

    在传统的观念里,都认为JavaScript函数传递的是引用传递(也称之为指针传递),也有人认为是值传递和引用传递都具备.那么JS的参数传递到底是怎么回事呢?事实上以下的演示也完全可以用于Java 首先来一个比较简单的,基本类型的传递: function add(num){ num+=10; return num; } num=10; alert(add(num)); aelrt(num); //输出20,10 对于这里的输出20,10,按照JS的官方解释就是在基本类型参数传递的时候,做了一件复制

随机推荐