你懂函数吗?

this & arguments

• this 是隐藏的第一个参数, 且必须是对象

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

f()  是阉割版的 f.call()

• this为什么必须是对象
  • 因为this就是函数与对象的羁绊

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')

<==========================================================> 

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()    ==>  person.sayHi.call(person)    // Hi, I amfrank
person.sayBye()    ==> person.sayBye.call(person)    // Bye, I amfrank
person.say('How are you')    ==> person.say.call(person)

var fn = person.sayHi
fn()    //  Hi, I am

call & apply

• 当你不确定参数的个数时, 就是用apply

// call
function sum (x, y) {
  return x + y
}
sum(1, 2)  // 3
sum.call(undefined, 1, 2)  // 3  this永远是第一个，占位符

// apply
function sum () {
  var n = 0
  for(var i =0; i< arguments.length; i++) {
    n += arguments[i]
  }
  return n
}
sum(1, 2, 3, 4, 5, 6)
var a = [1, 2, 3, 4, 4, 6]
sum.call(undefined, a[0]...)    不好
sum.apply(undefined, a)  // 第二个参数是数组

bind

• call 和 apply 是直接调用函数，而 bind则是返回一个新函数（并没有调用原来的函数），这个新函数会 call 原来的函数，call的参数由你指定。

// 伪代码
var view = {
  element: ''$('#div1)',
  bindEvent: function(){
    this.element.onclick = function(){
      this.onClick()    // this 不对
    }
  },
  onClick: function() {
    this.element.addClass('active')
  }
}

==> 

var view = {
  element: '$('#div1)',
  bindEvent: function(){
    var self = this    // 使用 self 代替 this, 假this
    this.element.onclick = function(){
      self.onClick()  
    }
  },
  onClick: function() {
    this.element.addClass('active')
  }
}

==> 

var view = {
  element: '$('#div1)',
  bindEvent: function(){
    this.element.onclick = this.onClick.bind(this)    // .bind()
  },
  onClick: function() {
    this.element.addClass('active')
  }
}

柯里化 / 高阶函数

// 柯里化
function sum(x, y) {
    return x + y
}
function addOne(y) {
    return sum(1, y)
}
addOne(3)    // 4

• 高阶函数至少满足下列一个条件的函数
  • 接受一个或多个函数作为输入
  • 输出一个函数
  • 不过它常常满足两个条件

// 接受一个或多个函数
array.sort(function(){})
array.map(function(){})
...

// 输出一个函数
fn.bind.call(fn, {})

回调

• 名词形式: 被当做参数的函数就是回调
• 动词形式: 调用这个回调
• 回调和异步无关系

构造函数

• 返回对象的函数就是构造函数
• 首字母大写

箭头函数

// 箭头函数没有 this
var fn = (x, y) => x + y