你不懂JS:this与对象原型 第一章:this是什么?

官方中文版原文链接

感谢社区中各位的大力支持,译者再次奉上一点点福利:阿里云产品券,享受所有官网优惠,并抽取幸运大奖:点击这里领取

JavaScript中最令人困惑的机制之一就是this关键字。它是一个在每个函数作用域中自动定义的特殊标识符关键字,但即便是一些老练的开发者也对它到底指向什么感到困扰。

任何足够 先进 的技术都跟魔法没有区别。-- Arthur C. Clarke

JavaScript的this机制实际上没有 那么 先进,但是开发者们总是在大脑中引用这句话来表达“复杂”和“混乱”,毫无疑问,如果没有清晰的理解,在 你的 困惑中this可能看起来就是彻头彻尾的魔法。

注意: “this”这个词是在一般的论述中极常用的代词。所以,特别是在口头论述中,很难确定我们是在将“this”作为一个代词使用,还是在将它作为一个实际的关键字识别符使用。为了表意清晰,我会总是使用this来代表特殊的关键字,而在其他情况下使用“this”或 this 或this。

为什么用 this

如果对于那些老练的JavaScript开发者来说this机制都是如此的令人费解,那么有人会问为什么这种机制会有用?它带来的麻烦不是比好处多吗?在讲解 如何 有用之前,我们应当先来看看 为什么 有用。

让我们试着展示一下this的动机和用途:

function identify() {
    return this.name.toUpperCase();
}

function speak() {
    var greeting = "Hello, I'm " + identify.call( this );
    console.log( greeting );
}

var me = {
    name: "Kyle"
};

var you = {
    name: "Reader"
};

identify.call( me ); // KYLE
identify.call( you ); // READER

speak.call( me ); // Hello, I'm KYLE
speak.call( you ); // Hello, I'm READER

如果这个代码段 如何 工作让你困惑,不要担心!我们很快就会讲解它。只是简要地将这些问题放在旁边,以便于我们可以更清晰的探究 为什么

这个代码片段允许identify()speak()函数对多个 环境 对象(meyou)进行复用,而不是针对每个对象定义函数的分离版本。

与使用this相反地,你可以明确地将环境对象传递给identify()speak()

function identify(context) {
    return context.name.toUpperCase();
}

function speak(context) {
    var greeting = "Hello, I'm " + identify( context );
    console.log( greeting );
}

identify( you ); // READER
speak( me ); // Hello, I'm KYLE

然而,this机制提供了更优雅的方式来隐含地“传递”一个对象引用,导致更加干净的API设计和更容易的复用。

你的使用模式越复杂,你就会越清晰地看到:将执行环境作为一个明确参数传递,通常比传递this执行环境要乱。当我们探索对象和原型时,你将会看到一组可以自动引用恰当执行环境对象的函数是多么有用。

困惑

我们很快就要开始讲解this是如何 实际 工作的,但我们首先要摒弃一些误解——它实际上 不是 如何工作的。

在开发者们用太过于字面的方式考虑“this”这个名字时就会产生困惑。这通常会产生两种臆测,但都是不对的。

它自己

第一种常见的倾向是认为this指向函数自己。至少,这是一种语法上的合理推测。

为什么你想要在函数内部引用它自己?最通常的理由是递归(在函数内部调用它自己)这样的情形,或者是一个在第一次被调用时会解除自己绑定的事件处理器。

初次接触JS机制的开发者们通常认为,将函数作为一个对象(JavaScript中所有的函数都是对象!),可以让你在方法调用之间储存 状态(属性中的值)。这当然是可能的,而且有一些有限的用处,但这本书的其余部分将会阐述许多其他的模式,提供比函数对象 更好 的地方来存储状态。

过一会儿我们将探索一个模式,来展示this是如何不让一个函数像我们可能假设的那样,得到它自身的引用的。

考虑下面的代码,我们试图追踪函数(foo)被调用了多少次:

function foo(num) {
    console.log( "foo: " + num );

    // 追踪`foo`被调用了多少次
    this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        foo( i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// `foo`被调用了多少次?
console.log( foo.count ); // 0 -- 这他妈怎么回事……?

foo.count 依然0, 即便四个console.log语句明明告诉我们foo(..)实际上被调用了四次。这种失败来源于对于this (在this.count++中)的含义进行了 过于字面化 的解释。

当代码执行foo.count = 0时,它确实在函数对象foo中加入了一个count属性。但是对于函数内部的this.count引用,this其实 根本就不 指向那个函数对象,即便属性名称一样,但根对象也不同,因而产生了混淆。

注意: 一个负责任的开发者 应当 在这里提出一个问题:“如果我递增的count属性不是我以为的那个,那是哪个count被我递增了?”。实际上,如果他再挖的深一些,他会发现自己不小心创建了一个全局变量count(第二章解释了这是 如何 发生的),而且它当前的值是NaN。当然,一旦他发现这个不寻常的结果后,他会有一堆其他的问题:“它怎么是全局的?为什么它是NaN而不是某个正确的计数值?”。(见第二章)

与停在这里来深究为什么this引用看起来不是如我们 期待 的那样工作,并且回答那些尖锐且重要的问题相反,许多开发者简单地完全回避这个问题,转向一些其他的另类解决方法,比如创建另一个对象来持有count属性:

function foo(num) {
    console.log( "foo: " + num );

    // 追踪foo被调用了多少次
    data.count++;
}

var data = {
    count: 0
};

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        foo( i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// foo被调用了多少次?
console.log( data.count ); // 4

虽然这种方式确实“解决”了问题,但不幸的是它简单地忽略了真正的问题——缺乏对于this的含义和其工作方式上的理解——反而退回到了一个他更加熟悉的机制的舒适区:词法作用域。

注意: 词法作用域是一个完善且有用的机制;我不是在用任何方式贬低它的作用(参见本系列的 "作用域与闭包")。但在如何使用this这个问题上总是靠 ,而且通常都犯 ,并不是一个退回到词法作用域,而且从不学习 为什么 this不跟你合作的好理由。

为了从函数对象内部引用它自己,一般来说通过this是不够的。你用通常需要通过一个指向它的词法标识符(变量)得到函数对象的引用。

考虑这两个函数:

function foo() {
    foo.count = 4; // `foo` 引用它自己
}

setTimeout( function(){
    // 匿名函数(没有名字)不能引用它自己
}, 10 );

第一个函数,称为“命名函数”,foo是一个引用,可以用于在它内部引用自己。

但是在第二个例子中,传递给setTimeout(..)的回调函数没有名称标识符(所以被称为“匿名函数”),所以没有恰当的办法引用函数对象自己。

注意: 在函数中有一个老牌儿但是现在被废弃的,而且令人皱眉头的arguments.callee引用 指向当前正在执行的函数的函数对象。这个引用通常是匿名函数在自己内部访问函数对象的唯一方法。然而,最佳的办法是完全避免使用匿名函数,至少是对于那些需要自引用的函数,而使用命名函数(表达式)。arguments.callee已经被废弃而且不应该再使用。

对于当前我们的例子来说,另一个 好用的 解决方案是在每一个地方都使用foo标识符作为函数对象的引用,而根本不用this

function foo(num) {
    console.log( "foo: " + num );

    // 追踪`foo`被调用了多少次
    foo.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        foo( i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// `foo`被调用了多少次?
console.log( foo.count ); // 4

然而,这种方法也类似地回避了对this真正 理解,而且完全依靠变量foo的词法作用域。

另一种解决问题的方法是强迫this指向foo函数对象:

function foo(num) {
    console.log( "foo: " + num );

    // 追踪`foo`被调用了多少次
    // 注意:由于`foo`的被调用方式(见下方),`this`现在确实是`foo`
    this.count++;
}

foo.count = 0;

var i;

for (i=0; i<10; i++) {
    if (i > 5) {
        // 使用 `call(..)`,我们可以保证`this`指向函数对象(`foo`)
        foo.call( foo, i );
    }
}
// foo: 6
// foo: 7
// foo: 8
// foo: 9

// `foo`被调用了多少次?
console.log( foo.count ); // 4

与回避this相反,我们接受它。 我们将会更完整地讲解这样的技术 如何 工作,所以如果你依然有点儿糊涂,不要担心!

它的作用域

第二常见的对this的含义的误解,是它不知怎的指向了函数的作用域。这是一个刁钻的问题,因为在某一种意义上它有正确的部分,而在另外一种意义上,它是严重的误导。

明确地说,this不会以任何方式指向函数的 词法作用域。作用域好像是一个将所有可用标识符作为属性的对象,这从内部来说是对的。但是JavasScript代码不能访问作用域“对象”。它是 引擎 的内部实现。

考虑下面代码,它(失败的)企图跨越这个边界,用this来隐含地引用函数的词法作用域:

function foo() {
    var a = 2;
    this.bar();
}

function bar() {
    console.log( this.a );
}

foo(); //undefined

这个代码段里不只有一个错误。虽然它看起来是在故意瞎搞,但你看到的这段代码,是从公共的帮助论坛社区中被交换的真实代码中提取出来的。真是难以想象对this的臆想是多么的误导人。

首先,试图通过this.bar()来引用bar()函数。它几乎可以说是 碰巧 能够工作,我们过一会儿再解释它是 如何 工作的。调用bar()最自然的方式是省略开头的 this.,而仅对标识符进行词法引用。

然而,写下这段代码的开发者试图用thisfoo()bar()的词法作用域间建立一座桥,使得bar()可以访问foo()内部作用域的变量a这样的桥是不可能的。 你不能使用this引用在词法作用域中查找东西。这是不可能的。

每当你感觉自己正在试图使用this来进行词法作用域的查询时,提醒你自己:这里没有桥

什么是this

我们已经列举了各种不正确的臆想,现在让我们把注意力this机制是如何真正工作的。

我们早先说过,this不是编写时绑定,而是运行时绑定。它依赖于函数调用的上下文条件。this绑定和函数声明的位置无关,反而和函数被调用的方式有关。

当一个函数被调用时,会建立一个活动记录,也称为执行环境。这个记录包含函数是从何处(call-stack)被调用的,函数是 如何 被调用的,被传递了什么参数等信息。这个记录的属性之一,就是在函数执行期间将被使用的this引用。

下一章中,我们将会学习寻找函数的 调用点(call-site) 来判定它的执行如何绑定this

复习

对于那些没有花时间学习this绑定机制如何工作的JavaScript开发者来说,this绑定一直是困惑的根源。猜测,试错,或者盲目地从Stack Overflow的回答中复制粘贴,都不是有效或正确利用this这么重要的机制的方法。

为了学习this,你必须首先学习this不是 什么,不论是哪种把你误导至何处的臆测或误解。this既不是函数自身的引用,也不是函数词法作用域的引用。

this实际上是在函数被调用时建立的一个绑定,它指向 什么 是完全由函数被调用的调用点来决定的。

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

推荐阅读更多精彩内容