深入淺析JavaScript中的Function類型
Function是javascript里最常用的一個(gè)概念,javascript里的function是最容易入手的一個(gè)功能,但它也是javascript最難理解最難掌握的一個(gè)概念。
1. Function類型是js中引用類型之一,每個(gè)函數(shù)實(shí)際上都是Function類型的實(shí)例對(duì)象,具有自己的屬性和方法。正因?yàn)楹瘮?shù)式對(duì)象,所以函數(shù)名實(shí)際上也是一個(gè)指向函數(shù)對(duì)象的指針。
2. 常用的函數(shù)定義方式
1. 函數(shù)聲明:
function sum(a , b ){ return a+b; }
2. 表達(dá)式:
var sum = function(){ return a+b; }; //注意分號(hào) //兩種方式的區(qū)別: //解釋器會(huì)率先讀取函數(shù)聲明,并使其在執(zhí)行之前可以訪問(wèn),而使用表達(dá)式則必須等到解析器執(zhí)行到它所在的代碼行,才會(huì)真正被解釋執(zhí)行(變量聲明提前,而值留在原地) alert (sum (10 ,10)); function sum(a ,b){ return a+b; } //↑上面的代碼會(huì)正常執(zhí)行,因?yàn)樵诖a執(zhí)行前,解析器通過(guò)函數(shù)聲明提升,讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中,放到代碼樹的頂部 alert (typeof sum); alert(sum(10 , 10)); var sum = function (a ,b){ return a+b; } //↑報(bào)錯(cuò),原因在于函數(shù)位于一個(gè)初始化語(yǔ)句中,不是一個(gè)函數(shù)聲明,不會(huì)被提前,而只會(huì)把var sum提前,用typeof操作符顯示sum是undefined,所以報(bào)錯(cuò)
3. 函數(shù)名僅僅保存指向函數(shù)對(duì)象的指針,因此函數(shù)名與包含對(duì)象指針的其他變量沒(méi)什么不同,也就是說(shuō),一個(gè)函數(shù)對(duì)象可以有多個(gè)名字:
function sum(a , b ){ return a+b; } console.log(sum(2 ,3)); //5 var anotherSum = sum; //變量anotherSum也指向了同一個(gè)函數(shù)對(duì)象 console.log(anotherSum(4 , 5)); //9 sum = null; //sum變量不再保存函數(shù)對(duì)象的指針了 console.log(anotherSum(1 , 3)); //anotherSum這個(gè)變量仍能調(diào)用
4. JS為何沒(méi)有重載這個(gè)概念。
function add(a){ return a+3 ; } function add(a){ return a+5; } var result = add(3); //8 //兩個(gè)函數(shù)同名了,結(jié)果只能是后一個(gè)函數(shù)覆蓋前一個(gè),所以不能重載
5. 函數(shù)的內(nèi)部屬性:函數(shù)內(nèi)部,有兩個(gè)特殊的對(duì)象,arguments和this
1. arguments:
arguments是個(gè)類數(shù)組對(duì)象,包含著傳入函數(shù)的所有參數(shù),這個(gè)對(duì)象有一個(gè)叫callee的屬性,屬性值是一個(gè)指針,指向擁有這個(gè)arguments對(duì)象的函數(shù)本身
function foo (){ var a =arguments.callee; return a.toString(); } foo(); /* 返回結(jié)果: "function sum(){ var a =arguments.callee; return a.toString(); }" 也就是說(shuō),一個(gè)函數(shù)內(nèi)部,arguments.callee指的就是這個(gè)函數(shù)本身。這個(gè)函數(shù)在遞歸調(diào)用時(shí)有點(diǎn)用,有許多缺陷,在ES5嚴(yán)格模式被移除 */
2. this:簡(jiǎn)單來(lái)說(shuō),this指的就是函數(shù)執(zhí)行的環(huán)境對(duì)象,在哪個(gè)對(duì)象中執(zhí)行,this就指哪個(gè)對(duì)象。展開(kāi)來(lái)說(shuō)比較復(fù)雜,單開(kāi)一篇
//TODO:
3. ES5規(guī)范了函數(shù)的另一個(gè)屬性:caller,這個(gè)函數(shù)屬性指的是調(diào)用當(dāng)前函數(shù)的函數(shù)
function inner(){ console.log(inner.caller); } function outer(){ inner(); } outer(); //function outer(){ inner(); }
4. length屬性:表示函數(shù)希望接受的參數(shù)個(gè)數(shù)
function add(a ,b ,c){ return a+b+c; } add.length; //3
5. 著名的prototype屬性,簡(jiǎn)單來(lái)說(shuō),是一個(gè)對(duì)象,是通過(guò)調(diào)用構(gòu)造函數(shù)而創(chuàng)建的一個(gè)對(duì)象,包含可以由特定類型的所有實(shí)例共享的屬性和方法。展開(kāi)來(lái)說(shuō)比較復(fù)雜,單開(kāi)一篇
//TODO:
6. 函數(shù)的兩個(gè)方法:call()和apply(),作用都是在特定的作用域中調(diào)用函數(shù),實(shí)際上就是設(shè)置函數(shù)內(nèi)部的this值
1. call():與apply()方法類似,區(qū)別在接收參數(shù)的方式不同,參數(shù)必須逐個(gè)列出來(lái)。
2. apply():接收兩個(gè)參數(shù),一個(gè)是函數(shù)運(yùn)行的作用域,另一個(gè)是參數(shù)數(shù)組,可以是數(shù)組,也可以是arguments這個(gè)類數(shù)組對(duì)象
function sum(a , b){ return a+b; } function callSum(a , b){ return sum.apply(this , arguments); }//第二個(gè)參數(shù)是一個(gè)類數(shù)組對(duì)象arguments function callSum1(a , b){ return sum.apply(this, [a , b]); } //第二個(gè)參數(shù)是一個(gè)數(shù)組 console.log(callSum(2 , 3)); //5 console.log(callSum1(3 ,5)); //8
3. 傳遞參數(shù)并調(diào)用函數(shù)并非call()和apply()的用武之地,二者真正強(qiáng)大的地方是擴(kuò)充函數(shù)運(yùn)行的作用域
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對(duì)象,所以是'blue'
使用call()和apply()擴(kuò)充作用域的最大好處,就是使對(duì)象與方法之間解耦
4. ES5定義了一個(gè)新方法:bind(),返回一個(gè)函數(shù),這個(gè)函數(shù)中this值會(huì)被綁定到傳給bind()函數(shù)的值
var x = 9; var module = { x: 81, getX: function() { return this.x; } }; module.getX(); // 81 var retrieveX = module.getX; retrieveX(); // 9, 因?yàn)樵谶@種情況下, "this" 指向全局變量 var boundGetX = retrieveX.bind(module);//把retrieveX()函數(shù)中的this永遠(yuǎn)與module綁定,再調(diào)用這個(gè)函數(shù)永遠(yuǎn)都是在module對(duì)象中運(yùn)行 boundGetX(); // 81
以上所述是小編給大家介紹的深入淺析JavaScript中的Function類型介紹,希望對(duì)大家有所幫助,如果大家想了解更多內(nèi)容,敬請(qǐng)關(guān)注腳本之家。
- JavaScript Function函數(shù)類型介紹
- 詳解JavaScript中常用的函數(shù)類型
- Javascript 判斷函數(shù)類型完美解決方案
- js中判斷Object、Array、Function等引用類型對(duì)象是否相等
- js Function類型
- javascript中Function類型詳解
- JavaScript基礎(chǔ)篇(3)之Object、Function等引用類型
- 詳解JavaScript基礎(chǔ)知識(shí)(JSON、Function對(duì)象、原型、引用類型)
- JavaScript引用類型Function實(shí)例詳解
- javascript function(函數(shù)類型)使用與注意事項(xiàng)小結(jié)
相關(guān)文章
用JavaScript獲取頁(yè)面文檔內(nèi)容的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇用JavaScript獲取頁(yè)面文檔內(nèi)容的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06輸入密碼檢測(cè)大寫是否鎖定js實(shí)現(xiàn)代碼
網(wǎng)站登錄為了更好的用戶體驗(yàn)都會(huì)在輸入密碼的時(shí)候檢測(cè)是否開(kāi)啟大寫,這樣有助于提醒用戶,需要學(xué)習(xí)的朋友可以參考下2012-12-12淺談Webpack4 plugins 實(shí)現(xiàn)原理
在wabpack 核心功能除了loader應(yīng)該就是plugins插件了,本文主要介紹了Webpack4 plugins 實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09JavaScript表單焦點(diǎn)自動(dòng)切換代碼
這篇文章主要介紹了JavaScript表單焦點(diǎn)自動(dòng)切換代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07你必須知道的Javascript知識(shí)點(diǎn)之"this指針"的應(yīng)用
本篇文章小編為大家介紹,你必須知道的Javascript知識(shí)點(diǎn)之"this指針"的應(yīng)用。需要的朋友參考下2013-04-04微信小程序?qū)崿F(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的計(jì)算器功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07JS實(shí)現(xiàn)簡(jiǎn)單隨機(jī)3D骰子
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)簡(jiǎn)單隨機(jī)3D骰子,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10