美文网首页
理解JavaScript中的this

理解JavaScript中的this

作者: 小T果农 | 来源:发表于2018-11-15 15:16 被阅读0次

前言

做为一个初学者,原型与闭包可以说是 JavaScirpt 中理解起来最难的部分了,当然,目前了解的也只是了解到了一些皮毛。遂对以前项目中的一些了解,和个人理解总结一下 。

分类

由于this处于不同的特定位置,所以this的指向也是不同的,大致可以分为:

    1,全局下的this,

    2,局部函数中的this

this包含在一段函数或者代码中,我们称之为‘代码段’,"代码段"可以分为三种:

全局代码

函数体

eval代码(eval就不讨论了)

每一个"代码段"都会在某一个特定位置当中执行,而在每一个代码段执行之前,都会在特定位置生成相应的环境,由于特定位置不同生成的环境不同,所以this的指向也就不同,也就是上面提到的两种。

全局中的this

在全局执行上下文中(在任何函数体外部),this都指向全局对象:

浏览器结果 代码段

在函数内部,this的值取决与函数被调用的方式。

this的值在函数定义的时候是确定不了的,只有函数调用的时候才能确定this的指向。

实际上this的最终指向的是那个调用它的对象。(也不一定正确)

函数中的this

对于全局的方法调用,this指向window对象(node下为global):

但值得注意的是,以上代码是在非严格模式下。然而,在严格模式下,this的值将保持它进入执行上下文的值:

即在严格模式下,如果this没有被执行上下文定义,那它为undefined。

特定位置生成环境时

若方法被window(或global)对象调用(称为全局调用),即执行window.foo(),那this将会被定义为window(或global);

若被普通对象调用,即执行obj.foo(),那this将会被定义为obj对象;(称为对象调用)

但若未被对象调用,即直接执行foo(),在非严格模式下,this的值默认指向全局对象window(或global),在严格模式下,this将保持为undefined。

通过this调用全局变量:

对于全局调用,this指向的是全局对象window(或global)。(注意严格模式的不同)

1,作为对象的方法

当函数作为对象的方法调用时,它的this值是调用该函数的对象。也就是说,函数的this值是在函数被调用时确定的,在定义函数时确定不了(箭头函数除外)。

1,this 的值同时也只受最靠近的成员引用的影响,

2,在原型链中,this 的值为当前对象

虽然这里调用的是一个继承方法,但this所指向的依然是tang对象。

2,函数调用apply、call、bind时

当一个函数在其主体中使用this关键字时,可以通过使用函数继承自Function.prototype的callapply方法将this值绑定到调用中的特定对象。即this的值就取传入对象的值:

与apply、call不同,使用bind会创建一个与foo具有相同函数体和作用域的函数。但是,特别要注意的是,在这个新函数中,this将永久地被绑定到了bind的第一个参数,无论之后如何调用。

5. 箭头函数

箭头函数是 ES6 语法的新特性,在箭头函数中,this的值与创建箭头函数的上下文的this一致。

在全局代码中,this的值为全局对象:

var foo =(() =>this)

//在浏览器中foo() ===window// true

// 在node中foo() === global// true

其实箭头函数并没有自己的this。所以,调用this时便和调用普通变量一样在作用域链中查找,获取到的即是创建此箭头函数的上下文中的this。

当箭头函数在创建其的上下文外部被调用时,箭头函数便是一个闭包,this的值同样与原上下文环境中的this的值一致。由于箭头函数本身是不存在this,通过call、apply或bind修改this的指向是无法实现的。

作为对象的方法:

箭头函数foo的this被设置为创建时的上下文(在上面代码中,也就是全局对象)的this值,而且无法通过其他调用方式设定foo的this值。

与普通函数对比,箭头函数的this值是在函数创建创建确定的,而且无法通过调用方式重新设置this值。普通函数中的this值是在调用的时候确定的,可通过不同的调用方式设定this值。

总结

this关键字的值取决于其所处的位置(上下文环境):

简单来说就是this的代替的是外层的参数(外层包括全局,函数)

在全局环境中,this的值指向全局对象( window 或 global )。

在函数内部,this的取值取决于其所在函数的调用方式,也就是说this的值是在函数被调用的时候确定的,在创建函数时无法确定。

1,箭头函数是个例外,箭头函数本身不存在this,而在箭头函数中使用this获取到的便是创建其的上下文中的this。

2,使用函数的继承方法call、apply和bind会修改this的指向。

3,使用bind方法会使this的值永久的绑定到给定的对象,无法再通过调用call和apply方法修改this的值,箭头函数调用call、apply或bind方法无法修改this。

相关文章

  • javascript中this的理解

    早期的博客2this是javascript的一个关键字,代表函数运行时,自动生成的一个内部对象,只能在函数内部使用...

  • 理解JavaScript中的this

    前言 做为一个初学者,原型与闭包可以说是 JavaScirpt 中理解起来最难的部分了,当然,目前了解的也只是了解...

  • 理解JavaScript中的this

    理解this JavaScript中的this是其灵活性的表现,同时也因为this的多变性与其他语言的不一致,也成...

  • 理解Javascript中的this

    首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁...

  • javascript中this的理解

    this在javascript中一直是新手难以理解的一部分。其实并不难,只要清楚几种调用模式,就容易掌握了。 函数...

  • 理解Javascript中this

    在 学习JavaScript 的过程中,this 这个关键字常常困扰着初学者甚至一些进阶的开发者;尤其对一些学过面...

  • JavaScript中‘this’理解

    1. this之谜 在JavaScript中,this是当前执行函数的上下文。因为JavaScript有4种不同的...

  • 理解 JavaScript 中的内存管理(Memory Mana

    理解 JavaScript 中的内存管理(Memory Management) 平时写 JavaScript 代码...

  • 全面理解JavaScript中的this

    this在JavaScript中似乎可以视而不见,但不去正视它学到的就只是残缺的JS。抛开这些“形而上”的意义不说...

  • JavaScript中的prototype理解

    JS中的prototype理解

网友评论

      本文标题:理解JavaScript中的this

      本文链接:https://www.haomeiwen.com/subject/tghyfqtx.html