es5的this的指向性问题(详解)

在说this的指向性问题之前,咱们先说一下函数的调用位置,调用位置就是函数在代码中被调用的位置。

1、下面我们来看看什么是调用位置和调用栈:


因此调用的位置决定了this的绑定。

2、绑定的规则

2.1默认绑定


打印输出的是4

在代码中,foo()是直接使用不带任何修饰的函数引用进行调用的,因此只能使用默认绑定,如上图

上图是在调用的时候有修饰的函数引用,所以没有找到this的指向,那么我们怎么改能找到this的指向呢?这个时候需要用到call()或者apply来改变this的指向,在for循环中调用的时候改成foo.call(foo,i);来指定this是指向foo函数的。

以上是非严格模式下的this的指向性问题,那在严格模式下,全局对象将无法使用默认绑定,因此this会绑定到undefined.

2.2隐式绑定

调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。


当foo()被调用的时候,它的落脚点确实是指obj对象。当函数引用有上下万文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象,因为调用foo()时this被绑定到obj,因此this.a和obj.a是一样的。

对象属性引用连中只有最顶层或者说是最后一层会影响调用位置。


隐式丢失

一个最常见的this绑定问题就是被隐式绑定的函数会丢失绑定对象,也就是说他它会应用默认绑定,从而把this绑定到全局对象或者undefined上,取决于是否是严格模式。


bar()其实是一个不带任何修饰的函数调用,因此引用了默认绑定,他的输出是全局的a变量中的值,不是2.

还有一种更微妙的情况就是传入回调函数时。


参数传递其实就是一种隐式赋值,因此我们传入函数时也会被隐式赋值

回调函数丢失this绑定是非常常见的,调用回调函数的函数可能会修改this,this的改变都是意想不到的,实际上你无法控制回调函数的执行方式,因此就没有办法控制会影响绑定的位置。

2.3显示绑定

this的显示绑定可以使用call()和apply()方法,他们的第一个参数是对象,他们会把这个对象绑定到this,接着在调用函数时指向这个this,因为可以直接指向this所以的绑定对象,所以称之为显示绑定。

1、硬绑定

显示绑定的一个变种可以解决丢失绑定的问题。


foo的this绑定到了obj,无论之后如何调用函数bar,它总会手动在obj上调用foo,这种绑定是一种显示的强制绑定,因此我们称之为硬绑定。

硬绑定的典型就是应用场景就是创建一个包裹函数,传入所有的参数并返回接收到的所有值。


由于硬绑定是一种非常很常用的模式,所以es5中提供了内置的方法FUN抽屉on。prototype.bind


bind()会返回一个硬编码的新函数,它会把参数设置为this的上下文并调用原始函数。

2api调用的“上下文”

第三方的许多的函数,以及javascript的语言和宿主环境中许多新的内置函数,都提供了有个可选的参数,通常称为上下文,其作用和bind(...)一样,确保你的回调函数使用指定的this。


2.4new绑定

在JavaScript中构造函数只是一些使用new操作符时被调用的函数。他们并不会属于某个类,也不会实例化一个类,实际上他们甚至都不能说是一种特殊的函数类型,他们只是被new操作符调用的普通函数。

实际上并不存在所谓的“构造函数”只有对函数的‘构造调用’

使用new来调用函数,或者发生构造函数调用时,会自动执行下面的操作

1、创建一个全新的对象

2、这个新对象会被执行[[原型]]链接

3、这个新对象会绑定到函数调用的this

4、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象


使用new时来调用foo()时,我们会构造一个新对象并把它绑定到foo()调用中的this上。

判断this的绑定

判断顺序:

1、函数是否在new中调用(new绑定)? 如果是的话this绑定的是新创建的对象。

var bar = new foo();

2、函数是否通过call、apply(显示绑定)或者硬绑定?如果是的话,this绑定的是指定的对象。

var bar = foo.call(obj2)

3、函数是否在某个上下文对象中调用(隐式绑定)

var bar = obj1.foo();

4、如果都是不是的话,使用默认绑定,如果在严格模式下,就绑定到undefined,否则绑定到全局对象。

var bar = foo();

但是也有例外

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

推荐阅读更多精彩内容