apply、call 、bind有什么作用,什么区别
作用
- bind是返回一个新函数,并且使函数内部的this为传入的第一个参数。
- 而apply和call是调用一个函数,传入函数执行上下文及参数
区别:
- bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的 this 值。还可以配合setTimeout使用。
- apply()与 call()非常相似,不同之处在于提供参数的方式。就是call()方法接受的是若干个参数的列表,而apply()方法接受的是一个包含多个参数的数组。
function joinstr(){
console.log( [].join.call(arguments,'-')) //a-b-c
var join=[].join.bind(arguments)
console.log(join('-'))//a-b-c
}
joinstr('a','b','c')
以下代码输出什么?
var john = {
firstName: "John"
}
function func() {
alert(this.firstName + ": hi!")
}
john.sayHi = func
john.sayHi()
输出结果为join:hi!
john.sayHi = func执行完后,join对象为
john{
fistName:"john"
sayHi:function func(){.....}
}
所以最后执行john.sayHi()时this.firstName指的是john.firstName值为john
下面代码输出什么,为什么
func()
function func() {
alert(this)
}
func函数中的this为全局作用域中的this为window
下面代码输出什么
document.addEventListener('click', function(e){
console.log(this);
setTimeout(function(){
console.log(this);
}, 200);
}, false);
在事件处理程序中this代表事件源DOM对象,所以第一个this为document。
setTimeout、setInterval这两个方法执行的函数this是全局对象所以结果为window
下面代码输出什么,why
var john = {
firstName: "John"
}
function func() {
alert( this.firstName )
}
func.call(john)
call作用为调用john对象,并且传入john对象参数,所以alert中的this为john,最终结果为john
以下代码有什么问题,如何修改
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
此代码中$btn事件中的this指的是$btnDOM元素,所以this.showMsg这里有问题,因为showMsg函数在module对象中,与this所指的$btn并无关联,修改结果如下
var module= {
bind: function(){
var self=this //将这里的this module保存为self
$btn.on('click', function(){
console.log(this) //this指什么
self.showMsg();
})
},
showMsg: function(){
console.log('饥人谷');
}
}
或者
var module= {
bind: function(){
$btn.on('click', function(){
console.log(this) //this指什么
this.showMsg();
}.bind(this))
},
showMsg: function(){
console.log('饥人谷');
}
}