js的原型、原型链

原型(prototype)

定义

在JavaScript中,每个对象都有一个内部属性Prototype,这个属性指向该对象的原型对象。原型对象也是一个普通对象,它同样有自己的原型对象,以此类推,直到最顶层的原型对象 Object.prototype,其原型为null。

作用

原型的主要作用是对象的属性和方法共享。当要访问一个对象的属性和方法时,JavaScript会先在该对象本身查找,如果找不到,则会往该对象的原型对象中查找,以此类推,直至找到该属性或方法或到达原型链的末尾(即null)。

示例代码

js 复制代码
// 定义一个构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 在函数的原型对象上构造一个方法
Person.prototype.sayHello = function () {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
}

// 创建实例
var person1 = new Person('Abby', '34')

// 访问原型对象的方法
person1.sayHello()

在上述示例中,Person 是一个构造函数,通过 Person.prototype 可以访问其原型对象。我们在原型对象上添加了 sayHello 方法,那么所有通过 new Person() 创建的实例都可以共享这个方法。当调用 person1.sayHello() 时,JavaScript 首先在 person1 对象本身查找 sayHello 方法,没找到就会去 person1 的原型对象(即 Person.prototype)中查找,从而找到并执行该方法。

原型链(Prototype Chain)

定义

原型链是由对象的多个原型对象以此连接而成的链条。当访问一个对象的属性或方法时,JavaScript会按照原型链的顺序依次查找,直到找到该属性或方法或到达原型链的末尾(null)。

示例代码

javascript 复制代码
function Animal() {
    this.eat = function() {
        console.log('Animal is eating.');
    };
}

function Dog() {
    this.bark = function() {
        console.log('Dog is barking.');
    };
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = new Animal();

const dog = new Dog();

// 调用 Dog 自身的方法
dog.bark(); 
// 调用 Dog 原型链上的方法
dog.eat(); 

在这个示例中,Dog 构造函数的原型被设置为 Animal 的实例,这样就形成了一个原型链:dog 对象 -> Dog.prototype(Animal 的实例) -> Animal.prototype -> Object.prototype -> null。当调用 dog.eat() 时,JavaScript 会沿着原型链查找,最终在 Animal 的实例中找到 eat 方法并执行。

原型和原型链是 JavaScript 实现继承的重要机制,它们允许对象之间共享属性和方法,提高了代码的复用性。

相关推荐
骑着蜗牛撵大象3275 小时前
豆包 Seed 驱动的记账智能体:从拍票抽取到月报生成的全链路落地记录
java·前端·javascript·结构化输出·豆包seed·多模态识别·记账系统
溪语流沙5 小时前
【Web全栈进阶】前端世界观:现代工具链与框架为什么存在
前端·javascript·vue.js
kyriewen5 小时前
我逐个测了 JSON.stringify 的 7 个坑:第 1 个就在丢数据
前端·javascript·程序员
song5016 小时前
React Native for OpenHarmony 实战:三方库 react-native-ratings 的鸿蒙化适配指南
javascript·react native·react.js·分类·harmonyos
朱包林6 小时前
iTerm2终端配置指南
linux·javascript·python·云原生·容器·kubernetes·云计算
谢亮_vipxieliang7 小时前
JavaScript this 指向完全指南:调用位置决定一切
开发语言·javascript·ecmascript
WeiXin_DZbishe7 小时前
基于Node.js的马拉松赛事管理系统的设计与实现-计算机毕设 附源码【课程设计】90211
java·javascript·vue.js·python·php·课程设计
考研保研资料分享7 小时前
通信工程保研经验合辑:北航、北理工申请与夏令营、预推免面试(2025)
面试·职场和发展
熊猫钓鱼>_>7 小时前
大学图论第 6 讲:网络流与二分图匹配——对偶性让瓶颈自己现形
开发语言·算法·面试·职场和发展·图论·校招·面经
西西学代码7 小时前
像素和颜色之间的转换(Flutter)
前端·javascript·flutter