函數(shù)

1. 定義

1.  匿名函數(shù)
2.  具名函數(shù)
3.  箭頭函數(shù)

2. 詞法作用域（也叫靜態(tài)作用域）

```
 var global1 = 1
 function fn1(param1){
     var local1 = 'local1'
     var local2 = 'local2')
     function fn2(param2){
         var local2 = 'inner local2'
         console.log(local1)
         console.log(local2)
     }

     function fn3(){
         var local2 = 'fn3 local2'
         fn2(local2)
     }
 }

```

深入閱讀：

*   [javascript的詞法作用域](http://js8.in/2011/08/15/javascript%E7%9A%84%E8%AF%8D%E6%B3%95%E4%BD%9C%E7%94%A8%E5%9F%9F/ "null")
*   [靜態(tài)作用域與動態(tài)作用域](https://zh.wikipedia.org/wiki/%E4%BD%9C%E7%94%A8%E5%9F%9F#.E9.9D.99.E6.80.81.E4.BD.9C.E7.94.A8.E5.9F.9F.E4.B8.8E.E5.8A.A8.E6.80.81.E4.BD.9C.E7.94.A8.E5.9F.9F "null")
*   [Abstract Syntax Tree 抽象語法樹簡介](https://div.io/topic/1994 "null")

3. call stack

*   [普通調(diào)用 1+1+1](http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYSgpewogICAgY29uc29sZS5sb2coJ2EnKQogIHJldHVybiAnYScgIAp9CgpmdW5jdGlvbiBiKCl7CiAgICBjb25zb2xlLmxvZygnYicpCiAgICByZXR1cm4gJ2InCn0KCmZ1bmN0aW9uIGMoKXsKICAgIGNvbnNvbGUubG9nKCdjJykKICAgIHJldHVybiAnYycKfQoKYSgpCmIoKQpjKCk%3D!!! "null")
*   [嵌套調(diào)用 1>2>3](http://latentflip.com/loupe/?code=ZnVuY3Rpb24gYSgpewogICAgY29uc29sZS5sb2coJ2ExJykKICAgIGIoKQogICAgY29uc29sZS5sb2coJ2EyJykKICByZXR1cm4gJ2EnICAKfQpmdW5jdGlvbiBiKCl7CiAgICBjb25zb2xlLmxvZygnYjEnKQogICAgYygpCiAgICBjb25zb2xlLmxvZygnYjInKQogICAgcmV0dXJuICdiJwp9CmZ1bmN0aW9uIGMoKXsKICAgIGNvbnNvbGUubG9nKCdjJykKICAgIHJldHVybiAnYycKfQphKCkKY29uc29sZS5sb2coJ2VuZCcp!!! "null")
*   [遞歸](http://latentflip.com/loupe/?code=ZnVuY3Rpb24gZmFiKG4pewogICAgY29uc29sZS5sb2coJ3N0YXJ0IGNhbGMgZmFiICcrIG4pCiAgICBpZihuPj0zKXsKICAgICAgICByZXR1cm4gZmFiKG4tMSkgKyBmYWIobi0yKQogICAgfWVsc2V7CiAgICAgICAgcmV0dXJuIDEKICAgIH0KfQoKZmFiKDUp!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D "null")

4. this & arguments

• 重要：this 就是 call 的第一個參數(shù)！call 的其他參數(shù)統(tǒng)稱為 arguments
• this 是隱藏的第一個參數(shù)，且必須是對象

function f(){
    console.log(this)
    console.log(arguments)
}
f.call() // window
f.call({name:'frank'}) // {name: 'frank'}, []
f.call({name:'frank'},1) // {name: 'frank'}, [1]
f.call({name:'frank'},1,2) // {name: 'frank'}, [1,2]

this 為什么必須是對象稀轨？

因為 this 就是函數(shù)與對象之間的羈絆

var person = {
    name: 'frank',
    sayHi: function(person){
        console.log('Hi, I am' + person.name)
    },
    sayBye: function(person){
        console.log('Bye, I am' + person.name)
    },
    say: function(person, word){
        console.log(word + ', I am' + person.name)
    }
}
person.sayHi(person)
person.sayBye(person)
person.say(person, 'How are you')

// 能不能變成 
person.sayHi()
person.sayBye()
person.say('How are you')

// 那么源代碼就要改了
var person = {
    name: 'frank',
    sayHi: function(){
        console.log('Hi, I am' + this.name)
    },
    sayBye: function(){
        console.log('Bye, I am' + this.name)
    },
    say: function(word){
        console.log(word + ', I am' + this.name)
    }
}
// 如果你不想吃語法糖
person.sayHi.call(person)
person.sayBye.call(person)
person.say.call(person, 'How are you')

// 還是回到那句話：this 是 call 的第一個參數(shù)
// this 是參數(shù)，所以萌狂，只有在調(diào)用的時候才能確定
person.sayHi.call({name:'haha'})  // 這時 sayHi 里面的 this 就不是 person 了
// this 真的很不靠譜

// 新手疑惑的兩種寫法
var fn = person.sayHi
person.sayHi() // this === person
fn()  // this === window

5. call / apply

fn.call(asThis, p1,p2) 是函數(shù)的正常調(diào)用方式
當(dāng)你不確定參數(shù)的個數(shù)時冠场，就使用 apply
fn.apply(asThis, params)

6. bind

call 和 apply 是直接調(diào)用函數(shù)炬丸，而 bind 則是返回一個新函數(shù)（并沒有調(diào)用原來的函數(shù)），這個新函數(shù)會 call 原來的函數(shù)初嘹，call 的參數(shù)由你指定及汉。

7. return

每個函數(shù)都有 return
如果你不寫 return，就相當(dāng)于寫了 return undefined

8. 柯里化 / 高階函數(shù)

返回函數(shù)的函數(shù)

• 柯里化：將 f(x,y) 變成 f(x=1)(y) 或 f(y=1)x

      //柯里化之前
      function sum(x,y){
          return x+y
      }
      //柯里化之后
      function addOne(y){
          return sum(1, y)
      }
      //柯里化之前
      function Handlebar(template, data){
          return template.replace('{{name}}', data.name)
      }
      //柯里化之后
      function Handlebar(template){
          return function(data){
              return template.replace('{{name}}', data.name)
          }
      }
  
  

  柯里化可以將真實計算拖延到最后再做
  關(guān)于柯里化的高級文章：

  1. http://www.yinwang.org/blog-cn/2013/04/02/currying
  2. https://zhuanlan.zhihu.com/p/31271179

• 高階函數(shù)：
  在數(shù)學(xué)和計算機科學(xué)中削樊，高階函數(shù)是至少滿足下列一個條件的函數(shù)：

  1. 接受一個或多個函數(shù)作為輸入：forEach sort map filter reduce
  2. 輸出一個函數(shù)：lodash.curry
  3. 不過它也可以同時滿足兩個條件：Function.prototype.bind

9. 回調(diào)

名詞形式：被當(dāng)做參數(shù)的函數(shù)就是回調(diào)
動詞形式：調(diào)用這個回調(diào)
注意回調(diào)跟異步?jīng)]有任何關(guān)系

10. 構(gòu)造函數(shù)

返回對象的函數(shù)就是構(gòu)造函數(shù)
一般首字母大寫

函數(shù)分類

function curry(func , fixedParams){
    if ( !Array.isArray(fixedParams) ) { fixedParams = [ ] }
    return function(){
        let newParams = Array.prototype.slice.call(arguments); // 新傳的所有參數(shù)
        if ( (fixedParams.length+newParams.length) < func.length ) {
            return curry(func , fixedParams.concat(newParams));
        }else{
            return func.apply(undefined, fixedParams.concat(newParams));
        }
    };
}

image.png