一顷链、問(wèn)答
- apply、call 有什么作用，什么區(qū)別蛤奢？
apply()和call()都可以改變函數(shù)執(zhí)行的環(huán)境也就是this對(duì)象的指向;
區(qū)別在于call(this,arg1,arg2,...)該方法傳遞給函數(shù)的參數(shù)必須是一個(gè)一個(gè)添加它褪，而apply(this,[arg1,arg2,...])傳遞給函數(shù)的參數(shù)必須是一個(gè)數(shù)組或者是類數(shù)組對(duì)象饵骨，數(shù)組中的成員會(huì)依次作為參數(shù)傳進(jìn)去;
二、代碼
1. 以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func //將方法func賦值給john的sayHi屬性
john.sayHi() //jhon對(duì)象調(diào)用方法茫打， 這里可看做john.sayHi.call(john)居触，
//由此可知道this指向john，所以執(zhí)行func的彈框內(nèi)容就是John:hi!
微信截圖_20161020213404.png
2. 下面代碼輸出什么老赤，為什么
func()
function func() {
alert(this)
}//因?yàn)檫@是在全局環(huán)境下調(diào)用func()的轮洋，所以this得指向是window，可以看做func.call()抬旺，
//我們知道當(dāng)call為空的時(shí)候弊予，this就默認(rèn)是指向window的；因此彈框是window對(duì)象
![Uploading 微信截圖_20161020213850_742192.png . . .]
3. 下面代碼輸出什么
function fn0(){
function fn(){
console.log(this);
}
fn();
}
fn0(); //這里同理可看做fn0.call()开财，這個(gè)方法里面嵌套了一層汉柒，我們可以看做下面的樣子
/*
function fn(){
console.log(this);
}
function fn0(){
fn();
}
*/
//fn.call()這樣我們就可以知道this的指向就是window误褪，this在對(duì)象方法里的場(chǎng)合只有在被調(diào)用的時(shí)候我們才能知道他的this指向哪個(gè)對(duì)象；
微信截圖_20161020213850.png
document.addEventListener('click', function(e){
console.log(this);//當(dāng)點(diǎn)擊事件觸發(fā)碾褂，回調(diào)函數(shù)的this指向document對(duì)象
setTimeout(function(){
console.log(this);//指向window
}, 200);
}, false);
4. 下面代碼輸出什么兽间，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) //若是func()的話，會(huì)彈出undefined斋扰，因?yàn)閠his指向window渡八，
//而這里用了原生call()的方法，call()的作用是可以改變函數(shù)的執(zhí)行環(huán)境就是this传货，
//傳進(jìn)去的第一個(gè)參數(shù)就是this對(duì)象屎鳍，所以彈框的內(nèi)容是"John"
微信截圖_20161020213731.png
5. 代碼輸出？
var john = {
firstName: "John",
surname: "Smith"
}
function func(a, b) {
alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') //彈框內(nèi)容是John Smith
微信截圖_20161020213543.png
6.以下代碼有什么問(wèn)題问裕，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //這里的this指向$btn
this.showMsg();//由于this指向$btn逮壁，所以$btn是沒(méi)有定義showMsg這個(gè)屬性的，因此會(huì)報(bào)錯(cuò)
})
},
showMsg: function(){
console.log('饑人谷');
}
}
修改后的代碼1
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<button>點(diǎn)我</button>
<script>
var $btn = $('button') ;
var module= {
bind: function () {
var tmp = this //通過(guò)變量tmp保存this粮宛，這里的this就指向module
$btn.on('click', function () {
console.log(tmp);
tmp.showMsg();
})
},
showMsg: function () {
console.log('饑人谷');
}
};
module.bind();
</script>
</body>
</html>
