判断函数中this的指向
我们在使用函数时,常常用到this,判断不同场景下this的指向是非常重要的。在此做一个总结,方便大家学习。
函数的使用场景,基本包含如下几种场景。
- 普通函数中的this-------window
- 对象,方法中this------当前实例对象
- 定时器函数中的this----window
- 构造函数中的this------实例对象
- 原型对象方法中的this-----实例对象
这个结果的分析其实非常简单,函数要想执行一定需要对象来调用(普通函数也一样)。
普通方法和定时器中的方法,看似没有对象来调用,他们都默认是window的方法,大家也知道在使用时,window又可以省略。
其余几种情况,不管是在对象的创建过程中,还是在对象中。这些方法最终都需要对象去调用,所以这些方法中的this都是指所在或者创建的对象。
call()、apply()的作用及区别
上边我们已经分析过函数中this的指向,也就是函数在执行时this代表的是谁。而call和apply的作用就是改变函数执行过程中this的指向,他们两个的作用完全一样,只是在使用方式上稍有差别。
以普通方法为例来分析call()的作用:
var name = "小明";
function text(){
console.log(this.name);
}
text();//小明
根据上边的分析,我们知道普通方法在执行时,默认为window在调用,那么在方法中this就是window。
this.name===window.name,所以输出的小明。
var name = "小明";
function text(){
console.log(this.name);
}
text();//小明
var person = {
name:"小红"
}
text.call(person);//小红
当要执行text方法时,我们使用了text.call(person)的方式,这时函数还是正常执行,只是此时函数中的this不管原来是谁,都变成了person,所以输出this.name就是输出person.name;
call()和apply()的区别:
函数有带参函数,call和apply的差别就是在传入参数时的方式不同。call是一个一个的传,而apply是将参数以数组为单位传入函数。还是上边的例子,我们把它改为带参函数。
var name = "小明";
function text(age){
console.log(this.name);
console.log(age)
}
text(18);//小明 18
var person = {
name:"小红"
}
text.call(person,18);//小红 18
var name = "小明";
function text(age){
console.log(this.name);
console.log(age)
}
text(18);//小明 18
var person = {
name:"小红"
}
text.apply(person,[18]);//小红 18
这就是call 和apply的区别,只是在传参方式不同。