面向对象中的原型

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 仍被广泛使用。

相关推荐
希冀1232 天前
【JavaScript】Javascript—JS进阶—Day03
开发语言·javascript·原型模式
想吃火锅100521 天前
【前端手撕】instanceof
前端·javascript·原型模式
UXbot21 天前
帮助企业低门槛开展AI应用开发的平台推荐
前端·低代码·ui·交互·产品经理·原型模式·web app
UXbot21 天前
如何选择适合公司项目的UI设计工具?企业选型指南
前端·低代码·ui·团队开发·原型模式·设计规范·web app
UXbot22 天前
原型设计工具如何帮助新人快速进入产品行业?
前端·低代码·ui·交互·团队开发·原型模式·web app
sunny.day1 个月前
js原型与原型链
开发语言·javascript·原型模式·js原型链
UXbot1 个月前
AI网页开发工具能替代工具吗?5大平台对比
前端·人工智能·低代码·ui·原型模式·web app
weixin_307779131 个月前
从“大海捞针”到“主动推理”:AI如何重塑云原生故障诊断的根因链
开发语言·人工智能·算法·自动化·原型模式
swordbob1 个月前
prototype 注入到 singleton 里,prototype是否还是线程安全的
安全·spring·单例模式·原型模式
isNotNullX1 个月前
企业数据中台建设,ETL工具选错了会踩哪些坑?
数据仓库·etl·原型模式