本篇分为三章节来讲,主要从下面几个点讲起
- 函数作用域
- IIFE
- 块级作用域
一、函数级作用域
让我们先看一段代码
var a = true;
function hoisting(){
if(!a){
var a = 2;
}
console.log(a)
}
hoisting();
// 最终结果:2
这段代码的逻辑是
- 首先会寻找当前
函数域
中的变量。 - 如果存在,即先声明变量首部,不存在则从父级再次寻找
- 直到找到为止。
那么我们可以改写为
var a; // 变量声明
a = true; // 变量定义
function hoisting(){
var a; // 变量声明
if(!a){
a = 2; //变量定义
}
console.log(a) // 先从自身函数域开始查找,找不到再去父作用域
}
hoisting();
javascript的变量是以函数为作用域而存在的,当本地查找不到时会去父级查找。
二、解决方案:闭包IIFE
可能和本文关系不大~~,主要是闭包构建新的函数域。
立即执行函数表达式:Immediately Invoked Function Expression
他的作用就是在变量被调用之前就给变量赋值
var a = (function(){
var a = 3
return a
}())
三、解决方案:let,const
let与const主要作用是讲javascript原来的函数级作用域调整到块级作用域
let a = 2;
function block(){
if(!a){
let a =1
}
console.log(a)
}
block() // 2
这个时候,函数的作用域就被划分的更小了,以块级为单位。
我们可以将代码分成三个块
- if块
- block块
- window块
好,现在我们改写一下函数会怎样呢
let a = 0;
function block(){
if(!a){
let a =1
}
console.log(a)
}
block() // 0
最终结果是0,当a在当前块block查找不到的时候会去父级块查找,最后为0
而if块内的变量只在块内有效