首頁 > web前端 > js教程 > 主體

javascript中函數作用域與區塊級作用域簡單說明

不言
發布: 2018-08-01 16:13:32
原創
1982 人瀏覽過

這篇文章跟大家介紹的內容是關於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
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板