深入解析 JavaScript 原型 prototype：原理与实例演示

prototype 属性的核心概念

在 JavaScript 中，prototype 是一个全局属性，几乎可用于所有对象（包括内置对象如 Number, Boolean, String, Date 以及用户自定义对象）。它的核心作用是将属性和方法添加到任何对象的“原型”上，使得通过该原型创建的所有新对象都能自动继承这些内容。

这种机制不仅允许我们向现有对象类型添加新功能，还能有效节省内存——因为属性和方法只存储一份，而非每个实例都复制一份。

基本语法

要为原型添加属性或方法，遵循以下语法格式：

object.prototype.propertyName = value;
// 例如：
Object.prototype.newMethod = function() { ... };

实战案例：使用 prototype 扩展自定义对象

下面通过一个具体的例子，展示如何使用 prototype 属性向自定义的对象类型中添加共享属性。

第1步：定义构造函数

首先，我们需要定义一个构造函数来创建对象。在此示例中，我们创建一个名为 book 的构造函数，用于接收书的标题和作者信息。

<script type="text/javascript">
function book(title, author) {
    this.title = title;
    this.author = author;
}
</script>

第2步：通过 prototype 添加共享属性

接下来，我们利用 book 构造函数的 prototype 属性，为所有 “书” 对象添加一个默认的 price 属性。设置为 null 表示这是一个待填充的共享字段。

book.prototype.price = null;

第3步：创建实例并赋值

使用 new 关键字创建 book 的实例。由于 price 是通过原型添加的，它对所有 book 实例都是可见的。我们可以单独为某个实例指定具体的价格值。

<script type="text/javascript">
var myBook = new book("Perl", "Mohtashim");
myBook.price = 100; // 为当前实例设置具体价格
</script>

第4步：输出结果验证

最后，通过控制台或页面输出来验证属性是否成功获取。注意，title 和 author 来自构造函数本身的属性，而 price 来自原型链。

<script type="text/javascript">
document.write("Book title is : " + myBook.title + "<br>");
document.write("Book author is : " + myBook.author + "<br>");
document.write("Book price is : " + myBook.price + "<br>");
</script>

执行结果：

Book title is : Perl
Book author is : Mohtashim
Book price is : 100

总结

通过上述实例可以看出，prototype 是实现 JavaScript 面向对象编程中资源共享的重要手段。它不仅简化了代码结构，还避免了在每个对象实例中重复定义相同的常量或方法逻辑。

以上就是 JavaScript 中的 prototype 属性使用详解的详细内容，更多关于 JavaScript 原型链及面向对象编程的资料请关注本站其它相关文章！