一、apply、call 有什么作用，什么區(qū)別？
1.二者都屬于function.prototype的一個(gè)方法，以另一個(gè)對(duì)象替換當(dāng)前對(duì)象。
2.區(qū)別：
- function.prototype.call()方法可以指定函數(shù)內(nèi)部this的指向,即函數(shù)執(zhí)行時(shí)所在的作用域。
var obj={};
var fn=function(){
return this;
}
fn()===this; //true
fn.call(obj)===this; //false
fn.call(obj)===obj; //true
fn()執(zhí)行時(shí)所在的作用域是全局環(huán)境,所以this是window,而fn.call(obj)則是在對(duì)象obj環(huán)境下執(zhí)行的,所以此時(shí)的this指向obj。
- funciton.prototype.apply()方法的作用與call方法類似，也是改變this指向，然后再調(diào)用該函數(shù)。唯一的區(qū)別就是，它幾首一個(gè)數(shù)組作為函數(shù)執(zhí)行時(shí)的參數(shù)。
function fn(x,y){
return x+y;
}
fn.call(null,1,1); //2
fn.apply(null,[1,1]); //2
fn函數(shù)本來接收兩個(gè)參數(shù),使用apply方法之后,就變成可以接收一個(gè)數(shù)組作為參數(shù)。
二、以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
結(jié)果：Johb:hi!
三、下面代碼輸出什么，為什么？
func();
function func() {
alert(this);
}
結(jié)果：[object Window]
原因：因?yàn)樵摵瘮?shù)是在全局環(huán)境window下執(zhí)行的。
四、下面代碼輸出什么
function fn0(){
function fn(){
console.log(this); //輸出的是window，因?yàn)閠his是在window下調(diào)用的
}
fn();
}
fn0();
document.addEventListener('click', function(e){
console.log(this); //輸出的是document，因?yàn)檫@個(gè)是事件綁定，所以this指的是事件源DOM對(duì)象
setTimeout(function(){
console.log(this); //輸出的是window
}, 200);
}, false);
五、下面代碼輸出什么，why？
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
結(jié)果：John
原因：函數(shù)實(shí)例func調(diào)用的call方法，使其執(zhí)行環(huán)境在對(duì)象john下。所以函數(shù)func內(nèi)部的this指向john對(duì)象。
六、代碼輸出？
var john = {
firstName: "John",
surname: "Smith"
}
function func(a, b) {
alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname')
結(jié)果：John Smith
七、以下代碼有什么問題，如何修改？
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么? 輸出的是&btn的dom對(duì)象
this.showMsg(); //報(bào)錯(cuò),因?yàn)檫@里的this指向的還是&btn的dom對(duì)象,在dom對(duì)象中找不到showMsg(),所以報(bào)錯(cuò)
})
},
showMsg: function(){
console.log('饑人谷');
}
}
修改方法：
<body>
<button class="btn">點(diǎn)擊</button>
<script>
var $btn=$(".btn");
var module={
bind:function(){
$btn.on("click",function(){
console.log(this);
module.showMsg();
})
},
showMsg:function(){
console.log("饑人谷");
}
}
module.bind();
</script>
</body>
