阅读 960

💥💥 当面试官问你JavaScript中var let const 中的区别,你应该这样回答

本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

var

ES6之前,我们在JavaScript中声明变量是使用var关键字来声明一个变量的,如果你在函数体中通过var关键字定义的变量,变量将限制在函数体中,在函数体之后定义,则是全局变量,我们看看下面这个例子:

console.log(named); // undefined
console.log(window.named); // undefined
(function getUserAge() {
  console.log(named); // undefined
  console.log(age); // undefined
  var age = 18; 
})();
var named = "island"; 
​
// 解释:
// undefined
// 使用了var声明的变量将被提升到该作用域的最顶部
复制代码

看了上面的例子,你可能会有两个疑惑:

  • 为什么named变量还没被定义的时候,可以先打印出named变量中的值?

    • named变量是通过var声明的,它的赋值将被提升到代码的最顶部,所以打印named的值是island
  • 为什么函数体中age变量打印出来的值不是18,而是undefined

    • 因为函数中age变量是通过var声明的,在代码执行之前,age变量是被提前到了函数体的顶部,但这时候还没有赋值,所以打印age的值是undefined

这就是变量提升导致的,JavaScript会把我们使用var声明的变量提前到作用域最顶部,上面的代码等价于:

var named = "island"; 
(function getUserAge() {
  var age
  console.log(named); // island
  console.log(age); // undefined
  age = 18; 
})();
console.log(named); // island
console.log(window.named); // island
复制代码

使用var关键字声明的变量,会在window对象中添加这个变量

let

let是JavaScript中重要的关键字之一在ES6出现之后,我们普遍使用let关键字来声明变量,这很好的解决了var的一些缺点,通过该关键字声明的变量不会出现变量提升问题且只能在该作用域中访问,即未到let声明时或非声明的作用域内是无法访问到这个变量的

{
    let named = "island"
    console.log(named); // island
    console.log(window.named); // undefined
    named = "cc"
    console.log(named); // cc
    var named = "abc" // Identifier 'named' has already been declared
}
{
    console.log(named); // named is not defined
}
复制代码

从上面的例子中,我们可以得出的是:

  • 通过let关键字声明的变量,只能在该作用域中访问。
  • 通过let关键字声明的变量,可以直接修改原有的内容
  • 变量已经通过let关键字声明之后,不能使用var关键字再次声明覆盖原有变量

const

const也是ES6中的语法,它用于声明一个常量,与let关键字声明的变量一样没有变量提升,与let类似,但只能声明时进行赋值操作且后续不能重新赋值,同样我们通过一个小例子来简单认识下它

{
    const named = "island"
    console.log(named); // island
    console.log(window.named); // undefined
    named = 'juejin' // Assignment to constant variable
    const named = "cc" // Identifier 'named' has already been declared
    let named = "cc" // Identifier 'named' has already been declared
}
{
    console.log(named); // named is not defined
}
复制代码

使用const关键字声明的常量,在后续代码中不能出现重新赋值,但如果是一个数组 / 对象,是可以修改里边的内容

const obj = {
  name: "a"
};
obj.name = "b";
console.log(obj.name); // b
复制代码

总结

  • 作用域不一样

    • var的作用域是在语句函数体内
    • let const的作用域是在语句块内
  • let const 没有变量提升机制,必须是先声明后使用,let可以修改值,const如果是基本类型的值是不能修改的,let const 声明相同变量名会报错。

关于变量提升机制

声明方式是否提升
var
let
const
文章分类
前端
文章标签