首先,我们先来简单了解一下在JavaScript中this是什么:
解析器在调用函数时每次都会向函数内部传递一个隐含的参数, 这个隐含的参数就是this,this指向的是一个对象,这个对象我们称为函数执行的上下文对象。
在JavaScript中,根据函数的调用方式的不同,this会指向不同的对象
this的四种情况:
1.以函数的形式调用时,this永远指向window(浏览器)或global(nodejs)
2.以方法的形式调用时,this就是调用方法的那个对象
3.当以构造函数的形式调用时,this就是新创建的那个对象
4.使用call()和apply()调用时,this是指定的那个对象
下面举例子来详细说明:
1.以函数的形式调用时,this永远指向window(浏览器)或global(nodejs)
//以函数声明的方式创建一个函数
function fun(){
console.log(this); //调用函数时会向函数中传递隐含参数this
}
fun(); //===>直接调用函数,在浏览器控制台输出结果为 object window
创建一个函数,当我们以函数形式fun()直接调用时,函数中的this就会指向全局作用域的window对象。
2.以方法的形式调用时,this就指向调用方法的那个对象
//以对象字面量的方式创建一个对象
var obj={
name:'terry',
sayName:function(){
console.log(this);
} //将函数作为一个对象属性的值来调用(即以方法的形式调用)
}
obj.sayName(); // ===>此时会输出obj这个对象
3.当以构造函数的形式调用时,this就是新创建的那个对象
构造函数的执行流程:
1.立刻创建一个新的对象
2.将新建的对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
3.执行函数中的函数体
4.将新建的对象作为一个返回值返回
这四步中只有第3步是需要我们来操作的,1、2、4都是自动完成的
// 构造一个存放人信息的函数
function Person(name,age,gender){
this.name=name,
this.age=age,
this.gender=gender,
this.sayName=function(){
alert(this.name);
}
};
var per=new Person('terry',18,'女'); //定义一个新的对象,将函数赋值给它
per.sayName(); //此时会输出'terry',
4.使用call()和apply()调用时,this是指定的那个对象
语法:函数名.call(obj,实参列表);
函数名.apply(obj,实参列表数组);
作用:改变this指向的对象
区别:call()中实参列表可以接受无数个参数
apply()中只能接受两个参数,一个是对象名,一个参数数组,将参数放到数组中去
//创建一个函数
function fun(a,b){
console.log('a='+a);
console.log('b='+b)
console.log(this.name) //这里大家也可以打印console.log(this),最后输出的是obj这个对象;this.name输出的是obj这个对象的name属性的值。}
//创建一个对象
var obj={
name:'obj',
};
//用对象来调用函数fun,并传入实参 call()
fun.call(obj,1,2); //输出的结果a=1 b=2 obj
//apply() 方法
fun.apply(obj,[1,2]); //输出的结果也是a=1 b=2 obj