深入理解js的變數提升和函數提升

来源:http://www.cnblogs.com/zhangxiaos/archive/2016/12/25/6215420.html
-Advertisement-
Play Games

一、變數提升 在ES6之前,JavaScript沒有塊級作用域(一對花括弧{}即為一個塊級作用域),只有全局作用域和函數作用域。變數提升即將變數聲明提升到它所在作用域的最開始的部分。上個簡歷的例子如: 之所以會是以上的列印結果,是由於js的變數提升,實際上上面的代碼是按照以下來執行的: 二、函數提升 ...


一、變數提升

  在ES6之前,JavaScript沒有塊級作用域(一對花括弧{}即為一個塊級作用域),只有全局作用域和函數作用域。變數提升即將變數聲明提升到它所在作用域的最開始的部分。上個簡歷的例子如:

	console.log(global); // undefined
	var global = 'global';
	console.log(global); // global

	function fn () {
	  console.log(a); // undefined
	  var a = 'aaa';
	  console.log(a); // aaa
	}
	fn();

  之所以會是以上的列印結果,是由於js的變數提升,實際上上面的代碼是按照以下來執行的:

	var global; // 變數提升,全局作用域範圍內,此時只是聲明,並沒有賦值
	console.log(global); // undefined
	global = 'global'; // 此時才賦值
	console.log(global); // 列印出global

	function fn () {
	  var a; // 變數提升,函數作用域範圍內
	  console.log(a);
	  a = 'aaa';
	  console.log(a);
	}
	fn();

二、函數提升

  js中創建函數有兩種方式:函數聲明式和函數字面量式。只有函數聲明才存在函數提升!如:

	console.log(f1); // function f1() {}	
	console.log(f2); // undefined	
	function f1() {}
	var f2 = function() {}

  只所以會有以上的列印結果,是由於js中的函數提升導致代碼實際上是按照以下來執行的:

	function f1() {} // 函數提升,整個代碼塊提升到文件的最開始
     console.log(f1); console.log(f2); var f2 = function() {}

  

結語:基本上就是這樣,要熟練掌握的話可以多做些練習,test:

	console.log(f1());	
	console.log(f2);	
	function f1() {console.log('aa')}
	var f2 = function() {}

 

	(function() {
	  console.log(a);
	  a = 'aaa';
	  var a = 'bbb';
	  console.log(a);
	})();

  

  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、this 在JavaScript中this表示:誰調用它,this就是誰。 JavaScript是由對象組成的,一切皆為對象,萬物皆為對象。this是一個動態的對象,根據調用的對象不同而發生變化,當然也可以使用call、apply修改this指向的對象。它代表函數運行時,自動生成的一個內部對象, ...
  • 一、游標 新增加not-allowed游標,不允許訪問 隱藏游標,在觸模應用上很有用,css2.1需要一個透明的圖片來實現,而css3直接用cursor:none即可。 完整代碼: 二、擴大熱區 應用在小按鈕的情況下,不好被滑鼠點擊到 代碼如下: 三、自定義覆選框 系統自帶覆選框美化 利用css3提 ...
  • 本人Sam。啟蒙微軟派,遁入前端教。已修煉後端技能、領域驅動設計、前端技能等近八餘載。擅長C#,領域驅動設計,必殺技為Javascript、Css。為領域驅動設計在前端教的應用而奮鬥。現將自我領悟的前端教技能秘笈總結如下: 上圖咯: 內功心法 前端教的三大內功秘笈:Html、Css、Javascri ...
  • 由於a標簽屬於內聯元素,無高度和寬度屬性,因此控制滑鼠經過狀態改變背景顏色時,僅在有文字的地方顯示背景顏色。解決的辦法是把a標簽變為塊級元素,display:block ...
  • 設置圖片和文字的垂直居中。vertical-align:middle;圖片豎向居中,然後文字就可以和圖片對齊。 ...
  • 本文系筆者學習原生javascript動效的筆記。內容基於某非著名培訓機構的視頻教程。並重新做了歸類整理。刪除了一些過時的內容。並重做了GIF圖,加上了自己的一些分析。 一. 運動學基礎 引子:從左到右的div 點擊按鈕,一個紅色div從左向右運動! 運動的要素在於一個絕對定位的主體,一個定時器。和 ...
  • 註意:leftBox和rightBox設置浮動之後脫離了普通的文檔流,不再占用原來文檔中的位置,因此無法把父div撐開。 解決的方法: ...
  • 自從威少砍下45+11+11的大號三雙之後,網上出現了各種各樣的神級段子,有一條是這樣的: 威少:Hey,哥們,最近過得咋樣! 濃眉:對方開啟了好友驗證,請先添加對方為好友 威少:。。。。。。 JRS:2333333 看到了一條比賽當天的數據統計:威少45+11+11,杜少32+8+3,伊巴卡19+ ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...