开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第15天,点击查看活动详情
12、window对象
Window对象
- 在浏览器中,浏览器为我们提供了一个window对象,可以直接访问
- window对象代表的是浏览器窗口,通过该对象可以对浏览器窗口进行各种操作 除此之外window对象还负责存储JS中的内置对象和浏览器的宿主对象
- window对象的属性可以通过window对象访问,也可以直接访问
- 函数就可以认为是window对象的方法
向window对象中添加的属性会自动成为全局变量
var 用来声明变量,作用和let相同,但是var不具有块作用域
- 在全局中使用var声明的变量,都会作为window对象的属性保存
- 使用function声明的函数,都会作为window的方法保存
- 使用let声明的变量不会存储在window对象中,而存在一个秘密的小地方(无法访问)
- var虽然没有块作用域,但有函数作用域
向window对象中添加的属性会自动成为全局变量
<script>
// alert(window)
// window.alert(123)
// window.console.log("哈哈")
window.a = 10
// console.log(a)
var b = 20 // window.b = 20
function fn(){
alert('我是fn')
}
// console.log(window.b)
// window.fn()
// let c = 33
window.c = 44
// console.log(c)
function fn2(){
// var d = 10 // var虽然没有块作用域,但有函数作用域
d = 10 // 在局部作用域中,如果没有使用var或let声明变量,则变量会自动成为window对象的属性 也就是全局变量
}
fn2()
console.log(d)
</script>
13、提升
变量var的提升
- 使用var声明的变量,它会在所有代码执行前被声明
所以我们可以在变量声明前就访问变量(不推荐,不好维护)
函数的提升
- 使用函数声明创建的函数,会在其他代码执行前被创建
所以我们可以在函数声明前调用函数
let的提升不显示
let声明的变量实际也会提升,但是在赋值之前解释器禁止对该变量的访问
<script>
console.log(b)
let b = 10
// fn()
function fn(){
alert("我是fn函数~")
}
// fn2()
// var fn2 = function(){
// }
// console.log(a)
var a = 10
// a = 10 // window.a = 10
</script>
14、立即执行函数
立即执行函数(IIFE)
-
立即是一个匿名的函数,并它只会调用一次
-
可以利用IIFE来创建一个一次性的函数作用域,避免变量冲突的问题
在开发中应该尽量减少直接在全局作用域中编写代码!
所以我们的代码要尽量编写的局部作用域
如果使用let声明的变量,可以使用{}来创建块作用域
<script>
{
let a = 10
}
{
let a = 20
}
// function fn(){
// var a = 10
// }
// fn()
(function(){
let a = 10
console.log(111)
}());
(function(){
let a = 20
console.log(222)
}())
</script>