菜单

的原型属性,理解JavaScript的原型属性

2019年9月24日 - 银河官方网站
的原型属性,理解JavaScript的原型属性

知晓JavaScript的原型属性

2016/06/21 · JavaScript
· 2 评论 ·
原型

本文由 伯乐在线 –
alvendarthy
翻译,sunshinebuel
校稿。未经许可,禁止转发!
保加利亚语出处:bytearcher。应接参与翻译组。

理解 JavaScript
prototype质量不太轻巧。你或然知道它同面向对象编制程序(OOP)和对象承接有关,但不至于对其技巧原理特别精晓。

1.原型持续

  面向对象编制程序能够因此众多路线达成。别的的语言,比如Java,使用基于类的模子完结: 类及对象实例不同对待。但在 JavaScript
中从未类的定义,代替他的是全体皆对象。JavaScript
中的承继通过原型承袭实现:贰个对象直接从另一目标承袭。对象中带有其后续连串中祖先的援引——对象的
prototype 属性。

原型承继

面向对象编制程序能够透过众多路径完毕。其余的言语,比方Java,使用基于类的模型完毕: 类及对象实例分歧对待。但在 JavaScript
中并未有类的定义,取代他的是整个皆对象。JavaScript
中的承继通过原型承袭完结:一个目的直接从另一对象承接。对象中带有其继续种类中祖先的援用——对象的 prototype 属性。

class 关键字是在 ES6 中第三遍引进 JavaScript
的。其实,它并未为面向对象承接引进新模型, class
关键字通过语法糖,达成了本文介绍的原型性格和构造函数。

2. JavaScript 达成持续的言语特色

   图片 1

  首先,大家定义构造函数 Rectangle。
依据规范,大家大写构造函数名首字母,证明它能够用 new
调用,以示与任何符合规律函数的区分。构造函数自动将 this
赋值为一空对象,然后代码中用 x 和 y 属性填充它,以备后用。然后,
Rectangle.prototype 新增加二个透过 x 和 y 属性计算周长成员函数。 注意 this
的施用,在不相同的目的中,this
会有例外的值,这个代码都足以健康专门的学问。最终, 贰个名叫 rect
的指标成立出来了。 它三番五回了 Rectangle.prototype, 我们能够调用
rect.perimeter(), 然后将结果打印到调控台。

JavaScript 达成持续的语言特征

以下语言特征共同落到实处了 JavaScript 承袭。

prototype 属性名称带来的误会

  有部分关于 JavaScript 的原型的误会。
三个指标的原型与指标的 prototype 属性并非叁遍事。
前面一个用于在原型链中相称官样文章的属性。后面一个用于通过 new
关键字创造对象,它将作为新创设对象的原型。
通晓二者的歧异,将帮扶您根技能略 JavaScript 中的原型个性。

  Rectangle.prototype 是用 new
Rectangle() 制造出来目的的原型, 而 Rectangle 的原型实际上是 JavaScript
的 Function.prototype。(子对象的原型是父对象的 prototype 属性
对象中保存原型的变量,也被称呼内部原型引用(the internal prototype
link),历史上也曾称之为 __proto__ ,对那几个称谓始终存在一些争辨。
更确切的,它能够被称作 Object.getPrototypeOf(…) 的重返值。

举个栗子

大家用面向对象编制程序,实现叁个企图矩形周长的例证。

JavaScript

function Rectangle(x, y) { this.x = x; this.y = y; }
Rectangle.prototype.perimeter = function() { return 2 * (this.x +
this.y); } var rect = new Rectangle(1, 2);
console.log(rect.perimeter()); // outputs ‘6’

1
2
3
4
5
6
7
8
9
10
11
function Rectangle(x, y) {
    this.x = x;
    this.y = y;
}
 
Rectangle.prototype.perimeter = function() {
    return 2 * (this.x + this.y);
}
 
var rect = new Rectangle(1, 2);
console.log(rect.perimeter()); // outputs ‘6’

首先,大家定义构造函数 Rectangle
根据职业,大家大写构造函数名首字母,注解它可以用 new
调用,以示与别的常规函数的界别。构造函数自动将 this
赋值为一空对象,然后代码中用 xy 属性填充它,以备后用。

然后, Rectangle.prototype 新扩大二个由此 xy
属性计算周长成员函数。 注意 this 的选择,在分裂的对象中,this
会有例外的值,那么些代码都能够健康职业。

末尾, 四个名称叫 rect 的靶子成立出来了。
它继续了 Rectangle.prototype, 我们能够调用 rect.perimeter()
然后将结果打字与印刷到调控台。

prototype 属性名称带来的误解

有部分有关 JavaScript 的原型的误会。
贰个对象的原型与对象的 prototype 属性并不是贰遍事。
前面一个用于在原型链中相称空头支票的性质。前面一个用于通过 new
关键字创设对象,它将作为新创设对象的原型。
掌握二者的差距,将扶持你到底理解 JavaScript 中的原型特性。

在大家的例子中, Rectangle.prototype 是用 new Rectangle()
创制出来指标的原型, 而 Rectangle 的原型实际上是 JavaScript
的 Function.prototype。(子对象的原型是父对象的 prototype 属性)

目的中保留原型的变量,也被喻为内部原型援引(the internal prototype
link
),历史上也曾称之为 __proto__ ,对这么些名称始终存在一些争论。
更加准确的,它能够被称之为 Object.getPrototypeOf(...) 的重返值。

2 赞 5 收藏 2
评论

有关小编:alvendarthy

图片 2

叁个热爱生活的实物!
个人主页 ·
小编的篇章 ·
16

图片 3

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图