深入淺析JavaScript中的Function類型

更新時間：2016年07月09日 09:41:51 作者：chaos_JS

Function是javascript里最常用的一個概念，javascript里的function是最容易入手的一個功能，但它也是javascript最難理解最難掌握的一個概念。這篇文章主要介紹了JavaScript中的Function類型的相關(guān)資料，一起看下吧

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

1. Function類型是js中引用類型之一，每個函數(shù)實際上都是Function類型的實例對象，具有自己的屬性和方法。正因為函數(shù)式對象，所以函數(shù)名實際上也是一個指向函數(shù)對象的指針。

2. 常用的函數(shù)定義方式

1. 函數(shù)聲明：

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

2. 表達式：

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

3. 函數(shù)名僅僅保存指向函數(shù)對象的指針，因此函數(shù)名與包含對象指針的其他變量沒什么不同，也就是說，一個函數(shù)對象可以有多個名字：

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

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

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

5. 函數(shù)的內(nèi)部屬性：函數(shù)內(nèi)部，有兩個特殊的對象，arguments和this

　　1. arguments：

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

function foo (){
var a =arguments.callee; 
return a.toString();
}
foo();
/*
返回結(jié)果：
　　"function sum(){
　　var a =arguments.callee; 
　　return a.toString();
　　}"
也就是說，一個函數(shù)內(nèi)部，arguments.callee指的就是這個函數(shù)本身。這個函數(shù)在遞歸調(diào)用時有點用，有許多缺陷，在ES5嚴格模式被移除
*/

　　2. this：簡單來說，this指的就是函數(shù)執(zhí)行的環(huán)境對象，在哪個對象中執(zhí)行，this就指哪個對象。展開來說比較復雜，單開一篇

//TODO:

　　3. ES5規(guī)范了函數(shù)的另一個屬性：caller，這個函數(shù)屬性指的是調(diào)用當前函數(shù)的函數(shù)

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

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

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

　　5. 著名的prototype屬性，簡單來說，是一個對象，是通過調(diào)用構(gòu)造函數(shù)而創(chuàng)建的一個對象，包含可以由特定類型的所有實例共享的屬性和方法。展開來說比較復雜，單開一篇

//TODO：

6. 函數(shù)的兩個方法：call()和apply(),作用都是在特定的作用域中調(diào)用函數(shù)，實際上就是設置函數(shù)內(nèi)部的this值

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

　　2. apply()：接收兩個參數(shù)，一個是函數(shù)運行的作用域，另一個是參數(shù)數(shù)組，可以是數(shù)組，也可以是arguments這個類數(shù)組對象

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

　　3. 傳遞參數(shù)并調(diào)用函數(shù)并非call()和apply()的用武之地，二者真正強大的地方是擴充函數(shù)運行的作用域

var color = 'red';
var obj = {
color :'blue' 
}
function foo(){
console.log(this.color); 
}
foo(); //'red'
foo.call(this);//'red'
foo.call(obj); //'blue'
//最后一次調(diào)用foo()函數(shù)的執(zhí)行環(huán)境變了，其中的this指向了obj對象，所以是'blue'

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

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

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

以上所述是小編給大家介紹的深入淺析JavaScript中的Function類型介紹，希望對大家有所幫助，如果大家想了解更多內(nèi)容，敬請關(guān)注腳本之家。

您可能感興趣的文章: