Javascript中的this的指向
初学javascript都会对js的this有很多迷惑比如如下的例子:
var a = 'jack';
var obj = {
a: 'tom',
b: function(){
console.log(this.a);
}
};
var c = obj.b;
c();//输出jack
刚接触js的人可能会用一些其他面向对象的语言理解,觉得这里输出的应该是tom,但实际上这里输出的时jack , 但这是问什么了?且楼主来一步步的分析.
在js中常见的this的指向分为4种:
1. 对象中的this指向
什么是对象中的this , 也就是对象的属性是function, 而function中存在对this的使用 , 比如说如下例子:
var obj = {
a: 'tom',
b: function(){
console.log(this.a);
}
};
obj.b();//输出的是tom
这种情况this指向的调用该函数的对象 , 这里就是obj , 再比如如下例子:
var obj = {
a: 'tom',
b: function(){
console.log(this.a);
},
c: {
c0: 'rose',
c1: function(){
console.log(this.c0);
}
}
};
obj.c.c1();//输出jack
函数调用时包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象
但是在开篇的例子中又是为什么呢?
var a = 'jack';
var obj = {
a: 'tom',
b: function(){
console.log(this.a);
}
};
var c = obj.b;
c();//输出jack
大家要记住一句话this指向它最后调用它的对象,也就是这里的c虽然被赋予了obj.b的值,但是变量c依然是被挂在全局的window对象上,所以最后this的指向是全局的window对象
2. 直接调用函数
也就直接使用声明式或变量式声明函数 , 在全局中直接调用函数
var name = 'tom';
var a = function(){
var name = 'jack';
console.log(this.name);
};
console.log(a());//输出tom
这里的a是在全局的window在声明, 调用时也是等价于window.a()所以this的指向为全局的window对象,包括这种情况:
var name = 'tom';
var a = function(){
var name = 'jack';
function b(){
console.log(this.name);
}
b();//输出tom
console.log(this.name);
};
console.log(a());//输出tom
a和b输出的都是tom , 函数b 在函数a中随后调用时却还是指向全局的window对象 , 这是为什么呢? 大家可以记住一句话 , js中只要没有对象直接调用函数 , 函数调用时this的指向都会被指向到全局的window对象
像之前的例子调用时都是 , obect.function() , this的指向都会被指向到object上, 如
var obj = {
a: 'tom',
b: function(){
console.log(this.a);
}
};
obj.b();//输出tom
像开篇的例子用这句话也很好理解 , 函数c的调用并没有对象的调用所以会被指向到全局的window对象上
var a = 'jack';
var obj = {
a: 'tom',
b: function(){
console.log(this.a);
}
};
var c = obj.b;
c();//输出jack
3. 构造函数中的this的指向
Js中的构造函数跟普通函数并没有明显的划分 , 当任意一个普通函数用于创建一类对象时,它就被称作构造函数,或构造器。一个函数要作为一个真正意义上的构造函数,需要满足下列条件:
1、 在函数内部对新对象(this)的属性进行设置,通常是添加属性和方法。
2、 构造函数可以包含返回语句(不推荐),但返回值必须是this,或者其它非对象类型的值。
例如:
function People(name, age, sex){
this.name = name;
this.age = age;
this.sex= sex;
}
var p = new People('tom',12,'男');
console.log(p.name + p.sex + p.age); //输出tom男12
这里的this指向的就是当前被创建的对象
当然构造函数也有特殊情况, 例如:
function People(name, age, sex){
this.name = name;
this.age = age;
this.sex= sex;
return {};
}
var p = new People('tom',12,'男');
console.log(p.name);//输出undefined
这里也不难理解构造函数要求返回值为this或非对象类型 , 所以这里的People并不是严格意义上的构造函数 , 这里声明的p其实只是函数People的返回值 , 所以最后的输出为undefined , 如果把这里的返回值改成非对象类型 , 最后的结果就不一样了
function People(name, age, sex){
this.name = name;
this.age = age;
this.sex= sex;
return 1;
}
var p = new People('tom',12,'男');
console.log(p.name);//输出tom
这里的People就是严格意义上的构造函数了 , 所以this还是指向当前被创建的对象
4. call或apply调用函数
Call和apply函数其实用法差不多 , 第一参数都是调用函数的对象 , 后面的参数都是函数的参数 , 只是call函数的传参方式为不限个数的传参 , 即call([thisObject[,arg1 [,arg2 [,...,argn]]]]) 后面的参数分别对应函数的调用的参数 , 而apply函数第一个参数和call的一样 , 第二个参数为数组类型 , apply([thisObj [,argArray] ]) 数组的每一个元素也分别对应函数调用的参数 , 当使用call或apply函数是 , 方法中的this会被重新指向到call或apply函数的第一个参数 , 例如:
var a = 1;
var b = 2;
var c = {
a: 3,
b: 4
};
function add(){
console.log(this.a + this.b)
}
add();//输出3
add.apply(c);//输出7
第一add调用时并没有对象的直接调用所以会被指向到全局的window对象所以输出结果为3 , 而第一add函数的调用是通过apply函数所以this的指向会被引向到c 所以最后的输出结果为 7
Es6拓展:
Es6中的箭头函数的this指向与es5的this有所不同 , 我们这里提一下: 由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值,所以 call() / apply() / bind() 方法对于箭头函数来说只是传入参数,对它的 this 毫无影响。考虑到 this 是词法层面上的,严格模式中与 this 相关的规则都将被忽略。
1 . 对象中的箭头函数
var a = {
name: 'tom',
b: {
c: () => {
console.log(this);
}
},
};
a.b.c(); //输出window
对象中使用this会被指向到全局的window对象 , 所以在对象中使用箭头函数它this的指向也会被指向到全局的window对象.
2. 方法中箭头函数的调用
var test = function(){
this.time = 1;
setTimeout(()=>{
console.log(this.time);
},100)
};
var t = new test();//输出1
箭头函数中没有this指针 , 所以指向只和他创建时所处的上下文环境有关 , 这里的是构造函数的调用所以test中this的指向为t对象 , 所以箭头函数中的this也是指向还对象