問題1: apply、call 、bind有什么作用,什么區(qū)別?
- 作用:
都是為了改變某個(gè)函數(shù)運(yùn)行時(shí)的上下文(context),改變函數(shù)體內(nèi)部 this 的指向。 - 區(qū)別:
apply()
方法接受的是一個(gè)包含多個(gè)參數(shù)的數(shù)組
call()
方法接受的是若干個(gè)參數(shù)的列表
var func = function(arg1, arg2) {
...
};
func.apply(this, [arg1, arg2]);
func.call(this, arg1, arg2);
bind()
bind 是返回對(duì)應(yīng)函數(shù),便于稍后調(diào)用;apply 、call 則是立即調(diào)用 。
document.addEventListener('click', function(e){
console.log(this); // this 輸出 #document 指向當(dāng)前事件對(duì)象
setTimeout(function(){
console.log(this); // bind(this) 得到新的函數(shù) 里面的this就是傳遞當(dāng)前對(duì)象
}.bind(this), 200);
}, false);
問題2: 以下代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
// john.sayHi() = func(),函數(shù)里的 this 指向 join對(duì)象,this.firstName = "John" , 輸出結(jié)果:John: hi!
問題3: 下面代碼輸出什么?
func()
function func() {
alert(this)
}
// func() 里面的 this 不帶表函數(shù)本身,this帶表全局, 輸出 [object Window]
問題4:下面代碼輸出什么?
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
// 第一個(gè) this 輸出 #document 指向當(dāng)前事件對(duì)象,第二個(gè) this 輸出 Window setTimeout方法執(zhí)行的函數(shù)this就是全局對(duì)象
問題5:下面代碼輸出什么?
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
func.call(john)
// call() 第一個(gè)參數(shù)代表傳入的當(dāng)前this指向,所以 func() 里面的this就是傳入的參數(shù)John。
問題6: 以下代碼有什么問題,如何修改?
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) // this指什么 $btn
this.showMsg(); // 報(bào)錯(cuò)
})
},
showMsg: function(){
console.log('饑人谷');
}
}
方法一:
var $btn = $('#btn');
var module= {
bind: function(){
var _this = this;
$btn.on('click', function(){
console.log(_this) // this指什么 module對(duì)象
_this.showMsg(); // 饑人谷
})
},
showMsg: function(){
console.log('饑人谷');
}
}
module.bind();
方法二:
var $btn = $('#btn');
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么 module對(duì)象
this.showMsg(); // 饑人谷
}.bind(this))
},
showMsg: function(){
console.log('饑人谷');
}
}
module.bind();