DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳細分析JavaScript函數定義
詳細分析JavaScript函數定義
編輯:關於JavaScript     

函數

幾個要點:

                a).函數是javascript中的一等公民 (重要性)
                b).函數是一個對象
                c).函數定義了一個獨立的變量作用域

定義方式

a)命名函數:

          除非在另一個函數內部定義,否則,命名函數是全局的。 

      // 全局的命名函數
  function add(x, y) {
    return x + y;
  }
  console.info(add(100, 200));  //300

b)匿名函數:   

            匿名函數通常賦值給一個變量,再通過變量調用。

    var func = function (x, y) {
      return x + y;
    }
    console.info(func(5, 2)); //7

            匿名函數適用於以下這種 “立即執行的匿名函數” 的情況:

    console.info(
      function (x, y) {
            return x + y;
          }(100, 200)  //立即調用
        );

C)定義方式影響代碼執行效果

                命名函數可以先使用,再定義

    console.info(sum(10, 10));
    function sum(num1, num2) {
      return num1 + num2;
    }

              匿名函數必須先定義,再使用

    //console.info(sumFunc(10, 10));  //Uncaught TypeError: Property 'sumFunc' of object [object Object] is not a function 
    var sumFunc = function (num1, num2) {
      return num1 + num2;
    };
    console.info(sumFunc(10, 10));


函數返回值:

                 用return 生成返回值.如沒有return ,則函數返回undefined

 function func() {
 }
 console.info(func()); //undefined
 function func2() {
   return; //空的返回語句
 }
 console.info(func2()); //undefined

return裡藏著的坑:

 var func = function (x, y) {
   var sum = x + y;
   return {
     value : sum
   }
 }

                   這麼寫沒有問題:   調用 func(5,5)    返回的是 Object {value: 10}

                   然而: 

  var func = function (x, y) {
    var sum = x + y;
    return
    {
      value: sum
    };
  }
  console.info(func(5,5)); //undefined

                   return 後面跟著個回車換行的話,
                   調用 func(5,5)    顯示的是 undefined
                   編輯器幫我們在return後加了個分號;   然而在這情況下並沒有什麼卵用。

函數即對象:

  function add(x, y) {
    return x + y;
  }
  console.info(add(100, 200)); //300
  var other = add; //other和add引用同一函數對象
  console.info(other(300, 400)); //700
  console.info(typeof other);  //function
  console.info(add === other); //true

嵌套定義的函數:

                  在函數內部,可以定義另一個函數。

  function outerFunc(a, b) {
    function innerFunc(x) {
      return x * x;
    }
    return Math.sqrt(innerFunc(a) + innerFunc(b));
  }
  console.info(outerFunc(3, 4)); //5

訪問外部變量:

             內部函數可以訪問外部的變量與參數。

 var globalStr = 'globalStr';
 function outerFunc2(argu) {
   var localVar = 100;
   function innerFunc2() {
     localVar++;
     console.info(argu + ":" + localVar + ":" + globalStr);
   }
   innerFunc2(); //hello:101:globalStr
 }
 outerFunc2("hello");

返回函數的函數:

               因為函數是對象,所以可以作為返回值。

  function outerFunc(x) {
    var y = 100;
    return function innerFunc() {
      console.info(x + y);
    }
  }
  outerFunc(10)(); //110

以上所述就是本文的全部內容了,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved