ES5和ES6中的变量声明提升

2024-05-13 15:32:33

ES5和ES6中的变量声明提升

Example1:

a=2;
var a;
console.log( a );   //结果为2

Example2:

console.log( a );   //结果是undefined
var a=2;

Example2:

foo();  //结果是1
var foo;
foo = function() { console.log( 2 );
};
function foo() { console.log( 1 );
}

原理解读：浏览器引擎在运行程序分为两个阶段：第一个的阶段是编译阶段，该阶段负责找出代码中所有的定义声明（包括变量和函数），并关联到合适的作用域中；第二阶段是执行阶段，该阶段负责找出代码中的所有赋值声明，并在作用域找找到第一阶段的定义声明，以供使用。
代码解读：
第一个例子在编译阶段会将var a;这句定义声明首先解读关联到全局作用域中，所以当在赋值声明阶段执行a=2;和console.log(a);这两个赋值声明的代码时是正常执行的，也就有了定义声明提前了的感觉。

第二个例子也同样是第一阶段先解读了var a,这部分定义声明，接着在第二阶段的时候执行console.log(a);的时候报undefined，说明虽然定义声明虽然提前了，可是赋值声明a=2;这部分仍然未提前。

第三个例子在编译阶段会将 var foo;变量定义声明和 function foo(){...}函数定义声明提前，然后在第二阶段执行foo();赋值声明，这里需要注意的是在这种变量和函数重复声明的情况，函数定义申明会被提更前，原因倒不是真的是提前了，而只是在赋值声明的时候首先会去方法域中寻找，而后才去变量域中寻找，所以导致看起来是函数申明比变量声明更提前了。

结论：对于JS中所说的变量声明提前，更准确的说法是变量定义声明提前了，更准确的理解是定义声明处于程序运行的第一个阶段导致相较于赋值声明的第二阶段有了前提的效果。

ES5和ES6中的变量声明提升相关推荐

函数声明和变量声明提升
var a; // 声明一个变量,标识符为a function a() { // 声明一个函数,标示符也为a } alert(typeof a); 显示的是"function",即 ...
php变量声明提升,TypeScript：let和const变量声明
在开始介绍let和const变量声明前,有必要先了解下JavaScript里的var变量声明. var变量声明全局声明 var声明在函数体外,所声明的变量为全局变量.var name = " ...
JavaScript-----静态成员在ES5和ES6中的实现
在学习静态成员在ES5和ES6中的实现之前我们先来了解一下静态成员的定义. 静态成员 :类的所有对象共享的成员(类的成员变量(属性)和成员方法) 看完这个定义我相信大家还是不太了解静态成员是什么意思 ...
ES5和ES6中的this指向
ES5和ES6中的this指向 ES5: 1.在普通函数中,this指向的是函数调用者,默认情况下,this指向的是window 2.在严格模式下,如果没有直接调用者,在函数中,this的值为unde ...
ES6——let-const的变量声明以及模板字符串
目录一.let和const 1.let a.阻止变量提升 b.块级作用域 c.不能重复声明 2.const 二.模板字符串 ES5语言有很多地方存在不合理以及不足,比如变量的提升.内置对象的方法不灵 ...
es6中的变量解构对象数组函数
文章目录一.变量/常量声明二.解构 2.1.数组解构 2.2对象解构 3.3.字符串解构 4.数值解构 5.布尔值解构三.对象 3.1.对象简写 3.2API拓展四.扩展运算符五.数组 5. ...
Day3--js--可恶之变量声明提升大法.。。
1.首先大家看一下下面的代码,判断下会输出什么结果: var foo = 1; function bar() {if(!foo) {var foo = 10;}alert(foo); } bar(); ...
Js 变量声明提升和函数声明提升
Js代码分为两个阶段:编译阶段和执行阶段 Js代码的编译阶段会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作用域的核心内容包括变量声明(var a)和函数声明(function a(){ ...
ES5和ES6中对于继承的实现方法
在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是 ...

最新文章

热门文章