前言

以前在自己部落格寫過，這裡簡單重新複習一下並加點拓展。


之前是粗略版：https://www.cnblogs.com/wangxiaoer5200/p/11981063.html


call、apply、bind的作用是改變函式執行時this的指向，this永遠指向最後呼叫它的這個物件。關於this這裡就不多說了，現在開始康康call/apply/bind

相似點

• 都是用來改變函式的this物件的指向的。
• 第一個引數都是this要指向的物件。
• 都可以利用後續引數傳參。

var xw = {  name : "小王",gender : "男" age : 24, say : function() {console.log(this.name + " , " + this.gender + " ,今年" + this.age); }         

  var xh = {  name : "小黃" ,gender : "女", age : 18 }               

呼叫xw.say(); //這個簡單 打印出：小王，男，今年24

那麼如何用xw的say方法來顯示xh的資料呢。這時候就可以用到call、apply、bind

xw.say.call(xh);  //這時列印的就是：  小黃，女，今年18

xw.say.apply(xh);

xw.say.bind(xh)();
 

區別

• 這裡call和apply的區別主要在於帶參的形式，可以記住apply是以array陣列形式呼叫，和call是...arg形式，bind和call一樣；
• 使用時bind比call和apply呼叫多了(),所以bind返回函式需要自己再執行呼叫一次，而bind和call都是對函式的直接呼叫
  

自己使用js簡單實現這個三個方法

call實現

Function.prototype.mycall = function(obj,...arg){
  const fn = Symbol('test')
  obj[fn] = this
  obj[fn](...arg)
  delete obj[fn]
}
 

apply實現

Function.prototype.myapply=function(obj,arg){
    const fn = Symbol('test')
    obj[fn] = this
    obj[fn](...arg)
    delete obj[fn]
}

bind實現

Function.prototype.myBind = function(obj,...args){
   const Fn = this
   let fBind = function(...args2){
   const isNew = this instanceof fBind
   const context = isNew?this:Object(obj)
   return Fn.call(context,...args,...args2)
  }
   fBind.prototype = Object.create(Fn.prototype)
   return fBind
}
 

然後聲明後試試

後記

perfect! 一個人如果沒有夢想，跟無憂無慮有什麼區別呢？