1. call, apply 有什么作用？有什么区别？
call和apply用来直接指定this的绑定对象；
区别是call直接传入参数，而apply传入的是数组；
fn.call(context, p1, p2,...);
fn.apply(context, [p1,p2,...]);
代码题：
1.以下代码输出是什么？
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
- 显示弹窗：John：hi！
Paste_Image.png
2. 下面代码输出的是什么？为什么？
func()
function func() {
alert(this)
}
//window
- 返回
window对象；因为： - 声明提前，
func()执行命令alert(this); -
func()运行在全局作用域window下，故this指向window
3. 下面代码输出什么？
function fn0() {
function fn() {
console.log(this);
}
fn();
}
fn0();
document.addEventListener('click', function(e) {
console.log(this);
setTimeout(function() {
console.log(this);
}, 200);
}, false);
// window
// document
// window
- fn0中的
this指向全局作用域； -
document.addEventListener中的this指向document; -
setTimeout中的this指向全局作用域。
4. 下面代码输出什么？为什么？
var john = {
firstName: "John"
}
function func() {
alert(this.firstName)
}
func.call(john)
- 弹窗John
-
func.call(john)使得func中this指向john
5. 下面代码输出什么，为什么？
var john = {
firstName: "John",
surname: "Smith"
}
function func(a, b) {
alert(this[a] + ' ' + this[b])
}
func.call(john, 'firstName', 'surname')
- 弹窗：John Smith
Paste_Image.png
- 通过
call方法将function中的this指向john
6. 以下代码有什么问题？如何修改？
var module = {
bind: function() {
$btn.on('click', function() {
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function() {
console.log('饥人谷');
}
}
- 事件绑定的回调函数中第一个this指向$btn，第二个应该指向module，故需声明一个变量给this赋值，如下：
var module = {
var _this = this;
bind: function() {
$btn.on('click', function() {
console.log(this) //this指什么
_this.showMsg();
})
},
showMsg: function() {
console.log('饥人谷');
}
}
