理解JavaScript中的this

前言

做为一个初学者,原型与闭包可以说是 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的call或apply方法将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)