通俗的英文指南——Javascript的原型

特别声明:此篇文章由Sunnylost根据Sebastian的英文文章原名《A Plain English Guide to JavaScript Prototypes》进行翻译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://sporto.github.com/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/以及作者相关信息 ——作者:Sebastian ——译者:Sunnylos

当我开始学习JavaScript的对象模型时,第一反应就是难以置信。我完全被它的原型本质给弄糊涂了,毕竟这是我头一次遇到以原型为基础的语言。因为JS中有构造函数这个概念,所以我看不出使用原型能给JS带来任何的好处。我敢说你们中的大部分人也有同样的经历。著作权归作者所有。

但是当我更多的使用JavaScript后,我不仅开始理解它的对象模型,甚至还喜欢上了它的一部分。感谢JavaScript让我见识到了原型语言的优雅与灵活。现在的我十分推崇原型语言,原因就是相对于以类为基础的语言,原型语言的有着更简单、更灵活的对象模型著作权归作者所有。


javascript中的原型

绝大部分的指南或者教程在开始讲解JavaScript对象时,总是直接从「构造函数」讲起。我觉得这是错误的,因为过早的引入相对复杂的概念,只能让JavaScript看起来更复杂,学起来更迷惑。所以让我们暂时抛开这个概念,先讲讲原型的基础。

原型链(又叫做原型继承)

JavaScript中的所有对象都有原型。当对象收到一个消息(译者注:在这里可以理解为属性查找或方法调用),JavaScript便尝试先从对象自身查找属性,如果查不到,那么该消息就会传递给对象的原型并以此类推。这个工作机制很像以类为基础的语言中的单根继承。
原型链的长度没有限制,但通常来说,过长的原型链会造成代码维护与理解上的困难,因此不值得推荐。

proto对象

理解JavaScript原型链最简单的方式就是通过proto属性。可惜的是,在ES 6之前,proto并不是JavaScript中的标准接口,所以一定不要在工作代码中使用它。尽管有这样的限制,这个属性使我们讲解原型更容易了。


如你所见,proto属性的含义与用法简单明了。即便我们不能在工作的代码中使用proto,但我想上面那些例子已经为你理解JavaScript对象模型打下了坚实的基础。
你可以像下面这么操作,来判断一个对象是否是另一个对象的原型
image.png

原型查找是动态的

你可以在任何时候为原型增加新属性,原型链查找机制会如你所愿找到这些新



新建/更新的属性被赋值给了对象,而不是它的原型
如果你更新一个在原型上已经存在的属性会发生什么?我们来试试:



注意:「kind」属性已经同时存在于person和zack上了。
Object.create

前面解释过使用proto为对象设置原型这个办法并不通用。所以我们介绍另外一种简单方法:Object.create()。这是在ES 5中新增的方法,对于那些古老的浏览器或者JS引擎,可以使用es5-shim来模拟。


你可以向Object.create()方法中传入一个对象,用来给新生成的对象设置特定的属性:
image.png

是不是觉得传进去的对象很麻烦?实际上它必须是这个样子。详细信息可以查看文档

Object.getPrototype

可以使用Object.getPrototypeOf()方法来获得对象的原型:



这里可没有Object.setPorototype这样设置原型的方法。

构造函数

在JavaScript中,构造函数是用来创建原型链最常用的方法。构造函数如此流行的原因在于:它是创建类型的唯一途径。另外一个值得考虑的因素是大部分引擎都对构造函数进行了高度优化。

很不幸的是,构造函数容易让人困惑,在我看来,它是让初学者认为JavaScript难以理解的主要原因。但构造函数是JS语言中的一个重要部分,我们必须对其深刻理解。

作为构造器的函数

在JavaScript中,创建函数的实例可以这么来做:



对函数使用关键字new,使得函数从本质上来讲表现的像工厂,即函数能够生成新的对象。后面会讲到,新创建的对象通过函数的原型与函数保持关联。在JavaScript中,我们将这个对象称为函数的实例。

隐式赋值的「this」

当我们使用「new」,JavaScript以「this」关键字的形式向函数中注入了新创建对象的隐式引用。在函数运行结尾处也会隐式的返回该引用。
当我们这么做:



实际上会相当于这么做:



需要注意的是:只有在使用「new」的时候,「this」才会被赋值为新创建的对象。如果你忘记书写「new」,那么「this」会指向全局对象。忘记new是造成众多bug的原因,所以千万不要忘记写new。

有一个惯例我十分喜欢,那就是如果一个函数被用作构造函数,那么它的函数名首字母要大写,如果你忘记写new关键字,就会很容易发觉。

「函数原型」

JavaScript中的每个函数都有一个特殊属性「prototype」。


让人有些不敢相信的是:此「prototype」并非函数真正的原型(proto)。

如果「prototype」术语的含义如此不明确,可想而知会对使用它的人们产生多大的困扰。有一个澄清的方法我认为不错,那就是始终将函数的「prototype」属性称为「函数的原型」,永远不要称其为「原型」。

「prototype」属性指向一个对象,这个对象就是当对函数使用「new」时创建的实例的原型。听起来糊涂?用例子来解释是最容易不过的了:


这就是关于JavaScript对象模型的绝大部分内容了。理解proto与function.prototype是如何关联的将会给你带来无尽的满足感,当然也可能相反。

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载烦请注明出处:

英文原文:http://sporto.github.com/blog/2013/02/22/a-plain-english-guide-to-javascript-prototypes/

中文译文:http://www.w3cplus.com/js/a-plain-english-guide-to-javascript-prototypes.html

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

推荐阅读更多精彩内容