搜尋
首頁web前端js教程javascript學習筆記(四)function函數部分_基礎知識

函數是由事件驅動的或是當它被呼叫時執行的可重複使用的程式碼區塊。
Jscript 支援兩種函數:一類是語言內部的函數(如eval() ),另一類是自己建立的。

在 JavaScript 函數內部宣告的變數(使用 var)是局部變量,所以只能在函數內部存取它。 (此變數的作用域是局部的)。

您可以在不同的函數中使用名稱相同的局部變量,因為只有宣告過該變數的函數才能辨識出該變數。

函數的呼叫方式

1、普通呼叫:functionName(實際參數...)

2、透過指向函數的變數去呼叫:  

var  myVar = 函數名稱;

myVar(實際參數...);

傳回函數的函數

  1. 當函數無明確傳回值時,傳回的值就是"undefined"。

  2. 當函數有回傳值時,傳回值是什麼就會回傳什麼。

我們可以透過使用 return 語句實作將函數傳回呼叫它的地方。

使用 return 語句時,函數會停止執行,並傳回指定的值。

函數通常會回傳一個唯一值,那麼這個值也可能是另一個函數:

複製程式碼 程式碼如下:


在這裡,我們只需將返回值賦值給某個變量,然後就可以像使用一般函數那樣調用它了:

複製程式碼 程式碼如下:


如果想讓傳回的函數立即執行,也可以使用box()()來執行這段程式碼。

ECMAScript所有函數的參數都是按值傳遞的,言下之意就是參數不會按引用傳遞。

PS:如果存在按引用傳遞的話,那麼函數裡的那個變數將會是全域變量,在外部也可以存取。

(1)值類型:數值、布林值、null、undefined。
(2)引用類型:物件、陣​​列、函數。

引用類型值:指的是那些保存在堆內存中的對象,意思是,變量中保存的實際上只是一個指針,這個指針執行內存中的另一個位置,由該位置保存對象;
建立匿名函數

複製程式碼 程式碼如下:

function(){
return ‘Lee';     //單獨的匿名函數是無法運作的,就算能運作也無法調用,因為沒有名字
}

這種匿名函數的用法在JQuery中非常多。直接聲明一個匿名函數,立即使用。用匿名函數的好處就是省得定義一個用一次就不用的函數,而且免了命名衝突的問題,js中沒有命名空間的概念,因此很容易函數名字衝突,一旦命名衝突以最後聲明的為準。

透過自我執行來執行匿名函數:

複製程式碼 程式碼如下:

//透過自我執行來執行匿名函數


把匿名函數自我執行的回傳值賦給變數:

複製程式碼 程式碼如下:

//把匿名函數自我執行的回傳值賦給變數

   

自我執行匿名函數的傳參:

複製程式碼 程式碼如下:

//自我執行匿名函數的傳參

   

javascript建立動態函數:

  JavaScript支援建立動態函數,動態函數必須用Function物件來定義(Function是javascript中的一個對象,是固定不變的,規定Function對象的"F"必須大寫,當是function的時候,我們知道是定義函數的時候所使用的一個關鍵字:function funName(x,y),當是Function的時候(F大寫的時候),我們知道是javascript中的物件)

建立動態函數的基本格式:var 變數名稱 = new Function("參數1","參數2","參數n","執行語句");
看下面的一段程式碼:

複製程式碼 程式碼如下:

   

square是動態創建的函數,在Function物件後面的括號裡的每一部分內容都必須是字串形式的,也就是說都必須用引號(""或者是'')括起來

這段程式碼:

var square = new Function ("x","y","var sum ; sum = x y;return sum;");
和下面這段程式碼:

複製程式碼 程式碼如下:

function square (x,y){
          var sum;
          sum = x y;
          return sum;
     }

是一摸一樣的,只不過一個是動態函數,一個是靜態函數。
我們為什麼要把程式碼分成一小段一小段的程式碼呢? ,把一個字串分成了若干個獨立的字串的優點就在於我們可以透過修改其中的某些字串來隨時改變函數的作用。

回呼函數

回呼就是一個函數的呼叫過程。那就從理解這個呼叫過程開始吧。函數a有一個參數,這個參數是個函數b,當函數a執行完以後執行函數b。那麼這個過程就叫回調。

其實中文也很好理解:回調,回調,就是回頭呼叫的意思。函數a的事先幹完,回頭再呼叫函數b。

這裡必須清楚一點:函數b是你以參數形式傳給函數a的,那麼函數b就叫回呼函數。

在jquery裡的絕大多數效果函數都涉及callback函數。 jquery效果函數
例如:

複製程式碼 程式碼如下:


這裡的callback function換成實例可以是:

複製程式碼 程式碼如下:


Callback其實是,當一個函數執行完後,現執行的那個函數就是所謂的callback函數。怎麼樣?很好理解吧…

方法和函數的差別

複製程式碼 程式碼如下:

var arr = [1,2,3,4,5]
var a =12;   // 變項:自由的
arr.a= 5;     //屬性:屬於一個物件
function show()     //函數:自由的
{
     alert(‘a');
}
arr.fn = function()   //方法:屬於一個物件
{
     alert(‘b');
}

其實方法就是函數,只不過方法是有所屬的物件。

我們所熟知的,將函數綁定到 click 事件
語法:

$(selector).click(function)
參數 描述
function 可選。規定當發生 click 事件時執行的函數。
這種形式在jquery中經常見到。它是將function當做該方法的參數,並為該方法添加一個事件處理函數。

js全域函數

全域函數與內建物件的屬性或方法不是一個概念。全域函數它不屬於任何一個內建物件。
JavaScript 中包含以下 7 個全域函數,用於完成一些常用的功能:

escape( )、eval( )、isFinite( )、isNaN( )、parseFloat( )、
parseInt( )、unescape( )。
函數的幾個作用

作為一個類別構造器使用

複製程式碼 程式碼如下:

function class(){}
class.prototype={};
var item=new class();

作為閉包使用

複製程式碼 程式碼如下:

(function(){
//獨立作用域
})();

作為建構子呼叫

所謂建構函數,就是透過這個函數產生一個新物件(object)。

複製程式碼 程式碼如下:


可以使用 new 運算子結合像 Object()、Date() 和 Function() 這樣的預先定義的建構子來建立物件並對其初始化。物件導向的程式設計其強有力的特徵是定義自訂建構函數以建立腳本中使用的自訂物件的能力。創建了自訂的建構函數,這樣就可以建立具有已定義屬性的物件。下面是自訂函數的範例(注意 this 關鍵字的使用)。

複製程式碼 程式碼如下:

function Circle (xPoint, yPoint, radius) {
    this.x = xPoint;  // 圓心的 x 座標。
    this.y = yPoint;  // 圓心的 y 座標。
    this.r = radius;  // 圓的半徑。
}

呼叫 Circle 建構函式時,給出圓心點的值和圓的半徑(所有這些元素是完全定義一個獨特的圓物件所必需的)。結束時 Circle 物件包含三個屬性。下面是如何例示 Circle 物件。

var aCircle = new Circle(5, 11, 99);
使用建構器函數的好處在於,它可以再建立物件時接收一些參數。

複製程式碼 程式碼如下:



依照慣例,我們應該將構造器函數的首字母大寫,以便顯著地區別於一般的函數。

以下兩種形式的定義函數方式是等價的。

複製程式碼 程式碼如下:


這裡明確定義了一個變數test,他的初始值被給了一個function實體

複製程式碼 程式碼如下:


看看下面這種定義式函數形式:

複製程式碼 程式碼如下:


很顯然,第一個函數並沒有起到作用,很奇怪不是嗎?我們知道,javascript解析引擎並不是一行一行地執行程式碼,而是一段一段地執行程式碼。在同一段程式的分析執行中,定義式的函數語句會被優先執行,所以第一個定義的程式碼邏輯已經被第二個覆蓋了,所以兩次呼叫相同函數,只會執行第二個。

作為值的函數

函數在js中不僅是一種語法,也是一個值。也就是說可以將函數賦值給變量,儲存在物件的屬性或數組的元素中,作為參數傳入另一個函數中。
函數的名字實際上是看不見的,它只是變數的名字,這個變數指涉函數物件

複製程式碼 程式碼如下:


除了可以將函數賦值給變量,同樣可以將函數賦值給物件的屬性,當函數作為物件的屬性呼叫時,函數就稱為方法

複製程式碼 程式碼如下:


prototype屬性

每一個函數都包含prototype屬性,這個屬性指向一個物件的引用,這個物件稱為原型物件。
詳見:javascript學習筆記(五)原型與原型鏈

高階函數

這裡的高階函數可不是高數裡的那個高階函數,所謂高階函數就是操作函數的函數,它接收一個或多個函數作為參數,並傳回新函數

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
Python vs. JavaScript:開發人員的比較分析Python vs. JavaScript:開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型,適合科學計算和數據分析。 2.JavaScript採用弱類型,廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢,選擇時應根據項目需求決定。

Python vs. JavaScript:選擇合適的工具Python vs. JavaScript:選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型:1)數據科學和自動化任務選擇Python;2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞,而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript:了解每個的優勢Python和JavaScript:了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢,選擇取決於項目需求和個人偏好。 1.Python易學,語法簡潔,適用於數據科學和後端開發,但執行速度較慢。 2.JavaScript在前端開發中無處不在,異步編程能力強,Node.js使其適用於全棧開發,但語法可能複雜且易出錯。

JavaScript的核心:它是在C還是C上構建的?JavaScript的核心:它是在C還是C上構建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1)JavascriptwasdesignedAsignedAsalightWeight,drackendedlanguageforwebbrowsers.2)Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers,典型地,替代品。

JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

JavaScript,C和瀏覽器之間的關係JavaScript,C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪,JavaScript、C 和瀏覽器之間到底有什麼關係?它們之間看似毫無關聯,但實際上,它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章,你將了解到JavaScript如何在瀏覽器中運行,C 在瀏覽器引擎中的作用,以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道,JavaScript是前端開發的核心語言,它直接在瀏覽器中運行,讓網頁變得生動有趣。你是否曾經想過,為什麼JavaScr

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )專業的PHP整合開發工具