一、apply有送、call 有什么作用胃榕,什么區(qū)別盛险?
1.二者都屬于function.prototype的一個方法,以另一個對象替換當(dāng)前對象勋又。
2.區(qū)別:
- function.prototype.call()方法可以指定函數(shù)內(nèi)部this的指向,即函數(shù)執(zhí)行時所在的作用域苦掘。
var obj={};
var fn=function(){
return this;
}
fn()===this; //true
fn.call(obj)===this; //false
fn.call(obj)===obj; //true
fn()執(zhí)行時所在的作用域是全局環(huán)境,所以this是window,而fn.call(obj)則是在對象obj環(huán)境下執(zhí)行的,所以此時的this指向obj。
- funciton.prototype.apply()方法的作用與call方法類似楔壤,也是改變this指向鹤啡,然后再調(diào)用該函數(shù)。唯一的區(qū)別就是蹲嚣,它幾首一個數(shù)組作為函數(shù)執(zhí)行時的參數(shù)递瑰。
function fn(x,y){
return x+y;
}
fn.call(null,1,1); //2
fn.apply(null,[1,1]); //2
fn函數(shù)本來接收兩個參數(shù),使用apply方法之后,就變成可以接收一個數(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]
原因:因為該函數(shù)是在全局環(huán)境window下執(zhí)行的慎颗。
四、下面代碼輸出什么
function fn0(){
function fn(){
console.log(this); //輸出的是window,因為this是在window下調(diào)用的
}
fn();
}
fn0();
document.addEventListener('click', function(e){
console.log(this); //輸出的是document俯萎,因為這個是事件綁定傲宜,所以this指的是事件源DOM對象
setTimeout(function(){
console.log(this); //輸出的是window
}, 200);
}, false);
五、下面代碼輸出什么夫啊,why函卒?
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
結(jié)果:John
原因:函數(shù)實例func調(diào)用的call方法,使其執(zhí)行環(huán)境在對象john下撇眯。所以函數(shù)func內(nèi)部的this指向john對象报嵌。
六、代碼輸出叛本?
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對象
this.showMsg(); //報錯,因為這里的this指向的還是&btn的dom對象,在dom對象中找不到showMsg(),所以報錯
})
},
showMsg: function(){
console.log('饑人谷');
}
}
修改方法:
<body>
<button class="btn">點擊</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>