菜单

掌握JavaScript 的原型属性

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