1.引用js文件中的函數調用

本文轉載自查看原文 2019-11-14 21:58 574 前端-JavaScript

開發中遇到一個問題，代碼demo如下：

test.js文件內容：

1 var b = getHomeCity();

Test.html文件內容:

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Test HTML Page</title>
 5         <script type="text/javascript" src="test.js"></script>
 6         <script type="text/javascript">
 7 
 8             (
 9                 function(window){
10                     alert(b);
11                 }
12             )(window);
13             
14             function getHomeCity(){
15                 return 10;
16             }
17         </script>
18     </head>
19     <body>
20         <!-- 這里放入內容 -->
21     </body>
22 </html>

運行后結果：

打開console發現報錯：

getHomeCity()未定義：

后來改了一下getHomeCity()函數位置：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Test HTML Page</title>
 5         <script type="text/javascript">
 6             function getHomeCity(){
 7                 return 10;
 8             }
 9         </script>
10         <script type="text/javascript" src="test.js"></script>
11         <script type="text/javascript">
12 
13             (
14                 function(window){
15                     alert(b);
16                 }
17             )(window);
18             
19         </script>
20     </head>
21     <body>
22         <!-- 這里放入內容 -->
23     </body>
24 </html>

運行結果：

同一Script代碼塊中的函數調用：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>Test HTML Page</title>
 5         <script type="text/javascript">
 6             
 7             var b = getHomeCity();
 8             (
 9                 function(window){
10                 
11                     alert(b);
12                 }
13             )(window);
14             function getHomeCity(){
15                 return 10;
16             }
17         </script>
18     </head>
19     <body>
20         <!-- 這里放入內容 -->
21     </body>
22 </html>

運行結果：

結論：

同一個Script代碼塊中，函數可以相互調用，根據函數定義提升原則，函數定義寫在前面或后面都可以執行該函數

但是不同的Script代碼塊之間調用函數，一定要在調用函數之前定義了該函數，否則會出現undefined的情況。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 理解js中的函數調用和this 函數引用和函數調用的區別 JS setInterval 函數調用 c語言函數定義、函數聲明、函數調用以及extern跨文件的變量引用【轉】c語言函數定義、函數聲明、函數調用以及extern跨文件的變量引用 JS中函數調用的四種方式 MATLAB中函數調用 [匯編與C語言關系]1.函數調用 js函數定義和函數調用總結 js 四種函數調用模式