JavaScript基礎學習-函數及作用域

来源:http://www.cnblogs.com/wlf1112/archive/2016/12/29/6233706.html
-Advertisement-
Play Games

函數和作用域是JavaScript的重要組成部分,我們在使用JavaScript編寫程式的過程中經常要用到這兩部分內容,作為初學者,我經常有困惑,藉助寫此博文來鞏固下之前學習的內容。 (一)JavaScript函數 JavaScript函數是指一個特定代碼塊,可能包含多條語句,可以通過名字來供其他語 ...


函數和作用域是JavaScript的重要組成部分,我們在使用JavaScript編寫程式的過程中經常要用到這兩部分內容,作為初學者,我經常有困惑,藉助寫此博文來鞏固下之前學習的內容。

(一)JavaScript函數

JavaScript函數是指一個特定代碼塊,可能包含多條語句,可以通過名字來供其他語句調用以執行函數包含的代碼語句。

1.JavaScript創建函數的方法有兩種:

  • 函數聲明:

function funcDeclaration(){ return 'A is a function'; }

  • 函數表達式:

var funExpression=function(){ return 'A is a function '; }

上述函數聲明和函數表達式的區別(註明:翻譯自:不同的方式來寫一個函數)在:

JavaScript解析器中存在一種變數聲明被提升(hosting)的機制,也就是說變數(函數)的聲明會被提升到作用域的最前面,即使寫代碼的時候是寫在最後面,也還是會被提升至最前面。

例如以下代碼段:

alert(foo); // function foo() {}
alert(bar); // undefined
function foo() {}
var bar = function bar_fn() {};
alert(foo); // function foo() {}
alert(bar); // function bar_fn() {}

輸出結果分別是function foo() {}undefinedfunction foo() {}function bar_fn() {}

可以看到foo 的聲明寫在alert之後,仍然可以被正確調用,因為JavaScript解釋器會將其提升到alert前面,而以函數表達式創建的函數bar則不享受此待遇。

所以,JavaScript 引擎執行以上代碼的順序可能是這樣的:

  • 創建變數foobar,並將它們都賦值為undefined
  • 創建函數 foo 的函數體,並將其賦值給變數foo
  • 執行前面的兩個 alert。
  • 創建函數 bar_fn ,並將其賦值給 bar
  • 執行後面的兩個 alert。

2.函數的參數

在調用函數時,你可以向其傳遞值,這些值被稱為參數。

function printName(name){
    console.log(name);
}

printName('Byron');
printName('Casper);

其中name是形參,'Byron'和'Casper'是實參。

說到函數的參數,我們不得不提到arguments。此處涉及的內容有點多,請看客們參考樓主之前轉載的javascript arguments

3.函數重載

重載是很多面向對象語言實現多態性的手段之一,在靜態語言中確定一個函數的手段是靠方法簽名--函數名+參數列表,也就是說相同名字的函數參數個數不同或者順序不同都被認為是不同的函數,成為函數重載。

在JavaScript中沒有函數重載的概念,函數通過名字確定唯一性,參數不同也被認為是相同的函數,後面的覆蓋前面的。

4.返回值

有時候我們希望在函數執行後給我們一個反饋,就像表達式一樣,給我們個結果,我們可以通過return來實現

function fn(a, b){
    a++;
    b++;
    return a + b;
}

var result = fn(2, 3);
conslole.log(result);

這樣我們就能拿到函數希望給我們的反饋了,調用return後,函數立即終端並返回結果,即使後面還有語句也不在執行。其實我們不寫return語句,函數也會預設給我們返回undefined

5.命名衝突

當在同一個作用域內定義了名字相同的變數和方法的話,無論其順序如何,變數的賦值會覆蓋方法的賦值。

var fn = 3;
function fn(){}

console.log(fn); // 3

當函數執行有命名衝突的時候,函數執行時載入順序是 變數、函數、參數,典型例子如下:

function fn(fn){
  console.log(fn);

  var fn = 3;
  console.log(fn);
}

fn(10); 輸出結果為:10 3

(二)函數作用域

在JavaScript中,變數的作用域有全局作用域和局部作用域兩種。

說到這裡,我們不得不提下JavaScript中的作用域鏈。

在JavaScript中,函數也是對象,實際上,JavaScript裡面一切都是對象。函數對象和其他對象一樣。

JavaScript中的函數運行在它們被定義的作用域里,而不是它們被執行的作用域里。  ----JavaScript權威指南

JavaScript的作用域的是實現和C/C++不同,並非用“堆棧”方式,而是使用列表,具體過程如下(EMA262中所述):

  • 任何執行上下文時的作用域,都是由作用域鏈(scope chain)來實現的;

  • 在一個函數被定義的時候,會將它定義時刻的scope chain鏈接到這個函數對象的[[scope]]屬性;

  • 在一個函數對象被調用的時候,會創建一個活動對象(也就是一個對象),然後對於每一個函數的形參,都命名為該活動對象的命名屬性,然後將這個活動對象做為此時的作用域鏈(scope chain)最前端,並將這個函數對象的[[scope]]加入到scope chain中。

參考:

1.JavaScript 開發進階:理解 JavaScript 作用域和作用域鏈

版權所有,如有轉載請註明來源




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

-Advertisement-
Play Games
更多相關文章
  • Ajax的概念 AJAX即“Asynchronous Javascript And XML”(非同步JavaScript和XML),是一種用於創建快速動態網頁的技術。 動態網頁:是指可以通過伺服器語言結合資料庫隨時修改數據的網頁。 靜態網頁,隨著html代碼的生成,頁面的內容和顯示效果就基本上不會發生 ...
  • index - 選擇器的 index 位置 element - 當前的元素(也可使用 "this" 選擇器) ...
  • 1.開啟“QQ線上狀態”服務 http://jingyan.baidu.com/article/b24f6c823425a586bfe5da1f.html 2.選擇一種合適的用在網站中 http://www.lanrenzhijia.com/service/ ...
  • Canvas 的width height屬性 1、當使用width height屬性時,顯示正常不會被拉伸;如下 運行效果如下,為對角線 2、使用style時圖像會被拉伸(變形), 運行效果 如何理解???可以這麼理解———— Canvas 是一個畫板和一張畫紙,畫板相當於一個容器,畫圖/作業是在畫 ...
  • 通過css屬性 Cursor:url()自定義滑鼠游標。 url是自定義滑鼠圖標路徑 default指的是定義預設的游標(通常是一個箭頭),以防沒有由 URL 定義的可用游標。 圖標的格式根據不同的瀏覽器來分: IE支持cur,ani,ico這三種格式。 Google,FF支持bmp,gif,jpg ...
  • 什麼是 Page Visibility ? Page Visibility 即頁面可見性,通過 visibilityState 的值檢測頁面當前是否可見。當一個網站是可見或點擊選中的狀態時 Page Visibility API 可以讓你獲取到這種狀態,當用戶最小化網頁或者瀏覽到其他標簽的網頁時,A ...
  • 什麼是arguments arguments 是是JavaScript里的一個內置對象,它很古怪,也經常被人所忽視,但實際上是很重要的。所有主要的js函數庫都利用了arguments對象。所以agruments對象對於javascript程式員來說是必需熟悉的。 所有的函數都有屬於自己的一個argu ...
  • 在團隊協作中,為避免低級 Bug、產出風格統一的代碼,會預先制定編碼規範。使用 Lint 工具和代碼風格檢測工具,則可以輔助編碼規範執行,有效控制代碼質量。 在以前的項目中,我們選擇 JSHint 和 JSCS 結合使用,WebStorm 等開發環境已經支持這些工具,使用起來很順手。然而,最近使用 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...