欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

Javascript中的this的讲解

程序员文章站 2022-03-19 18:00:37
...

Javascript中的this的指向

初学javascript都会对jsthis有很多迷惑比如如下的例子:

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

ab输出的都是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); //输出tom12

这里的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. callapply调用函数

Callapply函数其实用法差不多 , 第一参数都是调用函数的对象 , 后面的参数都是函数的参数 , 只是call函数的传参方式为不限个数的传参 , call([thisObject[,arg1 [,arg2 [,...,argn]]]])后面的参数分别对应函数的调用的参数 , apply函数第一个参数和call的一样 , 第二个参数为数组类型 , apply([thisObj [,argArray] ])数组的每一个元素也分别对应函数调用的参数 , 当使用callapply函数是 , 方法中的this会被重新指向到callapply函数的第一个参数 , 例如:

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指向与es5this有所不同 , 我们这里提一下: 由于箭头函数不绑定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指针 , 所以指向只和他创建时所处的上下文环境有关 , 这里的是构造函数的调用所以testthis的指向为t对象 , 所以箭头函数中的this也是指向还对象

本文介绍了Javascript中的this,更多相关内容请关注。

相关推荐:

关于微信小程序上传word、txt、Excel、PPT等文件的详解

微信小程序下载文件,如何通过后端PHP处理

介绍提高MySQL性能的7个技巧

以上就是Javascript中的this的讲解的详细内容,更多请关注其它相关文章!