apply、call 、bind有什么作用，什么區(qū)別

作用

• bind是返回一個(gè)新函數(shù)，并且使函數(shù)內(nèi)部的this為傳入的第一個(gè)參數(shù)。
• 而apply和call是調(diào)用一個(gè)函數(shù)，傳入函數(shù)執(zhí)行上下文及參數(shù)

區(qū)別：

• bind() 最簡(jiǎn)單的用法是創(chuàng)建一個(gè)函數(shù)，使這個(gè)函數(shù)不論怎么調(diào)用都有同樣的 this 值。還可以配合setTimeout使用。
• apply()與 call()非常相似，不同之處在于提供參數(shù)的方式。就是call()方法接受的是若干個(gè)參數(shù)的列表，而apply()方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組。

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

輸出結(jié)果為join：hi！
john.sayHi = func執(zhí)行完后，join對(duì)象為
john{
  fistName:"john"
  sayHi:function func(){.....}
}
所以最后執(zhí)行john.sayHi()時(shí)this.firstName指的是john.firstName值為john

下面代碼輸出什么，為什么

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

func函數(shù)中的this為全局作用域中的this為window

下面代碼輸出什么

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

在事件處理程序中this代表事件源DOM對(duì)象，所以第一個(gè)this為document。
setTimeout、setInterval這兩個(gè)方法執(zhí)行的函數(shù)this是全局對(duì)象所以結(jié)果為window

下面代碼輸出什么，why

var john = { 
  firstName: "John" 
}

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

call作用為調(diào)用john對(duì)象，并且傳入john對(duì)象參數(shù)，所以alert中的this為john，最終結(jié)果為john

以下代碼有什么問題，如何修改

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

此代碼中$btn事件中的this指的是$btnDOM元素，所以this.showMsg這里有問題，因?yàn)閟howMsg函數(shù)在module對(duì)象中,與this所指的$btn并無關(guān)聯(lián)，修改結(jié)果如下

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('饑人谷');
 }
}