js 面试难点: let const var 的区别;

前言js的属性声明形式有四种 ,分别是 let、const、var 以及直接声明,在面试过程中,他们的区别也经常被问到的。很多人都是可以说个大概的,但是有些模糊的概念可能不太了解,本文将尽量用简单的方式来讲解这些知识点,希望对你有所帮助。

四种声明方式及其区别

let

let 是我们目前最常用的一种声明方式,也就是变量 ,它的作用域块级作用域 ,也就是仅作用于 其所处的大括号 内。let并不强制要求变量初始化

const

const 简称为常量 ,它的作用域也是块级作用域 ,要求必须初始化 ,否则就会报错。如果是原始数据类型(数字、字符串等)是不能修改的,如果是引用数据类型(数组、对象)可以修改其内部属性。我个人理解是它的指针指向是锁死的 ,不能对其进行修改。到这可能有些没有学过c语言的同学有点懵,所以简单说一下js里面指针的概念,想进一步了解的同学可以后续关注一下这方面的知识,这里就不多赘述。举个例子:

js 复制代码
// 这段代码只是改变了obj1的指向,并不是将它原来的对象替换为 obj2 所指向的对象,
//{a: 1, b: 2} 仍然存在,只是obj1的指针并不指向他了
let obj1 = {a: 1, b: 2}
let obj2 = {name: '张三', age: 18}
console.log(obj1)
obj1 = obj2

简单来说就是在堆内存里分配两个空间,分别存储 {a: 1, b: 2}{name: '张三', age: 18},obj1obj2分别指向他们,而我们只是改变了obj1的指向,{a: 1, b: 2}仍然存储在堆内存里。当然,后续垃圾回收机制会对他们进行一个回收.

var

var是在ES6之前最常用的变量声明方式,它的作用域是函数作用域 ,如果是全局定义则直接绑定在window对象上,可以对他进行重定义 ,同时也有一个特性是会触发变量提升。话不多说,直接上代码:

js 复制代码
// 定义在 window 对象上
var b = 1;
console.log(window.b) // 1
function test() {
    // 变量提升,所以并不会报错
    console.log(a);// undefined
    var a = 1;
    // 重定义
    var a = 2;
    if (true) {
       // 函数作用域,这里的重定义仍然作数
        var a = 3; 
    }
    console.log(a); // 3
}
test();// undefined  3

什么是变量提升?

如上代码所示,它其实就是将 var所定义的变量的变量声明提到函数的第一行,在所有代码的最前面执行,其他不变,比如上面的代码正确的执行顺序其实是:var a; console.log(a); 同时我们也要注意一点,在js中函数也是一种数据类型,所以它也存在变量提升。变量提升的优先级是 var Function>var 其他,这里也引申出一个新的概念叫暂时性死区,虽然没什么大用但有些钻牛角尖的面试哥可能会问,因此也说一下

暂时性死区 :相对于var的变量提升,它是指在使用constlet的时候,如果在他们声明之前调用(比如打印)则会报错。

直接定义

这种定义方式很少见,但大家多多少少应该也见过,就是不带varletconst,直接就定义,无论是否在函数里面定义他都是直接绑定在 window对象上,可以理解为它的作用域是整个 window窗口,案例如下:

js 复制代码
function testFunc() {
    c=1;
}
testFunc()

console.log(window.c) // 1

总结:

声明方式 作用域 是否存在变量提升 是否必须初始化 是否可以重定义 是否可以重新赋值
let 块级作用域
const 块级作用域
var 函数作用域
直接声明 window窗口

以上就是js属性声明方式的全部相关内容,希望对你进一步了解js有所帮助,若有疏漏的地方,欢迎指正!

相关推荐
LuciferHuang1 小时前
震惊!三万star开源项目竟有致命Bug?
前端·javascript·debug
GISer_Jing1 小时前
前端实习总结——案例与大纲
前端·javascript
姑苏洛言2 小时前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手3 小时前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言3 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
hackchen3 小时前
Go与JS无缝协作:Goja引擎实战之错误处理最佳实践
开发语言·javascript·golang
你的人类朋友4 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手4 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
我命由我123456 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js
Jokerator6 小时前
深入解析JavaScript获取元素宽度的多种方式
javascript·css