首頁 web前端 js教程 比較常見的javascript定義函數的差異_javascript技巧

比較常見的javascript定義函數的差異_javascript技巧

May 16, 2016 pm 03:33 PM
javascript函數

比較常見的javascript中定義函數的差異主要透過以下三個面向給大家講解,需要的朋友參考下吧

1:呼叫關鍵字function來建構

  如:

function distance(x1,x2,y1,y2) 
  { 
    var dx=x2-x1; 
    var dy=y2-y1; 
    return Math.sqrt(dx*dx+dy*dy); 
  } 
登入後複製

2:使用Function()建構子

  如:

var f=new Function*"x","y","return x*y"); 
登入後複製

  這行程式碼建立了一個新函數,該函數和你所熟悉的語法定義的函數基本上時等價的:

function f(x,y) 
  { 
    return x*y; 
  } 
登入後複製

  Functino()建構子可以接受任意多個字串參數。它的最後一個參數時函數的主體,其中可以包含任何JavaScript語句,語句之間以分號分隔。其他的參數都是用來說明函數要定義的形式參數名的字串。如果你定義的函數沒有參數,那麼可以只給建構函式傳遞一個字串(即函數的主體)。

  注意,傳遞給建構函式Function()的參數中沒有一個用來說明它要建立的函式名稱。用Function()建構函數所建立的未命名函數有時會被成為「匿名函數」。

  你可能很想知道Function()建構子的用途是什麼。為什麼不能只用function語句來定義所有的函數呢?原因是Function()建構函數允許我們動態地建立和編譯一個函數,它不會將我們限制在function語句預先編譯的函數體中。這樣做帶來的負面影響效應就是每次呼叫一個函數時,Function()建構子都要對它進行編譯。因此,在循環體中或在經常使用的函數中,我們不應該頻繁地呼叫這個構造函數。

  使用Function()建構函數的另一個原因是它能夠將函數定義為JavaScript表達式的一部分,而不是將其定義一個語句,這種情況下使用它就顯得比較的方面,甚至可以說精緻。

3:函數直接量

  函數直接量是一個表達式,它可以定義匿名函數。函數直接量的語法和function語句非常相似,只不過它被用作表達式,而不是用作語句,也無需指定函數名。下面的三行程式碼分別使用function()語句、Funciont()建構子和函式直接量定義了三個基本上相同的函數:

function f(x){return x*x}; 
  var f=new Function("x","return x*x;"); 
  var f=function(x){reurn x*x}; 
登入後複製

   雖然函數直接量創建的是未命名函數,但是它的語法也規定它可以指定函數名,這在編寫調用自身的遞歸函數時非常有用。

  例如:

var f=function fact(x){if(x<=1)return 1;else return x*fact(x-1);}; 
登入後複製

  上面的程式碼定義了一個未命名函數,並對它的參考儲存在變數f中。它並沒有真正的創建一個名為fact()的函數,只是允許函數體用這個名字來引用自身。但是要注意,JavaScript1.5之前的版本中沒有正確實作這種命名的函數直接量。

  函式直接量的用法和用Function()建構子建立函式的方法非常相似。由於它們都是由JavaScript的表達式創建的,而不是由語句創建的,所以使用它們的方式也就更加靈活,尤其適用於那些只使用一次,而且無需命名的函數。例如,一個使用函數直接量表達式指定的函數可以儲存在一個變數中、傳遞給其他的函數甚至直接呼叫:

a[0]=function(x){return x*x;};//定义一个函数并保存它 
  a.sort(function(a,b){return a-b;});//定义一个函数;把它传递给另一个函数 
  var tensquared=(function(x){return x*x;})(10); 
登入後複製

  和Function()构造函数一样,函数直接量创建的是未命名函数,而且不会自动地将这个函数存储在属性中。但是,比起Function()构造函数来说,函数直接量有一个重要的优点。由Function()构造函数创建的函数的主体必须用一个字符串说明,用这种方式来表达一个长而复杂的函数是狠笨拙的。但是函数直接量的主体使用的却是标准的JavaScript语法。而且函数直接量只被解析一次,而作为字符串传递给Function()构造函数的JavaScript代码则在每次调用构造函数时只需被解析一次和编译一次。

     在JavaScript1.1中,可以使用构造函数Function()来定义函数,在JavaScript1.2和其后的版本中,还可以使用函数直接量来构造函数。你应该注意这两种方法之间的重要差别。

  首先,构造函数Function()允许在运行时动态地创建和编译JavaScript代码。但是函数直接量却是函数结构的一个静态部分,就像function语句一样。

  其次,作为第一个差别的必然结果,每次调用构造函数Function()时都会解析函数体并且创建一个新东汉数对象。如果对构造函数的调用出现在一个循环中,或者出现在一个经常被调用的函数中,这种方法的效率非常低。另一个方面,函数直接量或出现在循环和函数中的嵌套函数不是在每次调用时都被重新编译,而且每当遇到一个函数直接量时也不创建一个新的函数对象。

  Function()构造函数和函数之间量之间的第三点差别是,使用构造函数Function()创建的函数不使用词法作用域,相反的,它们总是被当作顶级函数来编译,就像下面代码所说明的那样:

 var y="global"; 
  function constructFunction() 
  { 
    var y="local"; 
    return new Function("return y");//不捕捉局部作用域。 
  } 
  //这行代码将显示"global",因为Function()构造函数返回的函数并不使用局部作用域。 
  //假如使用一个函数直接量,这行代码则可能显示"local"。 
  alert(constructFunction()); 
登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱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

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

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

JavaScript函數非同步程式設計:處理複雜任務的必備技巧 JavaScript函數非同步程式設計:處理複雜任務的必備技巧 Nov 18, 2023 am 10:06 AM

JavaScript函數非同步程式設計:處理複雜任務的必備技巧引言:在現代前端開發中,處理複雜任務已經成為了必不可少的一部分。而JavaScript函數非同步程式設計技巧則是解決這些複雜任務的關鍵。本文將介紹JavaScript函數非同步程式設計的基本概念和常用的實作方法,並提供具體的程式碼範例,幫助讀者更好地理解和使用這些技巧。一、非同步程式設計的基本概念在傳統的同步程式設計中,程式碼按

使用JavaScript函數實現網頁導航和路由 使用JavaScript函數實現網頁導航和路由 Nov 04, 2023 am 09:46 AM

在現代Web應用程式中,實現網頁導航與路由是十分重要的一環。利用JavaScript的函數來實現這個功能,可以讓我們的網路應用程式更加靈活、可擴展且使用者友好。本文將介紹如何使用JavaScript函數來實現網頁導航和路由,並提供具體的程式碼範例。實現網頁導航對於一個Web應用程式而言,網頁導航是使用者操作最頻繁的一個部分。當使用者點擊頁面上的

使用JavaScript函數實現資料視覺化的即時更新 使用JavaScript函數實現資料視覺化的即時更新 Nov 04, 2023 pm 03:30 PM

使用JavaScript函數實現資料視覺化的即時更新隨著資料科學和人工智慧的發展,資料視覺化已經成為了一種重要的資料分析和展示工具。透過視覺化數據,我們可以更直觀地理解數據之間的關係和趨勢。在Web開發中,JavaScript是一種常用的腳本語言,具備強大的資料處理和動態互動功能。本文將介紹如何使用JavaScript函數實現資料視覺化的即時更新,並展示具體

使用JavaScript函數實現圖片輪播和幻燈片效果 使用JavaScript函數實現圖片輪播和幻燈片效果 Nov 04, 2023 am 08:59 AM

JavaScript是一種腳本語言,可以用來為網頁加入互動效果。其中,圖片輪播和投影片效果是常見的網頁動畫效果,本文將介紹如何使用JavaScript函數實現這兩種效果,並提供具體程式碼範例。圖片輪播圖片輪播是一種將多張圖片依照一定的方式輪流播放的效果。在實作圖片輪播時,需要用到JavaScript的定時器和CSS樣式控制。 (1)準備工作首先,在HTML文件中

使用JavaScript函數實現使用者登入和權限驗證 使用JavaScript函數實現使用者登入和權限驗證 Nov 04, 2023 am 10:10 AM

使用JavaScript函數實現使用者登入和權限驗證隨著互聯網的發展,使用者登入和權限驗證成為了許多網站和應用程式必備的功能。為了保護使用者的資料安全和存取權限,我們需要使用一些技術和方法來驗證使用者的身份,並限制其存取的權限。 JavaScript作為一種廣泛使用的腳本語言,在前端開發中扮演著重要的角色。我們可以利用JavaScript函數來實現使用者登入和權限驗證功

使用JavaScript函數實作檔案上傳下載 使用JavaScript函數實作檔案上傳下載 Nov 04, 2023 am 08:30 AM

使用JavaScript函數實現文件上傳和下載隨著互聯網的發展和普及,文件上傳和下載成為了網頁應用中常見的功能之一。本文將介紹如何使用JavaScript函數來實作檔案上傳和下載的功能,並提供具體的程式碼範例。文件上傳文件上傳指的是將本機的文件透過網頁上傳到伺服器。 HTML5中提供了FileAPI用於處理文件的選擇和上傳。我們可以利用FileAPI中的Fi

使用JavaScript函數實現使用者互動和動態效果 使用JavaScript函數實現使用者互動和動態效果 Nov 03, 2023 pm 07:02 PM

使用JavaScript函數實現使用者互動和動態效果隨著現代網頁設計的發展,使用者互動和動態效果成為了吸引使用者眼球的關鍵。 JavaScript作為一種常用的腳本語言,具有強大的功能和靈活的特性,能夠實現各種各樣的使用者互動和動態效果。本文將介紹一些常見的JavaScript函數,並給出具體的程式碼範例。改變元素樣式(style)透過JavaScript函數能夠輕鬆改

使用JavaScript函數實現資料視覺化的動態更新 使用JavaScript函數實現資料視覺化的動態更新 Nov 03, 2023 pm 04:56 PM

使用JavaScript函數實現資料視覺化的動態更新資料視覺化是大數據時代中非常重要的一環,它能夠以直覺的方式展示數據,幫助人們更好地理解和分析數據。而JavaScript作為一種客戶端的腳本語言,能夠透過函數的方式來實現資料視覺化的動態更新。本文將介紹如何使用JavaScript函數來實現此功能,並提供具體的程式碼範例。一、資料視覺化基礎在開始編寫程式碼之前

See all articles