apply、call 的作用及区别
- 作用：在指定
this值和参数值的前提下去调用函数或方法。
- 区别：
A for array,C for comma ! apply方法接受的是一个包含多个参数的数组，而call方法接受的是一个参数列表。
theFunction.call( this, arg1, arg2, arg3... )theFunction.apply( this, [arg1,arg2,arg3...] )
小练习
1.以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func // 把 func 拷贝了一份，存在对象john的sayHi属性中
john.sayHi() // 输出 "john: hi!" 这个函数的拥有者是john这个对象 this指向john
2.下面代码输出什么，为什么
func() // 输出 window对象 这个函数的拥有者是window对象或称全局对象
function func() {
alert(this)
}
3.下面代码输出什么
function fn0(){
function fn(){
console.log(this);
}
fn();
}
fn0(); // 输出window对象 fn0这个函数的拥有者是window对象 其内部的this指向window对象
document.addEventListener('click', function(e){
console.log(this); // 点击 输出document对象 实质是拷贝了一份函数给document的click属性 这个函数属于document对象
setTimeout(function(){
console.log(this); // 200毫秒后 输出window对象 setTimeout是运行在全局环境下的 属于window对象
}, 200);
}, false);
4.下面代码输出什么，why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john) // 输出 "John" call在指定了john作为this的前提下去调用了func
5.代码输出？
var john = {
firstName: "John",
surname: "Smith"
}
function func(a, b ) {
alert( this[a] + ' ' + this[b] )
}
func.call(john, 'firstName', 'surname') // 输出 "John Smith" call在指定john作为this的前提下调用了func
6.以下代码有什么问题，如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指的是btn这个元素 实质拷了一份函数给btn的click属性 函数属于btn
this.showMsg(); // 报错 这不是一个函数
})
},
showMsg: function(){
console.log('饥人谷');
}
}
var module= {
bind: function(){
var self=this;
$btn.on('click', function(){
console.log(this)
self.showMsg(); // 本来我是直接改成module的 看了老师对育薇同学的点评 发现以后改名的话会出问题 其他人不容易发现里面这个东西。。维护太艰难 也意识到工程化模块化的重要性了
})
},
showMsg: function(){
console.log('饥人谷');
}
}
7.下面代码输出什么? why
obj = {
go: function() { alert(this) }
}
obj.go(); // 输出 obj对象 这个函数属于obj
(obj.go)(); // 输出 obj对象 全局中并没有这个函数 函数还是在obj中是属于obj的
(a = obj.go)(); // 输出 window对象 函数被赋值给了全局变量a再遇到括号执行了 这个函数属于window对象
(0 || obj.go)(); // 输出 obj对象 看了同学们的解释才知道 多了一个传递的过程 以一个全局变量做中转来存储结果 所以与上一例相同
