this is awful

函数的四种调用模式

方法调用模式

var foo = {
  bar: 1,
  baz: function(){
    console.log(this.bar)   //1
  }
}
foo.baz()

上面的代码中，baz是foo对象的一个属性(方法)，这时候baz作用域中的this指向foo对象。

apply模式

var foo2 = {
  bar: 2
}
foo.baz.apply(foo2)

foo.baz是foo对象的一个属性，其值对应一个函数 ，而对于js中的函数来说，函数也是对象，并且所有的函数对象都有一个apply方法，apply方法的第一个参数就是this指向的对象。事实上，我们可以认为apply就是为了让我们能够动态的选择this(函数上下文)。在这里，我们把this指向了foo2,所以会打印出2来

函数调用模式

value = 3
var baz = function(){
  var value = 4  
  console.log(this.value)   //3
}
baz()

这里的baz为一个函数，当他直接调用时，this指向全局作用域

构造器调用模式

var Foo = function(bar){
  this.bar = bar
}
Foo.prototype.getBar = function(){
  console.log(this.bar)     //5
}
foo3 = new Foo(5)
foo3.getBar()

这里的Foo函数被作为构造器调用来生成新的实例foo3,在Foo函数中的this指向的就是新创建的这个实例。

return this

很多时候，我们都希望自己写的模块能够实现链式调用，这让我们的代码看起来很优雅。而链式调用的核心其实就一句，“return this”，也就是在方法的最后，把调用这个方法的对象再给返回出来。下面是一个简单的加减计数器，实现了链式调用。

var Counter = function(initValue){
  this.value = initValue
}
Counter.prototype.add = function(val){
  this.value += val
  return this
}
Counter.prototype.minus = function(val){
  this.value -= val
  return this
}
var c = new Counter(10)
c.add(10).minus(8).add(3);
console.log(c.value)     //15