Javascript中的this的讲解

jacklove 原创: 2018-06-11 17:37:17 1521浏览

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 相关的规则都将被忽略。