理解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的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。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 205,033评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,725评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,473评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,846评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,848评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,691评论 1 282
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,053评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,700评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,856评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,430评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,034评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2 343

推荐阅读更多精彩内容

  • this在JavaScript中似乎可以视而不见,但不去正视它学到的就只是残缺的JS。抛开这些“形而上”的意义不说...
    棕小渐阅读 294评论 0 2
  • 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁...
    马里奥Joseph阅读 341评论 0 3
  • 原文:Understanding the "this" keyword in JavaScript 许多人被Jav...
    莫提时光阅读 481评论 1 8
  • 1.概念 在JavaScript中,this 是指当前函数中正在执行的上下文环境,因为这门语言拥有四种不同的函数调...
    BluesCurry阅读 1,120评论 0 2
  • 剑的第一层境界是人剑合一 人即是剑 剑即是人 剑的第二层境界是手中无剑 剑在心中 剑的第三层境界是手中无剑,心中亦...
    Vesper_Xiao阅读 267评论 0 2