美文网首页
var和let的区别,以及什么是变量提升?什么是函数提升?

var和let的区别,以及什么是变量提升?什么是函数提升?

作者: xiaojingy | 来源:发表于2020-09-03 15:08 被阅读0次

面试被问到了var和let的区别,对于我这个前端老菜鸟来说,本来是个送分题,结果给搞成了送命题,毕竟面试造火箭,工作拧螺丝,现在拿起课本重新复习一下吧:
1.使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象;
2.使用let声明的变量,其作用域为该语句所在的代码块内,不存在变量提升;

先说以下什么是变量提升和函数提升吧:
(1)、变量提升:
ES6出现之前,ES5只有全局作用域和函数作用域的概念,并没有块级作用域这个概念,变量提升即:变量声明提升到它所在作用域的最开始的部分,比如以下的例子:

console.log(a);   //undefined
var a = 1;
console.log(a);  // 1

function fn(){
  console.log(b);   //undefined
  var b = 2;
  console.log(b); //2
}
fn();

为什么会出现以上情况呢?js 代码的执行分为两个阶段:第一个阶段在当前词法环境中注册所有的变量和函数声明,简单说就是,解析;第二个阶段的 js 执行就开始了!
也就是是按照以下过程开始解析的:

var a;
console.log(a);  // undefined =>因为声明了变量但是并没有初始化
a= 1;
console.log(a); //1 => 因为给a初始化了值
function fn(){
  console.log(b);   //undefined  =>因为声明了变量但是并没有初始化
  var b = 2;
  console.log(b); //2 => 因为给b初始化了值
}
fn();

(2)、函数提升
js中创建函数有两种方式:函数声明式和函数字面量式,只有函数声明才存在函数提升!!如:

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

函数声明和变量声明都会被提升,在定义的函数名字和变量名相同的情况下:函数提升的优先级大于变量提升的优先级,即函数提升在变量提升之上。
等同于这样:

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

最后再来说以下var和let的区别:
ES6新出的命令let,与var类似,但是,
(1)所声明的变量只在let命令所在的代码块内有效;
(2)let 不存在变量提升而且有暂时性死区的约束;
(3)let变量不能重复声明

var a = 99;            // 全局变量a
f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
console.log(a);        // a=>99,  此时是全局变量的a
function f() {
  console.log(a);      // 当前的a变量是下面变量a声明提升后,默认值undefined
  var a = 10;
  console.log(a);      // a => 10
}
f();                   // f是函数,虽然定义在调用的后面,但是函数声明会提升到作用域的顶部。 
function f() {
  console.log(a);      // let 不存在变量提升,所以会报错
  let a = 10;
  console.log(a);      // a => 10
}

相关文章

  • var和let的区别,以及什么是变量提升?什么是函数提升?

    面试被问到了var和let的区别,对于我这个前端老菜鸟来说,本来是个送分题,结果给搞成了送命题,毕竟面试造火箭,工...

  • 面试题 var let const的区别 箭头函数和普通函数的区

    var let const 有什么区别 var var声明的变量可进行变量提升,let和const不会var可以重...

  • var let const的区别

    1.什么是变量提升?2.什么是暂时性死区?3.var let const的区别是什么? 1)函数提升的优先级高于变...

  • 浅谈变量提升

    变量提升是面试中非常常见的一个问题 比如 var 和 let 的区别是什么?答案之一就有 let 不会变量提升 1...

  • let 和 const 命令

    var、let 和 const 区别?var:1. 只有函数作用域(全局变量和局部变量);2. 会 “变量提升”,...

  • js中var,const,let的区别

    var,const,let的区别 图1是var,const,let功能对比图,后续会根据变量提升,函数作用域,块级...

  • 前端面试题整理

    针对js的问题 let 和 var的区别是什么var声明的变量都是全局变量,不存在局部变量,有变量提升;let可以...

  • 2019-07-25

    1.let var区别 var,let 作用域在该代码块中。let 不存在变量提升,var 存在变量提升。cons...

  • let和const命令

    let和var的一些区别 var存在变量提升,let不存在变量提升 暂时性死区(temporal dead zon...

  • 深入浅析var,let,const的异同点

    一、let和var区别 1.关于变量提升,var能变量提升,let不能 2.暂时性死区:块级作用域内存在let命令...

网友评论

      本文标题:var和let的区别,以及什么是变量提升?什么是函数提升?

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