apply峡竣、call 的作用及區(qū)別

• 作用：在指定this值和參數(shù)值的前提下去調(diào)用函數(shù)或方法庆杜。
• 區(qū)別：A for array,C for comma ! apply方法接受的是一個包含多個參數(shù)的數(shù)組，而call方法接受的是一個參數(shù)列表蛮拔。
  • theFunction.call( this, arg1, arg2, arg3... )
  • theFunction.apply( this, [arg1,arg2,arg3...] )

小練習(xí)

1.以下代碼輸出什么?

var john = { 
  firstName: "John" 
}
function func() { 
  alert(this.firstName + ": hi!")
}
john.sayHi = func   // 把 func 拷貝了一份述暂，存在對象john的sayHi屬性中
john.sayHi()    // 輸出 "john: hi!"  這個函數(shù)的擁有者是john這個對象 this指向john

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

func()         // 輸出 window對象 這個函數(shù)的擁有者是window對象或稱全局對象

function func() { 
  alert(this)        
}

3.下面代碼輸出什么

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

fn0();  // 輸出window對象 fn0這個函數(shù)的擁有者是window對象 其內(nèi)部的this指向window對象


document.addEventListener('click', function(e){
  console.log(this);     // 點擊 輸出document對象 實質(zhì)是拷貝了一份函數(shù)給document的click屬性 這個函數(shù)屬于document對象
  setTimeout(function(){
    console.log(this);   // 200毫秒后 輸出window對象 setTimeout是運行在全局環(huán)境下的 屬于window對象
  }, 200);
}, false);

4.下面代碼輸出什么建炫，why

var john = { 
  firstName: "John" 
}

function func() { 
  alert( this.firstName )
}
func.call(john)  // 輸出 "John" call在指定了john作為this的前提下去調(diào)用了func

5.代碼輸出畦韭？

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

function func(a, b ) { 
  alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname')  // 輸出 "John Smith" call在指定john作為this的前提下調(diào)用了func

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

var module= {
  bind: function(){
    $btn.on('click', function(){
      console.log(this) //this指的是btn這個元素 實質(zhì)拷了一份函數(shù)給btn的click屬性 函數(shù)屬于btn
      this.showMsg();  // 報錯 這不是一個函數(shù)
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

var module= {
  bind: function(){
    var self=this;
    $btn.on('click', function(){
      console.log(this) 
      self.showMsg(); // 本來我是直接改成module的 看了老師對育薇同學(xué)的點評   發(fā)現(xiàn)以后改名的話會出問題 其他人不容易發(fā)現(xiàn)里面這個東西肛跌。艺配。維護(hù)太艱難 也意識到工程化模塊化的重要性了
    })
  },
  
  showMsg: function(){
    console.log('饑人谷');
  }
}

7.下面代碼輸出什么? why

obj = {
  go: function() { alert(this) }
}

obj.go();    // 輸出 obj對象 這個函數(shù)屬于obj

(obj.go)();     // 輸出 obj對象 全局中并沒有這個函數(shù) 函數(shù)還是在obj中是屬于obj的

(a = obj.go)();     // 輸出 window對象 函數(shù)被賦值給了全局變量a再遇到括號執(zhí)行了 這個函數(shù)屬于window對象

(0 || obj.go)();     // 輸出 obj對象 看了同學(xué)們的解釋才知道 多了一個傳遞的過程 以一個全局變量做中轉(zhuǎn)來存儲結(jié)果 所以與上一例相同