课程目标,得到这个答案,知道为什么
var let const
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++) {
}