首頁 > web前端 > js教程 > 主體

JS中函數的重要性

php中世界最好的语言
發布: 2018-03-19 16:26:42
原創
2911 人瀏覽過

這次帶給大家JS中函數的重要性,使用JS中函數的注意事項有哪些,下面就是實戰案例,一起來看一下。

既然是物件,那麼它就可以:

  1. 透過字面量建立

  2. 賦值給變量,數組元素和其他物件的屬性(property)

  3. ##作為參數傳遞給函數

  4. 作為函數的傳回值

  5. 含有能被動態建立和賦值的屬性

#除了上述物件的功能,函數區別其它物件之處是能被呼叫。

在JS中,存在變數提升。當一個變數通過var宣告之後,會立即被提升至目前作用域頂部(let 和 const 宣告的變數則不會)。例如:

1 function a() {2     console.log(b);3     var b = 10;4 }5 a();  //undefined
登入後複製

上面這段程式碼的運行結果為undefined。原因是,當b變數通過var宣告後,發生了變數提升,立即被提升至目前作用域頂部(注意,提升是在宣告之後立即發生,此時b還未被定義!) ,此時的「目前作用域」就是函數a的作用域。因此,上面的程式碼其實是這樣的:

1 function a() {2     var b;  //变量的声明被提升至当前作用域顶部3     console.log(b);4     b = 10;5 }6 a();
登入後複製

變數b的宣告被提升到第二行(提升的只是宣告),且此時b沒有被賦值,因此程式碼繼續執行至第三行console.log(b)時,就輸出了undefined。

而JS除了變數提升外,還有「函數提升」。同理,函數也會被提升,只不過,函數不只是宣告的提升,而是「整體提升」。請看下面的程式碼:

1 function a() {2     b();3     function b() {4         console.log("yes!");5     }6 }7 a();  //yes!
登入後複製

此時可以正常執行函數b。這正是因為函數被提升,而且是“整體提升”,所以b()才能正常執行。這段程式碼其實等價於:

1 function a() {2     function b() {3         console.log("yes!");4     }5     b();6 }7 a();  //yes!
登入後複製

要注意的是,只有普通形式宣告的函數才能被提升! 例如:

1 function a() {2     b();3     var b = function() {        //字面量声明的函数4         console.log("yes!");5     }6 }7 a();  //报错
登入後複製

這裡的匿名函數是透過字面量宣告的,所以不存在函數提升,結果就會報錯。

但是,當變數和函數同時被宣告時,誰提升得更優先呢?

在JS中,函數之所以被稱為“一等公民”,其中一個原因是它比變數更有優先級,在發生提升時,函數會提升至作用域的最頂端!例如:

1 function a() {2     var b = 10;3     function b () {4         console.log("yes!");5     }6     console.log(b);7     console.log(typeof b);8 }9 a();    //10  number
登入後複製

在這段程式碼中,變數b的宣告被提升,但作為「一等公民」的函數卻被提升到變數b的宣告之上。在執行程式碼階段,10賦值給b,因此輸出結果,b是10,類型變成了number。

我相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

微信小程式怎麼實作資料雙向綁定

#JavaScript之優化DOMWebpack模組的使用

以上是JS中函數的重要性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!