bind

bind，在Function.prototype上，返回一个新函数，并且使函数内部的this为传入的第一个参数

用法

var name = 'globle'
var App = {
  name: 'app',
  sayName: function(){
    console.log(this.name)
  }
}

var obj = {
  name: 'SeaMountC'
}

App.sayName()                     //"app"
App.sayName.bind(window)()        //"globle"
App.sayName.bind(obj)()           //"SeaMountC"

使用场景

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    this.node.addEventListener('click', function(){
      this.sayHello()//①
    })
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }
}
Page.init() //报错

上述代码会报错，因为①处的this指的是this.node，而不是我们期待的Page，而document.body中并没有sayHello方法，所以报错。
修改方法：
第一种：将this存下来

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    var _this = this
    this.node.addEventListener('click', function(){
      _this.sayHello() 
    })
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }
}
Page.init() //"hello...海山城"

参考前一遍写的this的判断方法，_this.sayHello() 相当于Page.sayHello.call(Page),因此sayHello中的this是指Page，没有问题

第二种：使用bind改变this

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    this.node.addEventListener('click', function(){
      this.sayHello()
    }.bind(this))
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }
}
Page.init()

第三种：换种写法，同样使用bind改变this

var Page = {
  init: function(){
    this.node = document.body
    this.bind()
  },
  bind: function(){
    this.node.addEventListener('click', this.sayHello.bind(this))
  },
  sayHello: function(){
    console.log('hello...' + this.node.innerText)
  }
}
Page.init() //"hello...海山城"

注：

• 注意这种写法，是直接将sayHello作为click事件的回调函数
• 这种方法如果不bind(this)，会报错，因为sayHello中的this指的是document.body，最后就变成document.body.node.innerText

apply、call

bind与apply、call相同点：

• 都是用来改变函数的this对象的指向的；
• 第一个参数都是this要指向的对象；
• 都可以利用后续参数传参；

bind与apply、call区别：

• bind不会立即调用，其他两个会立即调用
• 因为bind不会立即调用，因此可以有两种传参形式，
  一种是向call一样fn.bind(context, param1, param2...)()，
  另一种是fn.bind(context)(param1, param2...)

apply与call区别：

• call方法接收参数列表fn.call(context, param1, param2...)，而apply接收参数数组fn.apply(context, paramArray)

使用事例1
求和函数，直接arguments.forEach会报错，借用数组的forEach方法，通过call将forEach内部的this从数组改成arguments

function sum(){
//   ------------------报错-----------------
//   arguments.forEach(function(value){
//     console.log(value)
//   })
//   --------------------------------------
  
  var result = 0
  Array.prototype.forEach.call(arguments, function(value){
    console.log(value)
    result += value
  })
  console.log(result)
}
sum(9,5,4,3)

• forEach正常调用形式为[1,2,3].forEach(function(val){})，相当于[1,2,3].forEach.call([1,2,3], function(val){})，因此forEach中的this指的是数组本身
• Array.prototype.forEach(function(val){})，相当于Array.prototype.forEach.call(Array.prototype, function(val){})，这样forEach方法中的this指的是Array.prototype，将第一个参数改成arguments，即可改变forEach方法中的this，相当于此时forEach方法中的代码都是针对arguments处理的
• 因此[1,2,3].forEach.call([1,2,3], function(val){})，可以写Array.prototype.forEach.call([1,2,3], function(val){})

使用事例2
将arguments变成数组，这样就可以使用数组的方法了

function argsToArray(){
  var args = Array.prototype.slice.call(arguments, 0)
  console.log(args instanceof Array) //true
}
argsToArray(1,3,4,5,6)

使用事例3
借用Math.max()，Math.min()方法，求数组最大，最小值

var arr = [5, 0, 2, 9]
//------正常是这么调用的-------------
//Math.max(5, 0, 2, 9)
//-------------------------------------------

//使用apply
Math.max.apply(Math, arr)
Math.max.apply(null, arr)

• 上面apply的context参数（第一个参数）无所谓是什么，max方法本来就是针对传入的参数做处理的，而不是针对传入的this。
• apply传入的第二个参数是数组，如果是call的话，就得这样Math.max.call(null, 5, 0, 2, 9)