0

0

js怎么用原型实现方法共享

星降

星降

发布时间:2025-08-15 10:41:01

|

911人浏览过

|

来源于php中文网

原创

javascript中实现方法共享的核心机制是原型链,即通过构造函数的prototype对象存储方法,使所有实例共享同一份方法代码,避免内存浪费。1. 当方法定义在构造函数内部时,每个实例都会创建独立的方法副本,导致内存开销大;2. 而通过原型链,方法只在prototype上定义一次,实例通过[[prototype]]链接向上查找调用,实现高效复用;3. 方法调用时this指向实际调用者(即实例对象),而非原型本身,确保方法能正确访问实例属性。这种机制不仅节省内存,还提升性能,是javascript对象模型的关键设计。

js怎么用原型实现方法共享

JavaScript中,实现方法共享的核心机制就是“原型链”。简单来说,我们不是在每个对象实例内部都复制一份方法,而是把这些方法定义在一个共享的“原型”对象上。当一个实例需要调用某个方法时,它会沿着原型链向上查找,直到找到并执行这个方法。这样一来,所有实例都能高效地复用同一份方法代码,极大地节省了内存开销。

js怎么用原型实现方法共享

在我看来,理解JavaScript的原型,就像是理解一个家族的遗传基因。每个家族成员(实例)都有自己的独特之处,但他们也共享着家族的某些特征或技能(方法),这些技能并不是每个人都独立学习一遍,而是家族的“传统”或“遗产”里就有的。

具体到代码层面,我们通常会通过构造函数的

prototype
属性来添加共享方法。当一个函数被用作构造函数(通过
new
关键字调用)时,它创建的每个实例都会自动获得一个指向该构造函数
prototype
对象的内部链接(
[[Prototype]]
,在多数浏览器中表现为
__proto__
)。

js怎么用原型实现方法共享

举个例子:

function Person(name, age) {
    this.name = name;
    this.age = age;
}

// 将方法添加到Person的原型上
Person.prototype.greet = function() {
    console.log(`你好,我叫${this.name},今年${this.age}岁。`);
};

Person.prototype.celebrateBirthday = function() {
    this.age++;
    console.log(`${this.name}庆祝了生日,现在${this.age}岁了!`);
};

const person1 = new Person('张三', 30);
const person2 = new Person('李四', 25);

person1.greet(); // 你好,我叫张三,今年30岁。
person2.greet(); // 你好,我叫李四,今年25岁。

person1.celebrateBirthday(); // 张三庆祝了生日,现在31岁了!
person1.greet(); // 你好,我叫张三,今年31岁。

你看,

greet
celebrateBirthday
方法只在内存中存在一份,所有
Person
的实例都能调用它们。这不就实现了方法共享嘛。

js怎么用原型实现方法共享

为什么我们需要方法共享?不共享会有什么问题?

这个问题,我个人觉得是理解JavaScript对象模型的一个关键点。试想一下,如果你不使用原型共享,而是把方法直接定义在构造函数内部,会发生什么?

function BadPerson(name, age) {
    this.name = name;
    this.age = age;
    // 每次创建实例,都会重新创建这些方法
    this.greet = function() {
        console.log(`你好,我叫${this.name},今年${this.age}岁。`);
    };
    this.celebrateBirthday = function() {
        this.age++;
        console.log(`${this.name}庆祝了生日,现在${this.age}岁了!`);
    };
}

const badPerson1 = new BadPerson('王五', 40);
const badPerson2 = new BadPerson('赵六', 35);

console.log(badPerson1.greet === badPerson2.greet); // false

看到没?

badPerson1.greet
badPerson2.greet
是两个完全不同的函数对象,即使它们做的事情一模一样。如果你的应用需要创建成千上万个
BadPerson
实例,那么每个实例都会带着它自己的一套方法副本。这会带来非常明显的内存浪费,同时,创建实例的速度也会变慢,因为每次都要执行函数创建的操作。

这就像是,你每买一辆新车,就重新发明一次轮子。这显然是不划算的。方法共享就是为了避免这种不必要的重复劳动,让代码更高效、更优雅。

原型链是如何让方法共享成为可能的?

这真是JavaScript里最巧妙也最容易让人混淆的地方之一。简单来说,每个JavaScript对象都有一个内部属性,指向它的原型对象。当你在一个对象上访问一个属性或方法时,如果该对象本身没有这个属性或方法,JavaScript引擎就会沿着这个内部链接(也就是原型链)向上查找,直到找到这个属性或方法,或者查到原型链的顶端(

null
)。

百宝箱
百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台,无需任何代码基础,只需三步即可完成AI应用的创建与发布。

下载

用之前的

Person
例子来说:

  1. person1
    是一个
    Person
    的实例。
  2. 当你调用
    person1.greet()
    时,JavaScript首先在
    person1
    对象自身查找
    greet
    方法。
  3. person1
    对象自身没有
    greet
    方法。
  4. 于是,JavaScript通过
    person1
    的内部
    [[Prototype]]
    链接(即
    person1.__proto__
    )找到
    Person.prototype
    对象。
  5. Person.prototype
    上找到了
    greet
    方法。
  6. 执行
    Person.prototype.greet
    方法。

这条查找路径就是原型链。

Person.prototype
对象自身也有一个
[[Prototype]]
,它指向
Object.prototype
Object.prototype
是原型链的终点(它的
[[Prototype]]
null
)。这意味着,所有JavaScript对象都能访问
Object.prototype
上的方法,比如
toString()
hasOwnProperty()
等。

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

通过这种层层递进的查找机制,方法得以在多个对象之间共享,而无需在每个对象上都复制一份。这是一种非常高效且灵活的继承方式。

共享方法时,
this
指向问题如何处理?

这块内容,我觉得是原型方法共享里一个非常实用且必须搞清楚的点。很多初学者在这里容易犯迷糊,觉得既然方法定义在原型上,那

this
会不会指向原型对象本身呢?答案是:不会。

在JavaScript中,

this
的指向是在函数被调用时确定的,而不是在函数定义时。当一个原型上的方法被一个实例调用时,
this
会自动指向那个调用该方法的实例对象。

继续用

Person
的例子:

Person.prototype.greet = function() {
    // 这里的this指向调用greet方法的实例
    console.log(`你好,我叫${this.name},今年${this.age}岁。`);
};

const person1 = new Person('张三', 30);
const person2 = new Person('李四', 25);

person1.greet(); // 当person1调用时,this就是person1
person2.greet(); // 当person2调用时,this就是person2

你看,

greet
方法虽然只有一个副本,但它能正确地获取到调用者(
person1
person2
)的
name
age
属性。这是因为
this
在运行时被动态绑定到了调用它的对象上。

这种机制使得原型方法非常强大和灵活,它们可以作用于任何调用它们的实例,处理实例特有的数据。这也就是为什么我们能用一套方法模板,去操作无数个具体的数据实例。当然,如果你用

call
apply
bind
或者箭头函数(ES6)去显式地改变
this
的绑定,那又是另一回事了,但对于常规的原型方法调用,
this
总是指向实例。理解这一点,对于编写健壮的JavaScript代码至关重要。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

106

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

197

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

233

2025.12.24

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

254

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

1089

2024.03.01

js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

531

2023.06.20

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

576

2023.07.28

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

Python异步编程与Asyncio高并发应用实践
Python异步编程与Asyncio高并发应用实践

本专题围绕 Python 异步编程模型展开,深入讲解 Asyncio 框架的核心原理与应用实践。内容包括事件循环机制、协程任务调度、异步 IO 处理以及并发任务管理策略。通过构建高并发网络请求与异步数据处理案例,帮助开发者掌握 Python 在高并发场景中的高效开发方法,并提升系统资源利用率与整体运行性能。

37

2026.03.12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号