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

您的位置:首頁技術文章
文章詳情頁

JavaScript中變量提升和函數提升實例詳解

瀏覽:95日期:2023-05-31 16:35:53
js 執行 詞法分析階段:包括分析形參、分析變量聲明、分析函數聲明三個部分。通過詞法分析將我們寫的 js 代碼轉成可以執行的代碼。 執行階段變量提升 只有聲明被提升,初始化不會被提升 聲明會被提升到當前作用域的頂端

🌰 1:

console.log(num)var numnum = 6

預編譯之后

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

🌰 2:

num = 6console.log(num)var num

預編譯之后

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

🌰 3:

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

預編譯之后

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

🌰 1: 函數聲明可被提升

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

預編譯之后

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

🌰 2: 函數表達式不可被提升

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

預編譯之后

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()

預編譯之后:

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

🌰 1:

console.log(foo) // 會打印出函數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

預編譯之后

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

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

首先給出我的結論:函數提升優先級高于變量提升,且不會被同名變量聲明時覆蓋,但是會被同名變量賦值后覆蓋

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

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

首先變量和函數聲明都提升,但函數提升優先級高于變量,都提升后變量只是定義沒有賦值,所以輸出的是函數a。詳細過程如下:

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

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

現在讓我們再看一段代碼:

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

其實只是想告訴大家只有函數聲明才會提升函數表達式不會提升,所以在函數表達式后面的代碼會輸出1,因為變量a賦值后把提升的函數a覆蓋了。詳細過程如下:

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

再看一段代碼:

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

打印的是2,道理很簡單先聲明的會被后聲明的覆蓋。

總結

到此這篇關于JavaScript中變量提升和函數提升的文章就介紹到這了,更多相關js變量提升和函數提升內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網!

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 直流电能表-充电桩电能表-导轨式电能表-智能电能表-浙江科为电气有限公司 | 甲级防雷检测仪-乙级防雷检测仪厂家-上海胜绪电气有限公司 | 建大仁科-温湿度变送器|温湿度传感器|温湿度记录仪_厂家_价格-山东仁科 | 恒温恒湿试验箱_高低温试验箱_恒温恒湿箱-东莞市高天试验设备有限公司 | 热处理炉-退火炉-回火炉设备厂家-丹阳市电炉厂有限公司 | 氧化锆陶瓷_氧化锆陶瓷加工_氧化锆陶瓷生产厂家-康柏工业陶瓷有限公司 | 大巴租车平台承接包车,通勤班车,巴士租赁业务 - 鸿鸣巴士 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | PTFE接头|聚四氟乙烯螺丝|阀门|薄膜|消解罐|聚四氟乙烯球-嘉兴市方圆氟塑制品有限公司 | AGV无人叉车_激光叉车AGV_仓储AGV小车_AGV无人搬运车-南昌IKV机器人有限公司[官网] | 背压阀|减压器|不锈钢减压器|减压阀|卫生级背压阀|单向阀|背压阀厂家-上海沃原自控阀门有限公司 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 云南外加剂,云南速凝剂,云南外加剂代加工-普洱澜湄新材料科技有限公司 | 范秘书_懂你的范文小秘书| 缠绕机|缠绕膜包装机|缠绕包装机-上海晏陵智能设备有限公司 | 膜结构_ETFE膜结构_膜结构厂家_膜结构设计-深圳市烨兴智能空间技术有限公司 | 济南画室培训-美术高考培训-山东艺霖艺术培训画室 | UV-1800紫外光度计-紫外可见光度计厂家-翱艺仪器(上海)有限公司 | TPM咨询,精益生产管理,5S,6S现场管理培训_华谋咨询公司 | 澳洁干洗店加盟-洗衣店干洗连锁「澳洁干洗免费一对一贴心服务」 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 本安接线盒-本安电路用接线盒-本安分线盒-矿用电话接线盒-JHH生产厂家-宁波龙亿电子科技有限公司 | 我车网|我关心的汽车资讯_汽车图片_汽车生活! | 糖衣机,除尘式糖衣机,全自动糖衣机,泰州市长江制药机械有限公司 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 磨煤机配件-高铬辊套-高铬衬板-立磨辊套-盐山县宏润电力设备有限公司 | 糖衣机,除尘式糖衣机,全自动糖衣机,泰州市长江制药机械有限公司 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 模温机-油温机-电加热导热油炉-工业冷水机「欧诺智能」 | 三价铬_环保铬_环保电镀_东莞共盈新材料贸易有限公司 | 超声骨密度仪-骨密度检测仪-经颅多普勒-tcd仪_南京科进实业有限公司 | 精密模具加工制造 - 富东懿| 申江储气罐厂家,储气罐批发价格,储气罐规格-上海申江压力容器有限公司(厂) | 天津蒸汽/热水锅炉-电锅炉安装维修直销厂家-天津鑫淼暖通设备有限公司 | 中央空调温控器_风机盘管温控器_智能_液晶_三速开关面板-中央空调温控器厂家 | 企业管理培训,企业培训公开课,企业内训课程,企业培训师 - 名课堂企业管理培训网 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 猎头招聘_深圳猎头公司_知名猎头公司 | 陶氏道康宁消泡剂_瓦克消泡剂_蓝星_海明斯德谦_广百进口消泡剂 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 欧盟ce检测认证_reach检测报告_第三方检测中心-深圳市威腾检验技术有限公司 | 工业PH计|工业ph酸度计|在线PH计价格-合肥卓尔仪器仪表有限公司 济南画室培训-美术高考培训-山东艺霖艺术培训画室 | 纯水设备_苏州皙全超纯水设备水处理设备生产厂家 | 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 昆山新莱洁净应用材料股份有限公司-卫生级蝶阀,无菌取样阀,不锈钢隔膜阀,换向阀,离心泵 |