美文网首页
js声明提升

js声明提升

作者: 野蛮生长_ed2e | 来源:发表于2018-05-15 17:00 被阅读0次

1.声明在前还是赋值在前

直觉上告诉我们js代码执行是从上而下一行一行执行的,但实际上这种思路是不完全正确的
以下代码会输出什么

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

正常来说,声明在赋值之后,所以a被重新赋值为undefined,但是真正输出是2
再来看下面代码

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

可能根据上面代码的思路,大家认为会输出2 但实际是undefined

var a = 10
var a
console.log(a)

以上代码等同于下面代码

var a
var a
a = 10
console.log(a)

因此到底是声明在前还是赋值在前?

2.执行顺序

包括函数和变量在内的所有声明都会在任何代码被执行前首先被处理,当你看
var a = 2的时候,以为是一个声明,但是js会看成两个声明:var a;和a = 2,第一个声明实在编译阶段进行的,第二个声明会留在原地等待执行阶段

(1)第一个代码片段会被处理成下面的顺序
var a;
a=2;
console.log(a);
(2)第二个代码片段会被处理成下面的顺序
var a;
console.log(a);
a=2

因此打个比方,就是变量或函数的声明被移动到了最上面,这个过程叫提升,因此先声明后赋值

3.函数优先

console.log(a) // ƒ a() {}
function a() {}
var a = 1

函数声明和变量声明都会被提升,但是函数会被首先提升,变量后于函数

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

这段代码会被理解为

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

尽管var foo出现在function foo() {}之前,但它是重复声明,因为函数声明会提升到普通变量之前,但是后面的函数声明却可以覆盖前面的

foo(); // 3
function foo() { console.log( 1 );
}
var foo = function() { console.log( 2 );
};
function foo() { console.log( 3 );
}

4.为什么要存在变量提升

其实提升存在的根本原因就是为了解决函数间互相调用的情况如果没有函数提升,而是按照自下而上的顺序,当isEven函数被调用时,isOdd函数还未声明,所以当isEven内部无法调用isOdd函数。

// 验证偶数
function isEven(n) {
    if (n === 0) {
        return true;
    }
    return isOdd(n - 1);
}

console.log(isEven(2)); // true  

// 验证奇数
function isOdd(n) {
    if (n === 0) {
        return false;
    }
    return isEven(n - 1);
}

5.let声明

  1. let 声明的变量的作用域是块级的;
  2. let 不能重复声明已存在的变量;
  3. let 有暂时死区(不能在初始化之前使用变量),不会被提升。

总结

  • 函数提升优先于变量提升,函数提升会把整个函数挪到作用域顶部,变量提升只会把声明挪到作用域顶部
  • var 存在提升,我们能在声明之前使用。let、const 因为暂时性死区的原因,不能在声明前使用
  • var 在全局作用域下声明变量会导致变量挂载在 window 上,其他两者不会
  • let 和 const 作用基本一致,但是后者声明的变量不能再次赋值

相关文章

  • js声明提升

    1.声明在前还是赋值在前 直觉上告诉我们js代码执行是从上而下一行一行执行的,但实际上这种思路是不完全正确的以下代...

  • js声明提升

    块级作用域块级作用域是指花括号内的每一段代码都具有各自的作用域,而javascript没有块级作用域。javasc...

  • js - 声明提升

    Js代码分为两个阶段:编译阶段和执行阶段 我们习惯将var a = 2;看作一个声明,而实际上JavaScript...

  • 变量提升和函数提升

    JS不像C语言,C语言是先声明后使用,否则会报错。但JS中,有变量提升现象,可以先使用后声明。 JS存在变量提升,...

  • 变量声明提升

    变量声明提升是JS中一个基础的问题,同时也是对JS词法作用域认识的一个提升。在JS面试题中,关于变量声明提升的问题...

  • JS变量声明提升和函数声明提升

    JS代码分为两个阶段:编译阶段和执行阶段; 编译阶段:会找到所有的声明,并用合适的作用域将它们关联起来,这是词法作...

  • js变量声明提升

    1.变量的定义 可以使用var定义变量,变量如果没有赋值,那变量的初始值为undefined 2.变量作用域 变量...

  • 05 JS 声明提升

    关于编译器,引擎会在解释 JS 代码之前首先对其进行编译。编译阶段的一部分工作就是找到所有的声明,并用合适的作用域...

  • js变量声明提升与函数表达式

    1.变量声明提升 js引擎会把变量声明与函数声明都提升到当前函数的顶部。eg: js引擎编译为 2.函数表达式 对...

  • js面试题

    1、js 数据类型 基本数据类型 引用数据类型 2、js 变量和函数声明的提升 在js中变量和函数的声明会提升到最...

网友评论

      本文标题:js声明提升

      本文链接:https://www.haomeiwen.com/subject/dwxqdftx.html