js中的变量声明

260 阅读2分钟

课程目标,得到这个答案,知道为什么

var let const

image-20210622200345601

var 声明变量

声明变量之后会进行状态提升,会变成全局变量,成为window的成员变量

var name = '跃码教育'
console.log(name)
console.log(window.name)

在函数内部声明(用var声明)变量

// 函数未执行
function test1() {
    var com = '跃码教育'
}
console.log(com)
//index.js:10 Uncaught ReferenceError: com is not defined
  //  at index.js:10

函数内部var声明变量,不会作为全局变量,也就是说没有状态提升

function test1() {
    var com = '跃码教育'
}
test1()
    // 为什么
    // Uncaught ReferenceError: com is not defined
console.log(com)
// 函数未执行
// function test1() {
// 在函数内部用var声明的变量,
// 不会作作用域状态提升
//    var com = '跃码教育'
// }

函数内部声明的变量 没有使用vart 声明 ,就就会做作用域的状态提升门,成为全局变量

function test1() {
    // 初始化变量 ,但是没有关键字声明
    // 成为全局变量
    com = '跃码教育'
}
test1()
    // 跃码教育
console.log(com)
console.log(window.com)

// 变量作用域的提升

下面两个示例是等效的

// 变量作用域的提升
// 变量的作用域 有块级作用域 和全局作用域
// window是全局对象,他的成员变量,都是全局作用域
// 为什么没有报错
function test2() {
    console.log(age)
    var age = 10
}
test2() //undefined
// 把声明的变量提升到 函数内部作用域的顶部
function test2() {
    var age
    console.log(age)
    age = 10
}
test2() //undefined

var总结

  • var声明的变量可能会成为全局作用域
  • 提升到函数内部顶层作用域

let 声明变量

// let 声明的作用域是局部作用域
// 作用范围不能超出他所在的代码块
// 函数执行完成只有就会销毁
function test1() {
    let hanyun = '跃码教育';
}
test1()
    // Uncaught ReferenceError: hanyun is not defined
console.log(hanyun)

经典题

/**
 * 
index.js:56 Uncaught ReferenceError: i is not defined
    at index.js:56
(anonymous) @ index.js:56
(index):37 Live reload enabled.
 * 
 */
// 块级作用域 for 循环就是一个块级作用域,
// 每次循环就会生成一个i的示例并初始化
// 最后执行完成 i就销毁了
for (let i = 0; i < 5; i++) {
    console.log(i)
}
console.log(i) //i is not defined

var 声明的是全局变量

for (var j = 0; j < 5; j++) {
    console.log(window.j)
        // console.log(j)
}
console.log(j) // 5
    // 为什么?
console.log(window.j)

const声明变量

//const 声明变量 
// const声明的对象一定要初始化
const com = { name: '跃码教育' }
    // const com
console.log(com)
    //const 声明的变量是不可改变的,数据类型是不可以改变的
    // com = 1 // 这么写是错误的

const声明的变量可以改变他的成员的值,添加成员变量

const com = { name: '跃码教育' }
    // const com
console.log(com)
    //const 声明的变量是不可改变的,数据类型是不可以改变的
    // com = 1 // 这么写是错误的
com.name += com.name
console.log(com)

增加成员变量

com.age = 1
    //age: 1
    // name: "跃码教育跃码教育"
console.log(com)

尽量不用var,推荐const和let

// 为什么?
for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000)
}
console.log(window.i)
// 使用 let 
for (let i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000)
}

用匿名函数解决

for (var i = 0; i < 5; i++) {
   
}