首頁  >  文章  >  web前端  >  javascript Function函數理解與實戰

javascript Function函數理解與實戰

小云云
小云云原創
2018-01-03 10:52:531328瀏覽

Function函數是javascript的基礎也是實現功能的一個引爆點,我們透過實例分析讓你對Function函數有一個更深刻的理解以及在實際中的用法講解。本文主要為大家帶來一片關於javascript的基礎教學內容,關於Function函數的訓練與理解,一起學習下。

Function 確實是物件。而我們定義的任何一個函數其實都是Function 物件的一個實例,也可以理解為指向Function 物件的一個實例.

既然是物件的一個實例,那肯定指向了Function 類型的一個引用. 既然指向了一個引用類型的內存地址,那你也可以簡單的把我們定義的函數理解為一個變量,這個變量指向了一個引用類型的地址,這個地址指向了Function 物件的一個實例.

既然我們定義的函數其實是一個變數,那這個函數實例位址可以同時指向多個變數.

看下面的程式碼:

var add = new Function("n", "m", "return n + m");

上面是標準的函數定義,呼叫了Function物件的建構子,這個建構子把前面的N個參數都預設為新函數的參數,直到最後一個參數認為是新函數的函數體.

從上面的語句中非常直觀的看到add這個變數指向了一個Function 類型的實例,但是這種命名方法非常繁瑣,等價於:

(1)函數表達式


var add=function(n,m){
return n+m;
}

(2)函數申明


function add(n,m){
return n+m;
}

由於javascript語言中的申明提前,所以一版提倡用第二種方法定義函數,關於函數申明提前單獨開闢一篇來說

但是第一種定義方法讓人很直觀看add 是一個指向函數實例的一個變數.

既然是一個變數,就可以賦值給其他變數,可以當做參數在函數中傳遞,也可以從函數回傳.

所以var add2=add3=add; 現在三個變數都指向了這個實例的參考, 現在add=null; 以後add2,add3 兩個函數完全可以使用不受影響,因為add移除函數物件的參考後指向了null的參考.所以根本不影響add2 和add3 兩個函數.

所以函數可以當做其他函數的參數傳入.

所以函數可以當做函數的回傳值回傳.

因為函數名稱只是一個指向函數實例的變數,所以javascript中函數不會有重載,因為相同的變數指向的是相同的引用位址.最後表示的還是同一個函數.

函數既然是物件的實例,那麼就應該有屬性,就應該有方法.所以javascript中的函數有屬性也有方法.

比較重要的4個屬性arguments , this , length , prototype

arguments 表示目前函數的參數類別數組,這個屬性很特殊,他自己還有個屬性叫callee ,

arguments.callee 屬性保存了一個指標,指標指向了擁有此arguments 屬性的函數實體(也就相當於函數名)

this屬性是當前環境,類似與C# 中的this,表示當前上下文

length 屬性表示當前函數接收最大參數個數

prototype 表示該函數的原型,也就是把物件實例的方法完整的保存下來,換句話說就是原型上的方法都繼承下來了.比如toString() valueOf () 等.

接下來,我們來看看function函數種類

#普通函數:介紹普通函數的特性:同名覆寫、arguments物件、預設回傳值等。


function ShowName(name) {
 alert(name);
}

匿名函數:介紹匿名函數的特性:變數匿名函數、無名稱匿名函數。


//变量匿名函数,左侧可以为变量、事件等
var anonymousNormal = function (p1, p2) {
 alert(p1+p2);
}
anonymousNormal(3,6);//输出9

閉包函數:介紹閉包函數的特性。


function funA() {
 var i = 0;
 function funB() { //闭包函数funB
  i++;
  alert(i)
 }
 return funB;
}
var allShowA = funA(); //全局变量引用:累加输出1,2,3,4等
 
function partShowA() {
 var showa = funA();//局部变量引用:只输出1
 showa();
}

相關推薦:

register_shutdown_function函數的詳細介紹

javascript Function函數理解與實戰_基礎知識

Javascript中function函數bind方法實例用法詳解

以上是javascript Function函數理解與實戰的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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