JavaScript中的this是让很多开发者头疼的地方,而this关键字又是
一个非常重要的语法点。毫不夸张地说,不理解它的含义,大部分
开发任务都无法完成。
1:this永远指向一个对象(谁调用指向谁);
this指向window的情况
function fn(){
console.log(this);
// 此时 this 指向 window
}
fn();
// 相当于 window.fn()
此时 this 指向 obj
var obj = {
fn:function(){
console.log(this);
}
}
obj.fn();
在构造函数里用new调用,指向创建的新实例对象
在这里插入代码片
function fn(){
console.log(this);
}
let a=new fn();
//输出 {}(指向对象a)
在对象的方法里调用,指向调用它的对象
function fn(num){
this.x=num;
this.fn1=function(){
console.log(this.x)
}
}
let a=new fn(3);
a.fn1();
//输出 3
2:this的指向完全取决于函数调用的位置;
不管在什么地方使用this,它必然会指向某个对象;确定了第一点后,也引出了一个
问题,就是this使用的地方到底在哪里,而第二点就解释了这个问题,但关键是在
JavaScript语言之中,一切皆对象,运行环境也是对象,所以函数都是在某个对象下
运行,而this就是函数运行时所在的对象(环境)。
function fun(){
console.log(this.s);
}
var obj = {
s:'1',
f:fun
}
var s = '2';
obj.f(); //1
fun(); //2
这里看出两个输出值不一样。我们就可以简单概括为:谁调用,this指向谁
改变 this 指向
有时候我们需要根据情况去判断:就需要改变this的指向。我们就是可以使用到
两种方法
call方法
- 语法:fn.call(fn 函数体内 this 的指向哪里,arg1, arg2, …);
- 作用:调用被绑定的函数fn,指定它的 this 指向并传参
function fn(name){
this.name=name;
this.fn1=function(){
console.log(this.name);
}
};
var obj={};
fn.call(obj,'jack');
console.log(obj.name);
obj.fn1();
apply
- List itemapply方法接受的是一个包含多个参数的数组
- 语法:fn.apply(fn 函数体内 this 的指向哪里,[arg1, arg2, …]);
- 作用:调用被绑定的函数fn,指定它的 this 指向并传参
function fn(name,age){
this.name=name;
this.age=age;
this.fn1=function(){
console.log(this.name);
}
};
var obj={};
fn.apply(obj,['jack',18]);
console.log(obj.age);
obj.fn1();