javascript - 如何在js中使用原型(prototype)继承

Question

关闭。这个问题需要更多 focused .它目前不接受答案。












想改进这个问题？更新问题，使其仅关注一个问题 editing this post .

8年前关闭。




Improve this question




由于对原型(prototype)继承的了解较少，我陷入困境。我想知道原型(prototype)继承到底是什么以及它是如何实现的。

你能举一个简单的例子吗？
任何帮助表示赞赏。

Answer 1

在其核心

想象一下，您有一个对象，并且想要查找一个属性。现在想象该属性不存在。如果您可以让它自动继续在不同对象上搜索该属性怎么办？这基本上就是原型(prototype)继承。

我们该怎么做呢？

那么唯一的问题是如何在对象之间建立这种关系。嗯，这就是奇怪的部分。

我将从主要的历史方式开始。那就是使用函数。

首先要注意的是，JavaScript 中的函数本身就是一个对象。它可以有自己的属性，并且它使用原型(prototype)继承来访问其他属性。

所以让我们从创建一个函数开始。

function Foo() {
    // our function
}

所以现在我们有一个名为 Foo 的函数.我们的新函数会自动获取一个名为 prototype 的属性。当它被创建时。该属性引用了一个(几乎)空对象。

console.log(typeof Foo.prototype); // object

为什么该属性和对象存在？好吧，它们的存在是为了支持 JavaScript 在我上面描述的对象之间形成这种关系的奇怪方式。

基本上， Foo.prototype object 是我们在寻找对象的新属性时将用作“备份”对象的对象。但是我们还没有在我们想要使用的对象和 Foo.prototype之间形成任何特殊的关系。目的。

让它发挥作用

为此，我们实际上使用 new 调用该函数。运算符(operator)。

var my_object = new Foo();

我们开始了。所以现在 my_object是一个新的空对象。但它的“原型(prototype)链”中有悬垂在我们的 Foo 上的对象。功能关闭其 .prototype属性(property)。换句话说，当我们在 my_object 上查找属性时，如果该属性不存在，它将继续搜索 Foo.prototype目的。

看到它在行动

问题是我们没有添加任何对 Foo.prototype 有用的东西。 .但实际上该对象有一个属性。当我们创建 Foo 时，该属性也会自动创建。函数，它是 .constructor属性(property)。

该属性引用什么？它引用了 Foo功能。换一种说法:

Foo.prototype.constructor === Foo; // true

好吧，如果我们的 my_object是空的，如果在 my_object 上寻找房产时不存在的，它会继续搜索 Foo.prototype对象，那么这应该意味着我们应该能够自动到达 Foo.prototype.constructor来自 my_object 的属性(property).

my_object.constructor === Foo; // true

它有效。由于 my_object没有名为 constructor 的属性，它继续搜索它所继承的对象，即 Foo.prototype ，我们知道，它有一个 .constructor引用 Foo 的属性功能。

为我们的代码定制

极好的。但是我们如何在代码中设置对我们更有用的其他属性呢？我们只需将它们添加到 Foo.prototype .这将使我们的 my_object如果对象不直接拥有它们，则查找这些属性。

// give a custom property to `Foo.prototype`
Foo.prototype.bar = "foobar";

// see if we can access that property on your object
my_object.bar === "foobar"; // true

果然，它奏效了。那么让我们看看我们是否可以从 Foo 创建一个新对象也可以访问 .bar属性(property)。

var another_object = new Foo();

another_object.bar === "foobar"; // true

再次，它有效。这是因为调用 Foo 创建的所有对象使用 new关键字将在其原型(prototype)链中包含 Foo.prototype目的。换句话说， Foo.prototype由 Foo 创建的所有实例共享.

所以如果我们现在修改 Foo.prototype.bar属性，它将反射(reflect)在我们创建的两个对象中。

Foo.prototype.bar = "raboof";

my_object.bar === "raboof";      // true
another_object.bar === "raboof"; // true

所以我们可以看到，我们的两个对象都只是通过将搜索传递到它们的“原型(prototype)链”中的下一个对象来寻找它们没有的属性，也就是悬垂在 Foo 上的奇怪对象。功能... Foo.prototype .

还有更多要学习

建立这种对象关系有更新的方法，但这是原始方法，尽管它很奇怪，但可能应该首先理解。