JavaScript 函式

JavaScript 函式的組成，函式的遞回、立即執行函式、call/appaly/bind、caller/callee

函式的意義

1. 數學中的函式

   \(y=f(x)\)，對于一個 x 變數有唯一一個 y 與之對應

2. 編程中的函式

   即函式式編程 -> 模塊的單一責任制

   一個功能或程式段被封裝的程序

   好處：低耦合，高類聚，易復用

   var test = function(){
       // ... 
       return;
   }
   

3. JavaScript 函式的組成

   函式名、引數、回傳值

函式的宣告

1. 宣告方式

   // 第一種，一般宣告式
   funtion test1(){
   
   }
   // 第二種，函式字面量賦值式
   var test2 = function(){
       
   }
   

   注意：

   var test = function test1(){
       // ...
       test1()// 內部可呼叫
   }
   console.log(test.name); // 列印出 test1
   test(); // 可以執行
   test1(); // 外部不可見，報錯
   

2. 函式命名

   • 以字母、$、下劃線開頭，可包含數字
   • 小駝峰命名，myTestFunction
   • 工具方法可以使用下劃線連接多單詞

函式的引數

2. 形式引數

   // 未傳入的形式引數，默認 undefined
   function test(a, b, c) {
   	console.log(a, b, c);
   }
   test(1,2); // 1 2 undefined
   

3. 實際引數

   通過 arguments 可以獲取傳入的實際引數陣列

   function test(a, b) {
       console.log(arguments.length); // 3
       console.log(arguments); // [1,2,3]
   }
   test(1,2,3);
   

   在函式內部可以更改實際引數陣列的內容

   function test(a, b) {
   a = 10; // 可以更改
   b = 11; // 不能更改，沒有傳入該引數，默認 undefined
   console.log(arguments[0]); // 10
   console.log(arguments[1]); // undefined
   }
   test(1);
   

   arguments 是陣列，存在堆記憶體中

   形式引數和 arguments 成員是具有映射關系的

4. 引數默認值

   // es6 語法
   // es2015 支持，不兼容低版本瀏覽器
   function test(a = 1, b = 2) {
       console.log(a,b);
   }
   test(); // 列印 1 2，相當于 test(undefined,undefined)
   test(NaN); // 列印 NaN，2
   // es5 語法
   function test(a, b) {
       var a = arguments[0] === undefined || 1;
       var b = arguments[0] === undefined || 2;
       console.log(a,b);
   }
   test(); // 列印 1 2，相當于 test(undefined,undefined)
   test(NaN); // 列印 NaN，2
   

函式的回傳值

終止函式執行，回傳一個值

1. 不寫 return，默認回傳 undefined

   // 默認 return undefined 即 retuen;
   function test(){
       // ...
   }
   console.log(test()); // undefined
   

2. 可以回傳任何值

   return 1;
   return false;
   // 回傳陣列
   return [1,2,3];
   // 回傳方法
   return funtion(){}
   

全域變數

1. 函式體內部可以訪問外部宣告的變數

   var a = 1; // 全域變數
   function test1() {
   	var b = 2; // 區域變數
   	console.log(a); // 1
   	funtion test2() {
   		var c = 3; // 區域變數
   		console.log(b); // 2
   	}
   	test2();
   	console.log(c); // 報錯
   }
   test1();
   

2. 同級函式內部的區域變數不能相互訪問

   function test1() {
       var a = 1;
   }
   function test2() {
       console.log(a);
   }
   test2(); // 報錯
   

函式的遞回

1. 遞回演算法

   大問題可以劃分小問題

   大問題與小問題解決思路一致

   寫出遞推公式

   找出終止條件

   實作遞回代碼

2. 遞回示例

   求 n 的階層

   function fact(n) {
       return n === 0 || n === 1 ? 1 : n * fact(n - 1);
   }
   

   斐波那契數列

   function fb(n) {
          n <= 0 : return 0 ："";
          n <= 2 : return 1 : "";
          return fb(n - 1) + fb(n - 2);
   }
   

立即執行函式

1. IIFE

   IIFE，immediately-invoked funtion，也叫自執行函式

2. 特點

   立即執行，自動銷毀

3. 寫法

   函式宣告式 -> 運算式 -> () -> 執行

   常用寫法

   (function(){
       
   })(); // 常用寫法
   (function(){
       
   }()); // w3c 建議寫法
   

   其他寫法

   !function(){
       
   }();
   +function(){
       
   }();
   -function(){
       
   }();
   0 || function(){
       
   }();
   1 && funtion(){
       
   }()
   

   需要遞回可以命名，但是外部訪問不到

   (function test(){
       test();
   })(); // 需要遞回可以命名，但是外部訪問不到
   test(); // 報錯
   

   注意：

   function test(a) {
       console.log(a);
   }(); // 報錯
   function test(a) {
       console.log(a);
   }(1); // 不報錯，也不列印
   // 因為瀏覽器將 (1) 決議成運算式，前面決議成函式宣告式
   

4. 回傳值

   var test = (function() {
       return 1; // 用外部變數接收
   })
   

call、apply 與 bind

改變函式的 this 指向

1. call

   function test() {
       
   }
   test(); // 瀏覽器隱式執行為 test.call()
   

   改變 this 指向

   function Car(color, price){
       this.color = color;
       this.price = price;
   }
   var myCar = {};
   Car.call(myCar, "black", "20 萬");
   Car.apply(myCar, ["black", "20 萬"]);
   console.log(myCar); // {color : "black", price : "20 萬"}
   

2. apply

   function Car(color, price){
       this.color = color;
       this.price = price;
   }
   var myCar = {};
   Car.apply(myCar, ["black", "20 萬"]); // 用陣列裝引數
   console.log(myCar); // {color : "black", price : "20 萬"}
   

3. bind

   與 call、apply 不同的是，bind 改變指向后不會執行，可以加 () 執行

   兼容 IE9 及以上

   function Car(color, price){
       this.color = color;
       this.price = price;
   }
   var myCar = {};
   Car.bind(myCar)("black", "20 萬"); // 用陣列裝引數
   console.log(myCar); // {color : "black", price : "20 萬"}
   

caller 和 callee

1. callee

   回傳 arguments 對應的函式

   function test(a, b, c){
       console.log(arguments.callee.length); // 函式有 length 屬性，回傳形參串列長度
   }
   test(1, 2, 3); 
   

   自執行函式中使用遞回

   // 計算 1 + 2 + ... + 100
   (function(n) {
       if(n <= 1) {
           return 1;
       }
       return n + arguments.callee(n - 1);
   })(100);
   

2. caller

   回傳呼叫當前函式的函式

   function test1() {
       test2();
   }
   function test2() {
   	console.log(test2.caller);
   }
   test1(); // 列印出 test1
   

標籤：JavaScript

上一篇：javascript中innerHTML 獲取或替換html內容

下一篇：移動除錯和終端檢測