自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

什么是Javascript Hoisting?

開發(fā) 后端
Javascript是一門容易遭人誤解的語言,但是它的強(qiáng)大毋庸置疑。個(gè)人覺得,要想深入理解Javascript語言,首先必須對(duì)其基本的概念(例如:Scope,Closure,Hoisting等)要真正理解。今天想通過自己的理解來對(duì)Javascript Hoisting(國(guó)內(nèi)一般翻譯為 變量提升)做一個(gè)闡述

  Javascript是一門容易遭人誤解的語言,但是它的強(qiáng)大毋庸置疑。個(gè)人覺得,要想深入理解Javascript語言,首先必須對(duì)其基本的概念(例如:Scope,Closure,Hoisting等)要真正理解。今天想通過自己的理解來對(duì)Javascript Hoisting(國(guó)內(nèi)一般翻譯為 變量提升)做一個(gè)闡述:

  在解釋Javascript Hoisting之前,先看一下幾段代碼:

 1     //代碼段1--------------------------
 2     var myvar = '變量值'; 
 3     console.log(myvar); // 變量值
 4     //代碼段2--------------------------
 5     var myvar = '變量值';  
 6     (function() { 
 7       console.log(myvar); //變量值
 8     })();
 9     //代碼段3----------------------------
10     var myvar = '變量值'; 
11     (function() { 
12       console.log(myvar); // undefined 
13       var myvar = '內(nèi)部變量值'; 
14     })();    

  代碼段1會(huì)在控制臺(tái)打印出 變量值 ,很容易理解;代碼段2也會(huì)在控制臺(tái)打印出 變量值 ,Javascript編譯器首先在匿名函數(shù)內(nèi)部作用域(Scope)查看變量myvar是否聲明,發(fā)現(xiàn)沒有,就繼續(xù)向上一級(jí)的作用域(Scope)查看是否聲明 myvar,發(fā)現(xiàn)存在,即打印出該作用域的myvar值。但代碼段3只是對(duì)代碼段2做一個(gè)微調(diào),結(jié)果卻輸出了undefine?。?!

  在理解代碼段3之前,必須先理解Javascript Hoisting的概念。Javascript Hoisting:In javascript, every variable declaration is hoisted to the top of its declaration context.我的理解就是在Javascript語言中,變量的聲明(注意不包含變量初始化)會(huì)被提升(置頂)到聲明所在的上下文,也就是說,在變量的作用域內(nèi),不管變量在何處聲明,都會(huì)被提升到作用域的頂部,但是變量初始化的順序不變。

下圖的左邊和右邊的代碼輸出結(jié)構(gòu)是一樣的,左邊的代碼段在JS執(zhí)行時(shí),實(shí)際的執(zhí)行順序如右邊的代碼所示(JS編譯器會(huì)將變量聲明進(jìn)行提升處理)。

  理解了提升的概念之后,再回到開頭的代碼段3的理解中來,代碼段3和在被Hositing之后的代碼如下圖所示:

  二者輸出的結(jié)構(gòu)都為undefined!可理解為內(nèi)部變量myvar在匿名函數(shù)的內(nèi)***一行進(jìn)行變量聲明并賦值,但是JS解釋器會(huì)將變量聲明(不包含賦值)提升(Hositing)到匿名函數(shù)的***行(頂部),由于只是聲明myvar變量,在執(zhí)行console.log(myvar)語句時(shí),并未對(duì)myvar進(jìn)行賦值,所以JS輸出undefined。

  如果變量聲明未提升(Hositing)置頂,則應(yīng)該會(huì)報(bào)錯(cuò)誤。如下圖所示:

  下面給個(gè)測(cè)試題,來看看你對(duì)Hositing的概念是否理解:

1     //測(cè)試代碼----------------------
2     var myvar = '變量值'; 
3     (function() { 
4       console.log(myvar); // ?
5       myvar = '內(nèi)部變量值'; 
6     })();

  該代碼段應(yīng)該輸出什么值呢?

答案是 變量值。

責(zé)任編輯:李英杰 來源: 博客園
相關(guān)推薦

2011-11-11 15:47:22

JavaScript

2021-03-09 08:50:58

JavaScript前端作用域

2021-11-15 09:44:49

Webpack 前端 Scope Hois

2021-01-13 11:25:12

JavaScript閉包函數(shù)

2019-07-09 10:43:57

JavaScriptWeb前端

2021-03-20 22:46:22

IaaSSaaSPaaS

2020-08-07 07:05:48

JavaScript開發(fā)技術(shù)

2023-09-01 13:49:00

內(nèi)存進(jìn)程線程

2023-06-26 23:48:42

Javascript函數(shù)

2023-05-23 16:27:43

Javascript形參實(shí)參

2025-03-17 08:30:00

JavaScript循環(huán)代碼

2023-05-24 16:15:08

Javascript參數(shù)

2020-07-14 14:59:00

控制反轉(zhuǎn)依賴注入容器

2021-06-04 11:10:04

JavaScript開發(fā)代碼

2017-12-19 21:29:58

物聯(lián)網(wǎng)區(qū)塊鏈大數(shù)據(jù)

2020-11-20 10:51:03

云計(jì)算

2015-10-29 14:29:48

javascriptthis指向

2018-01-30 11:17:56

集群分布式SOA?

2017-10-09 18:21:20

JavaScriptES6ES8

2010-08-26 09:27:53

DHCP服務(wù)器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)