JavaScript | 原型(prototype)知识点详解

本文解析了JavaScript的面向原型特性,介绍原型在对象间共享代码的重要性,通过实例演示如何利用原型实现属性透明代理,并阐述原型的优点,如内存节省和动态修改。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1 概述

我们可能听说过这句话,“ JavaScript 不是面向对象的语言,它是面向原型的。”

先看一下例子:

({} instanceof Object)
// => true

([] instanceof Object)
// => true

function Foo() {}
((new Foo) instanceof Object)
// => true

JavaScript 确实包含对象,所以不能说它不面向对象。确切滴说,JavaScript 是面向对象、面向原型的语言。

2 为什么要有原型?

原型是嵌入在对象中的 “特殊对象”。在 JavaScript 中,我们可以通过属性 __proto__来访问它。

const witch = { name: "Hermione" }
witch.__proto__
// => {} (empty prototype)

原型的特别之处在于,它可以透明地充当某种“代理”或“备份”。如果我们尝试访问一个对象中不存在的属性,如果原型中有这个属性,那么 JavaScript 将返回原型的属性。

// add a property to the prototype
witch.__proto__.spells = { leviosa: "Wingardium leviosa" }

// the property is not defined by the object…
witch
// => { name: "Hermione" }

// …but we can access it thanks to the prototype!
witch.spells
// => { leviosa: "Wingardium leviosa" }

这就是原型的作用,在对象之间共享代码。在 JavaScript 中,没有传统面向对象中类的概念,只有原型。

当我们使用构造函数实例化对象时,就能很容易看到这一点。如果我们有 Wizard 函数,那么每次用 new Wizard() 创建一个新对象,属性 Wizard.prototype 就会变成新创建实例的原型。

function Wizard(name) {
  this.name = name || "Anonymous"
}

Wizard.prototype.spells = {
  leviosa: "Wingardium leviosa",
  expelliarmus: "Expelliarmus",
  patronus: "Expecto patronum" 
}

const draco = new Wizard("Draco")
// => Wizard { name: "Draco" }
const hermione = new Wizard("Hermione")
// => Wizard { name: "Hermione" }

draco.spells === hermione.spells
// => true (both wizards share spells)
draco.__proto__ === hermione.__proto__
// => true (that's why they share prototypes)
hermione.__proto__ === Wizard.prototype
// => true (their prototype is defined in Wizard.prototype)

原型的好处

  • 节省内存,原型是共享的,不是每个对象都有一个副本
  • 修改原型,可以动态地修改多个对象

如果对象中的属性与原型属性具有相同的名称,那么对象中的属性优先级高。

const newbie = new Wizard("Lorem")
newbie.spells = {} // bypass what's in the prototype

newbie.spells === hermione.spells
// => false
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

孟华328

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值