首页 > web前端 > js教程 > javascript中函数作用域与块级作用域简单说明

javascript中函数作用域与块级作用域简单说明

不言
发布: 2018-08-01 16:13:32
原创
2021 人浏览过

这篇文章给大家介绍的内容是关于javascript中函数作用域与块级作用域简单说明,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

一、函数级作用域

让我们先看一段代码

var a = true;

function hoisting(){
    if(!a){
        var a = 2;
    }
    console.log(a)
}

hoisting();
// 最终结果:2
登录后复制

这段代码的逻辑是

  1. 首先会寻找当前函数域中的变量。

  2. 如果存在,即先声明变量首部,不存在则从父级再次寻找

  3. 直到找到为止。

那么我们可以改写为

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块内的变量只在块内有效

相关文章推荐:

JS面向对象编程中封装的解析

jQuery自调用匿名函数是如何调用的?

以上是javascript中函数作用域与块级作用域简单说明的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板