JS中的變量作用域(console版)
作用域說明:指一個(gè)變量的作用范圍
1.全局作用域
(1) 全局作用域在頁面打開時(shí)被創(chuàng)建,頁面關(guān)閉時(shí)被銷毀
(2) 編寫在script標(biāo)簽中的變量和函數(shù),作用域?yàn)槿郑陧撁娴娜我馕恢枚伎梢栽L問到
(3) 在全局作用域中有全局對象window,代表一個(gè)瀏覽器窗口,由瀏覽器創(chuàng)建,可以直接調(diào)用
(4) 全局作用域中聲明的變量和函數(shù)會(huì)作為window對象的屬性和方法保存
var a = 10;
b = 20;
function an(){
console.log('an')
}
var bn = function(){
console.log('bn')
}
console.log(window)
如圖，變量a，b和函數(shù)an，bn都保存在window對象上
(5) window對象的屬性和方法可以直接調(diào)用,如window.an() 可以寫為 an()
2.函數(shù)作用域:
(1) 調(diào)用函數(shù)時(shí),函數(shù)作用域被創(chuàng)建,函數(shù)執(zhí)行完畢,函數(shù)作用域被銷毀
function an(){
var s = 'an'
console.log(s);
}
//an();
此時(shí)函數(shù)an并沒有執(zhí)行，作用域沒有創(chuàng)建，當(dāng)函數(shù)執(zhí)行時(shí),作用域創(chuàng)建，輸出結(jié)果an
an();
(2) 每調(diào)用一次函數(shù)就會(huì)創(chuàng)建一個(gè)新的函數(shù)作用域,他們之間是相互獨(dú)立的
(3) 在函數(shù)作用域中可以訪問到全局作用域的變量,在函數(shù)外無法訪問到函數(shù)作用域內(nèi)的變量
function an(){
var s = 'an'
console.log(s);
}
an();
console.log(s); // 此時(shí)，程序會(huì)從當(dāng)前作用域和上級(jí)作用域及以上作用域中尋找變量s，并不會(huì)去下級(jí)作用域中尋找
(4) 在函數(shù)作用域中訪問變量、函數(shù)時(shí),會(huì)先在自身作用域中尋找,若沒有找到,則會(huì)到函數(shù)的上一級(jí)作用域中尋找,一直到全局作用域
(5) 在函數(shù)作用域中也有聲明提前的特性,對于變量和函數(shù)都起作用,此時(shí)函數(shù)作用域相當(dāng)于一個(gè)小的全局作用域,詳細(xì)聲明提前請看聲明提前部分
an();
bn();
function an(){
var s = 'an'
console.log(s);
}
var bn = function(){
console.log('bn')
}
下圖就結(jié)果中，an()可以正常執(zhí)行，函數(shù)an()提升并創(chuàng)建了，函數(shù)bn的變量名提升了，但是為賦值，此時(shí)bn不是函數(shù)
(6) 在函數(shù)作用域中,不使用變量關(guān)鍵字聲明的變量,在賦值時(shí)會(huì)往上一級(jí)作用域?qū)ふ乙呀?jīng)聲明的同名變量,直到全局作用域時(shí)還沒找到,則會(huì)成為window的屬性
an(); // 輸出結(jié)果 bn
function an(){
var b = 'bn';
function bn(){
console.log(b);
b = 'bn2'; // b會(huì)往上一級(jí)尋找已經(jīng)聲明的同名變量,并賦值,直到全局作用域時(shí)還沒找到,則會(huì)成為window的屬性
}
bn();
console.log(b); // 輸出 bn2
}
(7) 在函數(shù)中定義形參,等同于聲明變量
function an(name){
console.log(name); // 輸出 undefined
}
an();
等同于
function an(){
var name
console.log(name); // 輸出 undefined
}
an();
到此這篇關(guān)于JS中作用域以及變量范圍的文章就介紹到這了,更多相關(guān)JS作用域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解微信小程序（Taro）手動(dòng)埋點(diǎn)和自動(dòng)埋點(diǎn)的實(shí)現(xiàn)
這篇文章主要介紹了詳解微信小程序（Taro）手動(dòng)埋點(diǎn)和自動(dòng)埋點(diǎn)的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
uniapp中使用?uni.navigateBack()?返回上級(jí)頁面并傳參的方法
最近遇到這樣的需求在A頁面中通過跳轉(zhuǎn)到B頁面,在B頁面中處理的數(shù)據(jù),需要跳轉(zhuǎn)回A頁面供其使用,本文給大家分享uniapp中使用?uni.navigateBack()?返回上級(jí)頁面并傳參的操作方法,感興趣的朋友一起看看吧2023-10-10
Swiper實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Swiper實(shí)現(xiàn)導(dǎo)航欄滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
微信小程序開發(fā)搜索功能實(shí)現(xiàn)(前端+后端+數(shù)據(jù)庫)
這篇文章主要介紹了微信小程序開發(fā)搜索功能實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章主要介紹了js異步編程技巧，使用計(jì)數(shù)器的方式，每完成一個(gè)請求計(jì)數(shù)器加1 當(dāng)計(jì)數(shù)器等于2時(shí)執(zhí)行回調(diào)邏輯,兩個(gè)http并行發(fā)送,從而極大的提高了效率,需要的朋友可以參考下2017-08-08
window.onbeforeunload方法在IE下無法正常工作的解決辦法
下面的代碼可以做到不管用戶是點(diǎn)擊了關(guān)閉，或者是在任務(wù)欄關(guān)閉、點(diǎn)擊后退、刷新、按F5鍵，都可以檢測到用戶即將離開的消息。2010-01-01
微信小程序?qū)崿F(xiàn)自動(dòng)回復(fù)圖片消息
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)客服消息自動(dòng)回復(fù)圖片消息，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
表單通常用來收集網(wǎng)頁訪問者信息，常見的表單比如搜索引擎的搜索框、各網(wǎng)頁應(yīng)用的注冊或者登陸界面等。一個(gè)表單通常包括多個(gè)表單控件2021-10-10
js獲取當(dāng)前頁的URL與window.location.href簡單方法
下面小編就為大家?guī)硪黄猨s獲取當(dāng)前頁的URL與window.location.href簡單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
js Canvas實(shí)現(xiàn)的日歷時(shí)鐘案例分享
本文主要分享了js實(shí)現(xiàn)的日歷時(shí)鐘案例，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12