2. 程式人生 > >【JavaScript】（4）普通函式、動態函式定義格式，呼叫方式，注意的詳細細節

【JavaScript】（4）普通函式、動態函式定義格式，呼叫方式，注意的詳細細節

阿新 • • 發佈：2018-12-23 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JavaScript語言基礎--函式function\Function</title>
    </head>
    <body
 
>
    <pre>
        ▉js函式普通定義格式：▉
        function 函式名(引數列表){
            執行語句;
            [return 返回值;]
        }
    </pre>
    <script type="text/javascript">
        //js函式沒有返回值型別，形參也沒有型別
        function hello(){
            alert("hello function....");
        }
        //hello();
 

        function sum(a,b){
            return a+b;
        }
        function fun(){
            var x=sum(100,200);
            alert(x);
        }
        //fun();
    </script>
    <!-- 呼叫已經載入好的js中的函式 -->
    <input type="button"  onclick="hello();" value="函式1"/>  
    <input type="button"
 
  onclick="fun();" value="函式2" />   

    <h3>以下演示函式的若干細節</h3>
    <input type="button"  onclick="demo( )" value="有關函式名及記憶體模型的細節"><br/>
    <input type="button"  onclick="demo2( )" value="有關函式書寫位置的細節"><br/>
    <input type="button"  onclick="demo3( )" value="有關函式引數的細節"><br/>

    <script type="text/javascript">
        //❶、有關函式名及記憶體模型的細節
        function getSum(){
            return 10;
        }
        function demo(){
            var x=getSum();//結果：10 【注意  】：獲得的是函式的返回值
            alert(" x=getSum(); x= "+x);
            var y=getSum;/*【注意】：函式其實是一個Function物件，函式名即使物件名，
                                                        本句相當於引用賦值---y和getSum指向同一個Function物件*/
            alert( y );//結果：相當於呼叫：y.toString( ); 輸出函式的特徵字串---函式的定義程式碼
            alert( y( ) );//結果：輸出10---呼叫引用y所指向的那個Function物件對應的函式程式碼
        }
    </script>

    <script type="text/javascript">
        //❷、有關函式書寫位置的細節
        function demo2(){
            show(1,3);
        }
        /*【注意①】：
        ☆WA:不能執行，因為瀏覽器在解析當前<script>標記時，還沒有載入下一個<script>，因此不認識這個show(a,b)這個函式
        ☆如果在上面的按鈕“有關函式書寫位置的細節”的單擊事件中呼叫dmeo2( ),則可以，因為事件發生時，瀏覽器已經把整個頁面解析完成（頁面顯示完）
        ☆綜上：為了我們寫的所有js函式被頁面都能認識，通常把這些js程式碼都寫在<head>中，然後再頁面元素事件呼叫，此時<head>部分早已解析完了*/
        //demo2();
    </script>   

    <script type="text/javascript">
        function show(a,b){//這裡的a,b是用來識別函式用的，而且讓js幫忙把前兩個實參裝配到這兩個變數，以便使用
            alert(a+"，"+b);
            //【注意②】：有關函式引數細節的說明：js內部是用一個名為arguments的陣列去接收實參的
            alert("arguments.length："+arguments.length);
            for(var i=0;i<arguments.length;i++){
                document.write(arguments[i]+"&nbsp;&nbsp;");//打印出show函式的引數
            }

        }
    </script>   

    <script type="text/javascript">
        //❸有關函式引數的細節：js中的函式不存在過載，引數根據呼叫時的實參進行自動裝配---給了就賦值，沒給就undefined，多給了沒接住
        //js中引數跟函式的識別沒有關係，只以函式名識別，而且函式名實際上是引用變數，和函式名捆綁的引用變數指向的是同一個函式
        function demo3(){
            //show(2, 3);
            //show("hello","hhh");
            //show(1);//結果：1,undefined
            show(123,"abc",true,[10010,10101,10101]);
        }
    </script>

    <pre>
        ▉js動態函式的定義格式： ▉
        var 函式名=new Function( 形參列表,函式體描述 );//形參列表和實參列表都以字串格形式給出
    </pre>
    <script type="text/javascript">
    /*用動態函式描述此普通函式
    function add(a,b){
        var s=0;
        s=a+b;
        return s;
    }
    */
    </script>

    <script type="text/javascript">
        //【注意】：動態函式簡單實用方式1：
        var add=new Function("a,b","var s=0; s=a+b; return s;");//引數列表合用一個引數列表
        var add=new Function("a","b","var s=0; s=a+b; return s;");//引數列表分開寫
        //alert("add( 2,3 )= "+add(2,3));
    </script>

    <!-- 【注意】：動態函式深入實用方式2： -->
    <h3>動態函式的解耦用法演示---類似於Java中的 </h3>
    引數列表：<input type="text" name="param">函式體描述：<input type="text" name="desc"> <input type="button" value="執行函式" onclick="bb();">
    <script type="text/javascript">
        function bb(){
            /*此處一定要小心，value後邊沒有“ ( ) ” 沒發現，坑了好久
            var param=document.getElementsByName("param")[0].value();*/
            var param=document.getElementsByName("param")[0].value;
            var desc=document.getElementsByName("desc")[0].value;
            var f=new Function(param,desc);
            alert( f(2 ,3) );
        }
    </script>
    </body>
</html>

相關推薦

【JavaScript】（4）普通函式、動態函式定義格式，呼叫方式，注意的詳細細節

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.d

【JavaScript】（4）——錯誤處理與除錯

背景：JavaScript在錯誤處理除錯上一直是它的軟肋，如果指令碼出錯，給出的提示經常也讓人摸不著頭腦。ECMAScript第3版為了解決這個問題引入了 try...catch和 throw語句以及一些錯誤型別，讓開發人員更加適時的處理錯誤。良好的錯誤處理機制可以及時的提

【Django】（4）建立其他頁面

建立完了網站的主頁後，我們將建立兩個顯示資料的網頁，一個列出所有的主題，另一個顯示特定主題的所有條目。對於每個網頁，都要指定其URL模式，編寫一個檢視函式，一個模板。這樣做之前，可以先編寫一個父模板，讓專案中的其他模板都繼承它。 1.模板繼承   1-1.父模板 　　先建立一個base.htm

【Django】（4）創建其他頁面

logs The keep 分享 objects 鏈接 code 程序 ont 創建完了網站的主頁後，我們將創建兩個顯示數據的網頁，一個列出所有的主題，另一個顯示特定主題的所有條目。對於每個網頁，都要指定其URL模式，編寫一個視圖函數，一個模板。這樣做之前，可以先編寫一個父

【JavaScript】（8）——例項：圖片切換效果

背景：不知道怎麼回事，最近做的專案都是在和UI打交道，各種圖片，各種表格，各種按鈕的組合、拼接；寫各種JS方法讓他們無縫組合，自由切換；對CSS+HTML中的多種屬性都熟悉了一下，盒子模型，背景圖片

深入理解JavaScript系列（4）：立即呼叫的函式表示式

javascript 函式function前面的一元操作符, 感嘆號、小括號、一元操作符!()+-|| 看下面內容之前可以先看看上面的文章，總結的非常贊 前言 大家學JavaScript的時候，經常遇到自執行匿名函式的程式碼，今天我們主要就來想想說一下自執行 在詳細

【響應式程式設計的思維藝術】 （4）從打飛機遊戲理解併發與流的融合

目錄 一. 劃重點 二. 從理論到實踐 三. 問題及反思 四. 參考程式碼及Demo說明 . 本文是Rxjs 響應式程式設計-第三章: 構建併發程式這篇文章的學習筆記。 示例程式碼託管在：http://www.github.com/dashnowords/blogs

【蒻爆了的NOIP系列--普及組複賽】（4）NOIP2013普及組複賽題解

這只是一個作業，如果有幫到您的，我只能說。。。這不科學。。。 ————————————華麗的分割線———————————— 第一題： 神似noip2016t1… 貌似就資料範圍和輸入方式

從零構建AR APP新手教程【Android篇】（4）-APP互動邏輯及嵌入呼叫Unity

學習AR應用開發有一段時間了，自己開發了一款簡單的APP來練手，在這裡分享給大家。 前面介紹了Unity3D部分的實現，現在就來介紹Android原生部分的編碼實現。 1.APP基礎UI框架及互動邏輯 首頁就是簡單的ViewPager+Fragment，其中資料用

【Spring Boot】（4）、配置檔案值注入

1、配置檔案使用上節中yaml書寫的配置資訊：server: port: 8081 path: /hello person: name: zhangsan age:

【原創】（九）Linux記憶體管理 - zoned page frame allocator - 4

背景 Read the fucking source code! --By 魯迅 A picture is worth a thousand words. --By 高爾基 說明： Kernel版本：4.14 ARM64處理器，Contex-A53，雙核 使用工具：Source Insight 3.5，

[轉]Web APi之認證（Authentication）兩種實現方式【二】（十三）

用戶數 ted das 客戶 元素 基礎 目標 開始 net 本文轉自：http://www.cnblogs.com/CreateMyself/p/4857799.html 前言 上一節我們詳細講解了認證及其基本信息，這一節我們通過兩種不同方式來實現認證，並且分析如

【Java_SSM】（四）Eclipse中通過maven引入jar包

osc ati eight wid -- stat ack ips 技術 這篇博文我們介紹一下如何通過eclipse配置setting並引入jar包 （1）eclipse：Window--Preferences--Maven--User Setting 全部完成

Web APi之認證（Authentication）兩種實現方式【二】（十三）

基於web 推薦 zed {0} scheme sage https 函數 ges 原文:Web APi之認證（Authentication）兩種實現方式【二】（十三）前言 上一節我們詳細講解了認證及其基本信息，這一節我們通過兩種不同方式來實現認證，並且分析如何合理的利用

Headmaster's Headache UVa10817【DP】（缺）

employ ace class CA ted same ring form rain 題目： The headmaster of Spring Field School is considering employing some new teachers for cert

【PyQt5】（02）添加組件：圖標、按鈕

5.1 connect pyqt 任務 模塊 內置 圖標 utf block 環境說明： 平臺：WIN10（教育版） 環境：Anaconda5.2（Python3.6.6） IDE：Pacharm2018.2.1（專業版） PyQt5：5.11.2 任務目標一：添加圖標

【PyQt5】（02）改變窗體的位置和大小

blank font .com python core www. geo target elf 特別說明 為了直接展示本篇的重點，往期內容將不再寫入代碼中，讀者可按需自行編碼組合 為了更好的展示效果，代碼段將以圖片的形式上傳，若想復制代碼可移步筆者的Github 為了便於

【PyQt5】（06）添加組件：按鈕，並設置位置和大小

github 輸出 技術 代碼 qt5 上傳 評論 教育版 www 特別說明 為了直接展示本篇的重點，往期內容將不再寫入代碼中，讀者可按需自行編碼組合 為了更好的展示效果，代碼段將以圖片的形式上傳，若想復制代碼可移步筆者的Github 為了便於學習，每篇只解決一個小問題，

【TensorFlow】（01）線性回歸

lob 超參數 教育版 ini src ont numpy mat font 特別說明 代碼地址：Github 環境說明 平臺：WIN10（教育版） 環境：Anaconda5.2（Python3.6.6） IDE：Pacharm2018.2.3（專業版） Tensor

【Django】（2）Django模塊創建應用程序

網站 sca tar 註意 運行 ESS etime tex efi 保持runserver還在運行，在manage.py相同的目錄下，新開一個終端窗口，激活虛擬環境，執行startapp命令 python manage.py startapp learn