菜单

喻JavaScript的原型属性

2018年11月15日 - 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地图