【JavaScript】原型

在 JavaScript 中,每个对象都有一个原型(prototype),它是一个对象本身,而不是一个函数。原型机制是 JavaScript 的核心特性之一,它允许对象继承另一个对象的属性和方法。

以下是关于 JavaScript 原型的基本概念和用法:

  1. 原型链:

    每个对象都有一个原型,而原型本身也是一个对象,因此可以形成一个原型链。当访问一个对象的属性或方法时,JavaScript 首先在对象本身查找,然后在其原型上查找,如果还没有找到,就会继续在原型的原型上查找,以此类推,直到找到或者到达原型链的末端。

  2. prototype 属性:

    在 JavaScript 中,构造函数(函数用于创建对象)有一个 prototype 属性,它是一个对象,用于存储该构造函数的实例共享的属性和方法。当使用构造函数创建对象时,对象会继承构造函数的 prototype 对象的属性和方法。

  3. __proto__ 属性:

    每个对象都有一个 __proto__ 属性,它指向对象的原型。通过 __proto__ 属性,可以访问对象的原型上的属性和方法。

  4. 原型的继承:

    当访问一个对象的属性或方法时,如果对象本身没有,JavaScript 会沿着原型链查找,直到找到或者到达原型链的末端。这就实现了属性和方法的继承。

以下是一个简单的示例,展示了原型的概念:

javascript 复制代码
// 构造函数
function Person(name) {
  this.name = name;
}

// 在构造函数的 prototype 上添加方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.name}`);
};

// 创建对象
const person1 = new Person("Alice");
const person2 = new Person("Bob");

// 调用原型上的方法
person1.sayHello(); // 输出:Hello, my name is Alice
person2.sayHello(); // 输出:Hello, my name is Bob

// 使用 __proto__ 访问原型
console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

在这个示例中,Person 是一个构造函数,Person.prototype 是一个对象,我们将方法 sayHello 添加到了 Person.prototype 上。当创建 person1person2 对象时,它们继承了 Person.prototype 的属性和方法,因此可以调用 sayHello 方法。

类的原型对象:

类是构造函数的语法糖,因此类的实例化过程实际上也是通过构造函数来创建对象的,因此类和构造函数都具有原型的概念。

在类中,类的原型可以被称为类的原型对象(class prototype object),它类似于构造函数的原型。类的实例会继承类的原型对象上的方法和属性,类似于使用构造函数创建的对象会继承构造函数的原型上的方法和属性。

下面是一个简单的示例,展示了类的原型的概念:

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

  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person1 = new Person("Alice");
const person2 = new Person("Bob");

person1.sayHello(); // 输出:Hello, my name is Alice
person2.sayHello(); // 输出:Hello, my name is Bob

console.log(person1.__proto__ === Person.prototype); // true
console.log(person2.__proto__ === Person.prototype); // true

在这个示例中,Person 是一个类,Person.prototype 是类的原型对象,我们在类中定义了方法 sayHello,该方法被添加到了 Person.prototype 上。当创建 person1person2 对象时,它们继承了 Person.prototype 的属性和方法,因此可以调用 sayHello 方法。

总之,类和构造函数都具有原型的概念,类的实例化过程实际上也是通过构造函数来实现的,因此类的原型在类的继承和方法共享方面具有重要作用。

相关推荐
极客小俊11 分钟前
【从零到一】用HTML5+CSS+JavaScript实现一个属于自己的mp3免费音乐播放器 (4) JS交互功能(音乐进度条)
javascript·css·html5·前端开发·免费教程·代码案例·手搓音乐播放器
@小柯555m15 分钟前
Java八股刷题
java·开发语言·八股
182******208318 分钟前
2026新手必看:C语言学到什么程度可以出去找工作
c语言·开发语言
IT猿手32 分钟前
光伏模型参数估计:山羊优化算法(Goat Optimization Algorithm, GOA)求解光伏模型参数辨识问题,免费提供完整MATLAB代码链接
开发语言·算法·matlab·智能优化算法·光伏模型参数估计·光伏模型参数辨识·最新群智能算法
kels889943 分钟前
2026 年黄金实时价格数据 API 接口实测推荐
开发语言·笔记·python·金融·区块链
FlyWIHTSKY44 分钟前
Element Plus 中 el-row 和 el-col 的完整使用指南**
javascript·vue.js·ecmascript
摇滚侠1 小时前
基于 Redis 实现验证码登录
javascript·redis·bootstrap
牢七1 小时前
链条合集整理
java·开发语言
叼烟扛炮1 小时前
C++ 知识点06 inline
开发语言·c++·inline
曹牧2 小时前
C#:同一项目中维护多个版本的代码
开发语言·c#