深入淺析JavaScript中的Function類型
來源:易賢網 閱讀:796 次 日期:2016-07-25 15:17:35
溫馨提示:易賢網小編為您整理了“深入淺析JavaScript中的Function類型”,方便廣大網友查閱!

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)); //5

var anotherSum = sum; //變量anotherSum也指向了同一個函數對象

console.log(anotherSum(4 , 5)); //9

sum = 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指的就是這個函數本身。這個函數在遞歸調用時有點用,有許多缺陷,在ES5嚴格模式被移除

*/

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);

}//第二個參數是一個類數組對象arguments

function 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(); // 81

var retrieveX = module.getX;

retrieveX(); // 9, 因為在這種情況下, "this" 指向全局變量

var boundGetX = retrieveX.bind(module);//把retrieveX()函數中的this永遠與module綁定,再調用這個函數永遠都是在module對象中運行

boundGetX(); // 81

以上所述是小編給大家介紹的深入淺析JavaScript中的Function類型介紹,希望對大家有所幫助

更多信息請查看網絡編程
易賢網手機網站地址:深入淺析JavaScript中的Function類型
由于各方面情況的不斷調整與變化,易賢網提供的所有考試信息和咨詢回復僅供參考,敬請考生以權威部門公布的正式信息和咨詢為準!

2026國考·省考課程試聽報名

  • 報班類型
  • 姓名
  • 手機號
  • 驗證碼
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點 | 投訴建議
工業和信息化部備案號:滇ICP備2023014141號-1 云南省教育廳備案號:云教ICP備0901021 滇公網安備53010202001879號 人力資源服務許可證:(云)人服證字(2023)第0102001523號
云南網警備案專用圖標
聯系電話:0871-65099533/13759567129 獲取招聘考試信息及咨詢關注公眾號:hfpxwx
咨詢QQ:1093837350(9:00—18:00)版權所有:易賢網
云南網警報警專用圖標
未满十八18勿进黄网站免费看