理解JavaScript的原型属性

接头JavaScript的原型属性

2016/06/21 · JavaScript
· 2 评论 ·
澳门太陽城集团登录网址,原型

本文由 伯乐在线 –
alvendarthy
翻译,sunshinebuel
校稿。未经许可,禁止转发!
塞尔维亚(Serbia)语出处:bytearcher。接待参预翻译组。

理解 JavaScript
prototype属性不太轻易。你或然知道它同面向对象编制程序(OOP)和指标承袭有关,但不一定对其本领原理特别通晓。

原型承袭

面向对象编制程序能够经过重重路子完毕。其余的语言,比方Java,使用基于类的模型完毕: 类及对象实例差距对待。但在 JavaScript
中从未类的定义,取代他的是一切皆对象。JavaScript
中的承接通过原型承接完毕:一个对象直接从另一对象承继。对象中涵盖其接二连三体系中祖先的援引——对象的 prototype 属性。

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

JavaScript 完毕一而再的语言特征

以下语言特色共同实现了 JavaScript 承袭。

  • 当尝试访问 JavaScript
    对象中不真实的性质时,剖析器会查找相称的目的原型。举例调用 car.toString()澳门太阳集团城网址,,如果
    car 没有 toString理解JavaScript的原型属性。 方法,就能够调用 car 对象的原型。
    那一个查找进度会从来递归, 直到寻找到拾分的原型可能承袭链尽头。
  • 调用  new Car() 会创造多个新的靶子,并伊始化为 Car.prototype
    那样就同意为新对象设置原型链。须求注意的是,new Car()
    只有当  Car 是函数时才有含义。 此类函数即所谓构造函数。
  • 理解JavaScript的原型属性。调用对象的贰个成员函数时, this
    的值被绑定为近些日子指标。举例调用 "abc".toString()理解JavaScript的原型属性。,this
    的值被装置为 "abc",然后调用 toString
    函数。该才能帮助代码重用:同样的代码,可在 this
    为各个不一样的值时调用。对象的积极分子函数,也被喻为对象的主意。

举个栗子

我们用面向对象编制程序,达成三个划算矩形周长的例子。

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理解JavaScript的原型属性。 新扩张一个因而 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

澳门太阳集团城网址 1

三个热爱生活的玩意儿!
个人主页 ·
小编的文章 ·
16

澳门太阳集团城网址 2

You may also like...

发表评论

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

网站地图xml地图