美文网首页
通俗的英文指南——Javascript的原型

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

作者: Weastsea | 来源:发表于2018-03-06 16:18 被阅读0次

特别声明:此篇文章由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

相关文章

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

    特别声明:此篇文章由Sunnylost根据Sebastian的英文文章原名《A Plain English Gui...

  • JavaScript 原型的深入指南

    摘要: 理解prototype。 原文:JavaScript 原型的深入指南 作者:前端小智 Fundebug经授...

  • JavaScript中的原型与原型链

     一直对JavaScript的原型与继承不了解,参考《JavaScript权威指南(第六版)》和《JavaScri...

  • javascript碎片知识001

    javascript中的对象(原型,原型链) 什么是原型? 原型是JavaScript中的继承的基础,JavaSc...

  • 函数的原型对象

    什么是原型? 原型是Javascript中的继承的继承,JavaScript的继承就是基于原型的继承。 函数的原型...

  • js原型、原型链、继承的理解

    一、原型、原型链 原型是Javascript中的继承的基础,JavaScript的继承主要依靠原型链来实现的。 原...

  • 面试题 Javascript

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • JavaScript 基础知识点

    介绍JavaScript的基本数据类型。 说说写JavaScript的基本规范? JavaScript原型,原型链...

  • 原型和原型链篇

    原型和原型链 1.理解原型设计模式以及JavaScript中的原型规则 原型设计模式JavaScript是一种基于...

  • JavaScript原型-进阶者指南

    如果不好好的学习对象,你就无法在JavaScript中获得很大的成就。 它们几乎是JavaScript编程语言的每...

网友评论

      本文标题:通俗的英文指南——Javascript的原型

      本文链接:https://www.haomeiwen.com/subject/ccalfftx.html