this

apply、call 有什么作用，什么区别

call 和 apply 是为了动态改变 this ⽽出现的，当⼀个 object 没有某个⽅法，但是其他的有，就可以借助 call或 apply ⽤其它对象的⽅法来操作。

对于 apply、call ⼆者⽽⾔，作⽤完全⼀样，只是接受参数的⽅式不太⼀样。

call 直接传入参数；apply 传入参数数组。

fn.call(context, param1, param2)
fn.apply(context, [param1, param2])

1. 以下代码输出什么？

var john = {
  firstName: "John"
}
function func() {
  alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()  // John: hi!  (this : john)

2. 下面代码输出什么？为什么?

func()  // window，因为是在 window 下调用函数

function func() {
  alert(this)
}

3. 下面代码输出什么？

function fn0(){
  function fn(){
    console.log(this);
  }
  fn();
}

fn0();  // window

document.addEventListener('click', function(e){
  console.log(this);  // document，事件绑定，this 为 document
  setTimeout(function(){
    console.log(this);  // window
  }, 200);
}, false);

4. 下面代码输出什么？为什么？

var john = {
  firstName: "John"
}

function func() {
  alert( this.firstName )
}
func.call(john)  // John , func.call(context)

5. 代码输出？

var john = {
  firstName: "John",
  surname: "Smith"
}

function func(a, b) {
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname')  // John Smith

6. 以下代码有什么问题，如何修改？

var module= {
  bind: function(){
    var that = this;  // 先将 this 保存下来
    $btn.on('click', function(){
      console.log(this) // this 指 $btn
      that.showMsg();
    })
  },

  showMsg: function(){
    console.log('饥人谷');
  }
}