面向对象中的原型

JavaScript 中的原型

原型的基本概念

在 JS 中,每个对象都有一个内部属性 \[prototype] (通过 proto 访问),指向它的原型对象。原型对象也是一个普通对象,它有自己的属性和方法,并且也可以有自己的原型,从而形成原型链。

当访问一个对象的属性或方法时,如果对象本身没有该属性或方法,JS 会沿着原型链向上查找,直到找到该属性或到达原型链的末端 (null)。

JS 通过原型机制实现了继承,即对象(实例)可以共享原型对象的属性的方法。

原型链

原型链是 JS 实现继承的核心机制,原型链是由对象的 \[Prototype] 属性连接起来的一条链。当访问一个对象的属性或方法时,JavaScript 会按照以下顺序查找:

  1. 对象本身。

  2. 对象的原型(\[Prototype])。

  3. 原型的原型,依此类推,直到找到属性或到达 null。

例如:

javascript 复制代码
const parent = {
    greet() {
        console.log("Hello from parent!");
    }
};

const child = Object.create(parent); // child 的原型是 parent
child.greet(); // 输出: Hello from parent!

在这个例子中,child 对象本身没有 greet 方法,但它通过原型链访问了 parent 对象的 greet 方法。

原型链的终点是 null。例如:

javascript 复制代码
console.log(Object.getPrototypeOf(Object.prototype)); // 输出: null

构造函数与 prototype

在 JS 中,函数也是对象,每个函数都有一个 prototype 属性。当使用 new 关键字调用函数时,会创建一个新对象,并将该对象的 \[prototype] 指向函数的 prototype 属性。例如:

javascript 复制代码
function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log(`Hello, my name is ${this.name}`);
};

const person1 = new Person("Alice");
person1.greet(); // 输出: Hello, my name is Alice

在这个例子中,Person 是一个构造函数。Person.prototype 是 person1 对象的原型。person1 继承了 Person.prototype 的 greet 方法。

prototype 和 proto 的区别

prototype 是函数对象特有的属性,指向一个对象。当该函数作为构造函数时,prototype 会成为新创建对象的原型。

proto 是对象的内部属性,指向其原型对象。虽然现代 JavaScript 推荐使用 Object.getPrototypeOf() 和 Object.setPrototypeOf(),但 proto 仍被广泛使用。

相关推荐
choumin2 天前
创建型模式——原型模式
c++·设计模式·原型模式·创建型模式
我登哥MVP15 天前
走进 Gang of Four 设计模式:访问者模式
java·设计模式·访问者模式·原型模式
学究天人16 天前
数学公理体系大全:第五章 序数与基数理论:超限算术与集合的大小
人工智能·线性代数·算法·机器学习·数学建模·原型模式
学究天人16 天前
数学公理体系大全:第六章 选择公理的等价形式及证明
人工智能·线性代数·算法·机器学习·数学建模·概率论·原型模式
学究天人17 天前
数学公理体系大全:Comprehensive Collection of Mathematical Axiom Systems(补充卷9)
人工智能·线性代数·算法·数学建模·动态规划·原型模式·抽象代数
geovindu18 天前
CSharp: Prototype Pattern
开发语言·后端·设计模式·.net·原型模式·创建型模式
Seven凹凸Man18 天前
WorkBuddy之产品经理原型设计及PRD实战
ai·原型模式
ttod_qzstudio19 天前
【软考设计模式】原型模式:“克隆“对象与深拷贝、浅拷贝精讲
设计模式·原型模式
希冀12323 天前
【JavaScript】Javascript—JS进阶—Day03
开发语言·javascript·原型模式
想吃火锅10051 个月前
【前端手撕】instanceof
前端·javascript·原型模式