學習JS的心路歷程 函式(一)

2021-09-25 16:46:39 字數 1714 閱讀 7786

前幾天有間單提到該如何宣告函式及在hositing中會發生什麼事,但是函式的奧妙不僅於此。

身為乙個使用js的工程師,我們一定要熟悉函式到比戀人還熟!

這幾天將會把函式逐一扒開跟各位一起**其中的奧妙。

函式是頭等物件

這句話代表著函式與任何js物件共存,也被當成乙個物件。

函式可以被當成變數引用、用實值作宣告,或是作為函式引數傳遞。

//實質建立

function myfun(){}

//指派給變數、陣列或其他物件屬性

var myfun = function(){};

var myarr = ;

myarr.push(function(){});

var myobj = {};

myobj.funa = function(){};

//作為引數傳遞給其他函式

function myfun(val));

//作為函式的回傳值

function myfun()

//動態建立和指派屬性

var myfun = function(){};

myfun.data =「hola」;

回呼函式callback function

頭等物件的其中一樣特性,可以作為引數傳遞給函式,而在某個時間點,可能會呼叫這個被傳入的函式,這就是「回呼函式」的概念。

每當我們設定乙個準備在之後呼叫的函式,不論是透過瀏覽器的事件處理階段或是透過其他**,這個行為就是在設定乙個回呼函式。我們可以這樣解釋:這個被建立的函式,會在稍候某個適當的時機點,由其他**「回呼」(call back)。

這會或還是有點難以理解,不過你或許已經使用過回呼函式只是你不知道而已,不論是最簡單的按鈕按下執行程式還是從伺服器接收資料,這都是回呼函式!

我們來看乙個最簡單的示例:

var text = 'get text';

function unlessfun(callback){

console.log('in unlessfun');

return callback();

function gettext(){

console.log('in gettxt function');

return text;

unlessfun(gettext);

執行後會得到如下圖:

或許你認為我直接在unlessfun裡面印出text就好了啊,為什麼要用回呼函式多此一舉。

那也許接下來這個示例會讓你體驗到回呼函式的美好:

如果我們今天有一組數字[2,1,6,12,3,77,100,4]需要做比較大小,這時候可能很多人就會開始自己寫個演算法的函式,像是這樣:

var arr = [2,1,6,12,3,77,100,4];

function compare(val){

for(let i = 0;i也許你花了好幾天終於寫出了這個演算法,但是其實我們可以發現js早就幫你寫好了乙個sort()函式,

你可以拿來用,只需要寫好回呼函式:

var arr = [2,1,6,12,3,77,100,4];

arr.sort(function(a,b){

return a - b;

console.log(arr);//[1,2,3,4,6,12,77,100]

我們不需要考慮演算法的底層細節,js早就針對這些演算法函式進行最佳化了,沒有必要重複造輪子而且造出來的效能還不一定比較好,所以學好回呼函式並使用他們吧!

學JS的心路歷程 函式(三)this

this是什麼,取決於被呼叫的呼叫地點。昨天有提到說,呼叫函式時候會傳遞隱含引數 arguments和this並講解了arguments,今天我們就來 this吧!什麼是this 我們都會呼叫函式來使用,但有想過到底是從 呼叫到這個函式嗎?this通常被稱作函式背景空間 function conte...

學習react的心路歷程(一)

我是react小白,網上的react教程成堆成堆的,我就不在這裡寫什麼教程,巴拉巴拉以下我的學習 心得 我是在 技術胖 的帶領下學習的react,這個教程是小白也能輕鬆學習react。順便在這裡表達下自己學習時候的心情哈!啦啦啦 環境搭建 第一天學習,是沒有安裝react的,引用了外部檔案來搭建的環...

C 學習心路歷程

這裡只記錄c 的特色地方,想來本科專攻c 跟圖形程式設計,真心沒想到半路殺出來個unity還特麼用了c 所以嘛,最近惡補這方面的東西,把跟c 相似的地方看看就好,這裡把c 的好東東都記錄下,有一些還挺有逼格的說,希望能有幸成為高手!1 params關鍵字 本關鍵字在於可變長引數的利用,比如 stat...