this

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

作用

• bind是返回一个新函数，并且使函数内部的this为传入的第一个参数。
• 而apply和call是调用一个函数，传入函数执行上下文及参数

区别：

• bind() 最简单的用法是创建一个函数，使这个函数不论怎么调用都有同样的 this 值。还可以配合setTimeout使用。
• apply()与 call()非常相似，不同之处在于提供参数的方式。就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

function joinstr(){
          console.log( [].join.call(arguments,'-')) //a-b-c
          var join=[].join.bind(arguments)
          console.log(join('-'))//a-b-c
        }
        joinstr('a','b','c')

以下代码输出什么?

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

输出结果为join：hi！
john.sayHi = func执行完后，join对象为
john{
  fistName:"john"
  sayHi:function func(){.....}
}
所以最后执行john.sayHi()时this.firstName指的是john.firstName值为john

下面代码输出什么，为什么

func() 
function func() { 
  alert(this)
}

func函数中的this为全局作用域中的this为window

下面代码输出什么

document.addEventListener('click', function(e){
    console.log(this);
    setTimeout(function(){
        console.log(this);
    }, 200);
}, false);

在事件处理程序中this代表事件源DOM对象，所以第一个this为document。
setTimeout、setInterval这两个方法执行的函数this是全局对象所以结果为window

下面代码输出什么，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)

call作用为调用john对象，并且传入john对象参数，所以alert中的this为john，最终结果为john

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指什么
      this.showMsg();
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

此代码中$btn事件中的this指的是$btnDOM元素，所以this.showMsg这里有问题，因为showMsg函数在module对象中,与this所指的$btn并无关联，修改结果如下

var module= {
  bind: function(){
    var self=this    //将这里的this   module保存为self
    $btn.on('click', function(){
      console.log(this) //this指什么
      self.showMsg();   
    })
  },
  
  showMsg: function(){
    console.log('饥人谷');
  }
}

或者

      var module= {
 bind: function(){
    $btn.on('click', function(){
     console.log(this) //this指什么
     this.showMsg();
   }.bind(this))
 },

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