apply、call 有什么作用,什么区别?
call() 方法在使用一个指定的this值和若干个指定的参数值的前提下调用某个函数或方法.
fn.call(context, param1, param2...)
fn.apply(context, [param1,param2...])
第一个参数是指定的this值,后面的参数为指定的参数列表。apply()方法也可以在调用函数的时候将第一个参数指定为this值,不同之处在于apply第二个参数为传递给调用函数的参数数组。
function fn(){
console.log(this);
}
fn();
var a={};
var fn2=fn.bind(a);
fn2();
fn.call({name:"Tom"});
fn.apply({name:"Tom"});
分析上面的代码和控制台输出,bind的作用返回一个新函数,并且使函数内部的this为传入的第一个参数。call和apply都可以在调用函数的时候将第一个参数指定为this值。
代码示例
1.以下代码输出?
var john = { firstName: "John" };
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func; //将func函数绑定到john对象的sayHi属性。此时func函数就是john对象的方法,那么在调用函数时,this被自然绑定到这个对象上。
john.sayHi() ; //谁在调用函数,谁就是this,所以this是john,代码执行后弹出John:hi!
2.下面代码输出什么,为什么
func() ;
function func() {
alert(this)
} //输出object window,在函数被直接调用时this绑定到全局对象。在浏览器中,window 就是该全局对象。
3.下面代码输出什么?
function fn0(){
function fn(){
console.log(this);
}
fn();
}
fn0(); //此时调用函数的是全局对象window,所以输出window
document.addEventListener('click', function(e){
console.log(this); //点击页面,控制台输出document。绑定事件函数时,this表示触发此事件的DOM对象。
setTimeout(function(){
console.log(this); //setTimeout、setInterval这两个方法执行的函数this也是全局对象
}, 200);
}, false);
4.以下代码输出?
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john); //输出John.call方法可以在函数调用的时候将第一个参数设置为this值,所以现在的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。call方法第一个参数为函数调用时的this值,后面为函数的参数列表。
6.以下代码有什么问题,如何修改
var $btn=$('button');
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //这里的this指的是触发此事件的DOM对象,不是module。
this.showMsg(); //由于this是$btn,所以在执行这句是会报错。
})
},
showMsg: function(){
console.log('饥人谷');
}
}
module.bind();
将代码修改为:
var $btn=$('button');
var module= {
bind: function(){
var me=this; //先将this赋给变量me保存起来。在调用函数bind时,这里的this就是对象module。
$btn.on('click', function(){
console.log(this)
me.showMsg(); //此时相当于执行module.showMsg().输出:饥人谷。
})
},
showMsg: function(){
console.log('饥人谷');
}
}
module.bind();