电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript中變量提升和函數(shù)提升實(shí)例詳解

瀏覽:94日期:2023-05-31 16:35:53
js 執(zhí)行 詞法分析階段:包括分析形參、分析變量聲明、分析函數(shù)聲明三個(gè)部分。通過詞法分析將我們寫的 js 代碼轉(zhuǎn)成可以執(zhí)行的代碼。 執(zhí)行階段變量提升 只有聲明被提升,初始化不會(huì)被提升 聲明會(huì)被提升到當(dāng)前作用域的頂端

🌰 1:

console.log(num)var numnum = 6

預(yù)編譯之后

var numconsole.log(num) // undefinednum = 6

🌰 2:

num = 6console.log(num)var num

預(yù)編譯之后

var numnum = 6console.log(num) // 6

🌰 3:

function bar() { if (!foo) {var foo = 5 } console.log(foo) // 5}bar()

預(yù)編譯之后

function bar() { var foo // if語句內(nèi)的聲明提升 if (!foo) {foo = 5 } console.log(foo)}bar()函數(shù)提升 函數(shù)聲明和初始化都會(huì)被提升 函數(shù)表達(dá)式不會(huì)被提升

🌰 1: 函數(shù)聲明可被提升

console.log(square(5)) // 25function square(n) { return n * n}

預(yù)編譯之后

function square(n) { return n * n}console.log(square(5))

🌰 2: 函數(shù)表達(dá)式不可被提升

console.log(square) // undefinedconsole.log(square(5)) // square is not a functionvar square = function(n) { return n * n}

預(yù)編譯之后

var squareconsole.log(square)console.log(square(5))square = function() { return n * n}

🌰 3:

function bar() { foo() // 2 var foo = function() {console.log(1) } foo() // 1 function foo() {console.log(2) } foo() // 1}bar()

預(yù)編譯之后:

function bar() { var foo foo = function foo() {console.log(2) } foo() // 2 foo = function() {console.log(1) } foo() // 1 foo() // 1}函數(shù)提升在變量提升之前

🌰 1:

console.log(foo) // 會(huì)打印出函數(shù)function foo() { console.log(’foo’)}var foo = 1

🌰 2:

var foo = ’hello’ // hello;(function(foo) { console.log(foo) var foo = foo || ’world’ console.log(foo) //hello})(foo)console.log(foo) // hello

預(yù)編譯之后

var foo = ’hello’;(function(foo) { var foo foo = ’hello’ // 傳入?yún)?shù)的foo值 console.log(foo) // hello foo = foo || ’world’ // foo有值為hello,所以沒有賦值為world console.log(foo) // hello})(foo)console.log(foo) // hello, 打印的事全局作用域下的var foo = ’hello’JS變量提升和函數(shù)提升的順序

最近筆試時(shí)碰到考察變量提升與函數(shù)提升順序的一道題目,之前只知道var定義的變量會(huì)有變量提升以及函數(shù)聲明也會(huì)提升,但沒有深入研究他們的順序以及詳細(xì)過程。事后查閱資料加上自己的驗(yàn)證,得出了自己對(duì)于它們順序的一些理解,話不多說,直接進(jìn)入正題。

首先給出我的結(jié)論:函數(shù)提升優(yōu)先級(jí)高于變量提升,且不會(huì)被同名變量聲明時(shí)覆蓋,但是會(huì)被同名變量賦值后覆蓋

大家可以看下面這段代碼:

console.log(a) // ƒ a(){} 變量a賦值前打印的都會(huì)是函數(shù)a var a=1; function a(){} console.log(a) // 1 變量a賦值后打印的都會(huì)是變量a的值

首先變量和函數(shù)聲明都提升,但函數(shù)提升優(yōu)先級(jí)高于變量,都提升后變量只是定義沒有賦值,所以輸出的是函數(shù)a。詳細(xì)過程如下:

function a(){} // 函數(shù)聲明提升 a-> f a (){} var a;// 變量提升 console.log(a) // 此時(shí)變量a只是聲明沒有賦值所以不會(huì)覆蓋函數(shù)a --> 輸出函數(shù)a f a (){} a=1; //變量賦值 console.log(a) // 此時(shí)變量a賦值了 --> 輸出變量a的值 1

總結(jié):由于函數(shù)聲明和變量都會(huì)提升,如果函數(shù)與變量同名,那么只要在變量賦值前打印的都會(huì)是函數(shù),在變量賦值之后打印都是變量的值。

現(xiàn)在讓我們?cè)倏匆欢未a:

a(); // 2 var a = function(){ // 看成是一個(gè)函數(shù)賦值給變量aconsole.log(1) } a(); // 1 function a(){console.log(2) } a(); // 1

其實(shí)只是想告訴大家只有函數(shù)聲明才會(huì)提升函數(shù)表達(dá)式不會(huì)提升,所以在函數(shù)表達(dá)式后面的代碼會(huì)輸出1,因?yàn)樽兞縜賦值后把提升的函數(shù)a覆蓋了。詳細(xì)過程如下:

function a(){ // 函數(shù)提升 console.log(2) } var a; // 變量提升 a(); // 2 a = function(){ // 變量a賦值后覆蓋上面的函數(shù)a console.log(1) } a(); // 1 a(); // 1

再看一段代碼:

a(); function a(){ console.log(1) } function a(){ console.log(2) }

打印的是2,道理很簡(jiǎn)單先聲明的會(huì)被后聲明的覆蓋。

總結(jié)

到此這篇關(guān)于JavaScript中變量提升和函數(shù)提升的文章就介紹到這了,更多相關(guān)js變量提升和函數(shù)提升內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 防水套管|柔性防水套管|伸缩器|伸缩接头|传力接头-河南伟创管道 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | ptc_浴霸_大巴_干衣机_呼吸机_毛巾架_电动车加热器-上海帕克 | 河南砖机首页-全自动液压免烧砖机,小型砌块水泥砖机厂家[十年老厂] | 外观设计_设备外观设计_外观设计公司_产品外观设计_机械设备外观设计_东莞工业设计公司-意品深蓝 | 长沙网站建设制作「网站优化推广」-网页设计公司-速马科技官网 | 石牌坊价格石牌坊雕刻制作_石雕牌坊牌楼石栏杆厂家_山东嘉祥石雕有限公司 | 钢化玻璃膜|手机钢化膜|钢化膜厂家|手机保护膜-【东莞市大象电子科技有限公司】 | 护栏打桩机-打桩机厂家-恒新重工| 智能案卷柜_卷宗柜_钥匙柜_文件流转柜_装备柜_浙江福源智能科技有限公司 | 铝合金脚手架厂家-专注高空作业平台-深圳腾达安全科技 | 长沙一级消防工程公司_智能化弱电_机电安装_亮化工程专业施工承包_湖南公共安全工程有限公司 | Maneurop/美优乐压缩机,活塞压缩机,型号规格,技术参数,尺寸图片,价格经销商 | 浴室柜-浴室镜厂家-YINAISI · 意大利设计师品牌 | 咿耐斯 |-浙江台州市丰源卫浴有限公司 | 郑州爱婴幼师学校_专业幼师培训_托育师培训_幼儿教育培训学校 | 工业洗衣机_工业洗涤设备_上海力净工业洗衣机厂家-洗涤设备首页 bkzzy在职研究生网 - 在职研究生招生信息咨询平台 | 磁力抛光机_磁力研磨机_磁力去毛刺机-冠古设备厂家|维修|租赁【官网】 | 上海乾拓贸易有限公司-日本SMC电磁阀_德国FESTO电磁阀_德国FESTO气缸 | HYDAC过滤器,HYDAC滤芯,现货ATOS油泵,ATOS比例阀-东莞市广联自动化科技有限公司 | 河南包装袋厂家_河南真空袋批发价格_河南服装袋定制-恒源达包装制品 | 选矿设备,选矿生产线,选矿工艺,选矿技术-昆明昆重矿山机械 | 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 粉丝机械,粉丝烘干机,粉丝生产线-招远市远东粉丝机械有限公司 | 小青瓦丨古建筑瓦丨青瓦厂家-宜兴市徽派古典建筑材料有限公司 | 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 空压机网_《压缩机》杂志| 土壤墒情监测站_土壤墒情监测仪_土壤墒情监测系统_管式土壤墒情站-山东风途物联网 | 深圳市八百通智能技术有限公司官方网站| 折弯机-刨槽机-数控折弯机-数控刨槽机-数控折弯机厂家-深圳豐科机械有限公司 | 青州搬家公司电话_青州搬家公司哪家好「鸿喜」青州搬家 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 灌装封尾机_胶水灌装机_软管灌装封尾机_无锡和博自动化机械制造有限公司 | 自动配料系统_称重配料控制系统厂家 | 碳纤维布-植筋胶-灌缝胶-固特嘉加固材料公司| 安规_综合测试仪,电器安全性能综合测试仪,低压母线槽安规综合测试仪-青岛合众电子有限公司 | 生物除臭剂-除味剂-植物-污水除臭剂厂家-携葵环保有限公司 | 2025黄道吉日查询、吉时查询、老黄历查询平台- 黄道吉日查询网 | hdpe土工膜-防渗膜-复合土工膜-长丝土工布价格-厂家直销「恒阳新材料」-山东恒阳新材料有限公司 ETFE膜结构_PTFE膜结构_空间钢结构_膜结构_张拉膜_浙江萬豪空间结构集团有限公司 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 贴片电感_贴片功率电感_贴片绕线电感_深圳市百斯特电子有限公司 贴片电容代理-三星电容-村田电容-风华电容-国巨电容-深圳市昂洋科技有限公司 | 国产离子色谱仪,红外分光测油仪,自动烟尘烟气测试仪-青岛埃仑通用科技有限公司 | 考勤系统_考勤管理系统_网络考勤软件_政企|集团|工厂复杂考勤工时统计排班管理系统_天时考勤 |