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();//输出tomconsole.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();//输出3add.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也是指向还对象
本文介绍了Javascript中的this，更多相关内容请关注php中文网。
相关推荐：
