深入淺析JavaScript中的Function類型，javascriptfunction

深入淺析JavaScript中的Function類型，javascriptfunction

Function是javascript裡最常用的一個概念，javascript裡的function是最容易入手的一個功能，但它也是javascript最難理解最難掌握的一個概念。

1. Function類型是js中參考型別之一，每個函數實際上都是Function類型的執行個體對象，具有自己的屬性和方法。正因為函數式對象，所以函數名實際上也是一個指向函數對象的指標。

2. 常用的函數定義方式

1. 函式宣告：

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

2. 運算式：

var sum = function(){return a+b; }; //注意分號　//兩種方式的區別：　//解譯器會率先讀取函式宣告，並使其在執行之前可以訪問，而使用運算式則必須等到解析器執行到它所在的程式碼，才會真正被解釋執行（變數聲明提前，而值留在原地）alert (sum (10 ,10));function sum(a ,b){　　return a+b;}//↑上面的代碼會正常執行，因為在代碼執行前，解析器通過函式宣告提升，讀取並將函式宣告添加到執行環境中，放到代碼樹的頂部alert (typeof sum);alert(sum(10 , 10));var sum = function (a ,b){　　return a+b;}//↑報錯，原因在於函數位於一個初始化語句中，不是一個函式宣告，不會被提前，而只會把var sum提前，用typeof操作符顯示sum是undefined，所以報錯

3. 函數名僅僅儲存指向函數對象的指標，因此函數名與包含對象指標的其他變數沒什麼不同，也就是說，一個函數對象可以有多個名字：

function sum(a , b ){return a+b;}console.log(sum(2 ,3)); //5var anotherSum = sum; //變數anotherSum也指向了同一個函數對象console.log(anotherSum(4 , 5)); //9sum = null; //sum變數不再儲存函數對象的指標了console.log(anotherSum(1 , 3)); //anotherSum這個變數仍能調用

4. JS為何沒有重載這個概念。

function add(a){return a+3 ;}function add(a){return a+5;}var result = add(3); //8//兩個函數同名了，結果只能是後一個函數覆蓋前一個，所以不能重載

5. 函數的內部屬性：函數內部，有兩個特殊的對象，arguments和this

　　1. arguments：

　　　　arguments是個類數組對象，包含著傳入函數的所有參數，這個對象有一個叫callee的屬性，屬性值是一個指標，指向擁有這個arguments對象的函數本身

function foo (){var a =arguments.callee; return a.toString();}foo();/*返回結果：　　"function sum(){　　var a =arguments.callee; 　　return a.toString();　　}"也就是說，一個函數內部，arguments.callee指的就是這個函數本身。這個函數在遞迴調用時有點用，有許多缺陷，在ES5strict 模式被移除*/

　　2. this：簡單來說，this指的就是函數執行的環境對象，在哪個對象中執行，this就指哪個對象。展開來說比較複雜，單開一篇

//TODO:

　　3. ES5規範了函數的另一個屬性：caller，這個函數屬性指的是調用當前函數的函數

function inner(){console.log(inner.caller);} function outer(){inner();}outer(); //function outer(){inner();}

　　4. length屬性：表示函數希望接受的參數個數

function add(a ,b ,c){return a+b+c;}add.length; //3

　　5. 著名的prototype屬性，簡單來說，是一個對象，是通過調用建構函式而建立的一個對象，包含可以由特定類型的所有執行個體共用的屬性和方法。展開來說比較複雜，單開一篇

//TODO：

6. 函數的兩個方法：call()和apply(),作用都是在特定的範圍中調用函數，實際上就是設定函數內部的this值

　　1. call():與apply()方法類似，區別在接收參數的方式不同，參數必須逐個列出來。

　　2. apply()：接收兩個參數，一個是函數啟動並執行範圍，另一個是參數數組，可以是數組，也可以是arguments這個類數組對象

function sum(a , b){return a+b;}function callSum(a , b){return sum.apply(this , arguments);}//第二個參數是一個類數組對象argumentsfunction callSum1(a , b){return sum.apply(this, [a , b]);} //第二個參數是一個數組console.log(callSum(2 , 3)); //5 console.log(callSum1(3 ,5)); //8

　　3. 傳遞參數並調用函數並非call()和apply()的用武之地，二者真正強大的地方是擴充函數啟動並執行範圍

var color = 'red';var obj = {color :'blue' }function foo(){console.log(this.color); }foo(); //'red'foo.call(this);//'red'foo.call(obj); //'blue'//最後一次調用foo()函數的執行環境變了，其中的this指向了obj對象，所以是'blue'

　　　使用call()和apply()擴充範圍的最大好處，就是使對象與方法之間解耦

　　4. ES5定義了一個新方法：bind(),返回一個函數，這個函數中this值會被綁定到傳給bind()函數的值

var x = 9; var module = {x: 81,getX: function() { return this.x; }};module.getX(); // 81var retrieveX = module.getX;retrieveX(); // 9, 因為在這種情況下, "this" 指向全域變數var boundGetX = retrieveX.bind(module);//把retrieveX()函數中的this永遠與module綁定，再調用這個函數永遠都是在module對象中運行boundGetX(); // 81

以上所述是小編給大家介紹的深入淺析JavaScript中的Function類型介紹，希望對大家有所協助，如果大家想瞭解更多內容，敬請關注幫客之家。