0

0

如何用javascript实现面向对象编程?_原型和原型链是如何工作的?【教程】

狼影

狼影

发布时间:2026-01-24 08:18:09

|

190人浏览过

|

来源于php中文网

原创

JavaScript面向对象基于原型链,函数有prototype属性,对象有__proto__属性;prototype定义实例方法,__proto__指向构造函数的prototype;ES6 class是语法糖,底层仍依赖原型机制。

如何用javascript实现面向对象编程?_原型和原型链是如何工作的?【教程】

JavaScript 的面向对象编程不是“模拟”,而是基于原型的原生机制——你写的每个函数都自带 prototype,每个对象都有隐式 __proto__,这两者连起来就是原型链。

构造函数 + prototype 是最直接的类式写法

function Person(name) { this.name = name; } 定义构造函数后,所有实例共享的方法应挂到 Person.prototype 上,而不是在构造函数里重复创建:

  • ✅ 正确:Person.prototype.say = function() { return 'Hi, ' + this.name; }; —— 方法只存一份,节省内存
  • ❌ 错误:function Person(name) { this.say = function() { ... }; } —— 每个实例都新建一个函数,浪费空间
  • 注意:prototype 只对函数有效;普通对象(如 {})没有 prototype 属性,但有 __proto__

__proto__prototype 不是同一个东西

__proto__ 是对象的内部属性,指向它“从哪来”;prototype 是函数的属性,定义“它能造出什么对象”。两者通过 new 关联:

  • const p = new Person('Alice');p.__proto__ === Person.prototypetrue
  • Person.prototype.__proto__ === Object.prototype,因为 Person.prototype 本身是个普通对象
  • Object.prototype.__proto__ === null,这是原型链终点
  • 别手动改 __proto__,用 Object.setPrototypeOf(obj, proto) 更安全

ES6 class 只是语法糖,底层仍是原型链

class 看起来像 Java,但编译后还是靠 prototype__proto__ 运行:

PHP高级开发技巧与范例
PHP高级开发技巧与范例

PHP是一种功能强大的网络程序设计语言,而且易学易用,移植性和可扩展性也都非常优秀,本书将为读者详细介绍PHP编程。 全书分为预备篇、开始篇和加速篇三大部分,共9章。预备篇主要介绍一些学习PHP语言的预备知识以及PHP运行平台的架设;开始篇则较为详细地向读者介绍PKP语言的基本语法和常用函数,以及用PHP如何对MySQL数据库进行操作;加速篇则通过对典型实例的介绍来使读者全面掌握PHP。 本书

下载

立即学习Java免费学习笔记(深入)”;

class Animal {
  constructor(name) { this.name = name; }
  speak() { return this.name + ' makes a noise.'; }
}
// 等价于:
// Animal.prototype.speak = function() { ... };
// new Animal().__proto__ === Animal.prototype
  • 静态方法(static method())会挂在 Animal 函数本身,不进原型链
  • extends 实际设置子类的 __proto__ 指向父类(用于继承静态方法),同时子类 prototype.__proto__ 指向父类 prototype(用于继承实例方法)
  • 箭头函数不能用作构造函数,也没有 prototype 属性

原型链查找失败时不会报错,而是返回 undefined

访问对象上不存在的属性时,JS 引擎会顺着 __proto__ 一层层向上找,直到 null。这带来两个常见陷阱:

  • 误判属性存在:obj.toString 总是有值(来自 Object.prototype),不能用 obj.prop !== undefined 判断是否自有属性
  • 正确方式:obj.hasOwnProperty('prop')Object.prototype.hasOwnProperty.call(obj, 'prop')
  • 性能隐患:深层原型链(比如多次 Object.create(null) 套娃)会让属性访问变慢,尤其在高频循环中

真正容易被忽略的,是 prototype__proto__ 的不对称性:前者只属于函数,后者属于所有对象;而 Object.create(null) 创建的对象连 __proto__ 都没有,彻底切断原型链。

相关专题

更多
java
java

Java是一个通用术语,用于表示Java软件及其组件,包括“Java运行时环境 (JRE)”、“Java虚拟机 (JVM)”以及“插件”。php中文网还为大家带了Java相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

844

2023.06.15

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

742

2023.07.05

java自学难吗
java自学难吗

Java自学并不难。Java语言相对于其他一些编程语言而言,有着较为简洁和易读的语法,本专题为大家提供java自学难吗相关的文章,大家可以免费体验。

740

2023.07.31

java配置jdk环境变量
java配置jdk环境变量

Java是一种广泛使用的高级编程语言,用于开发各种类型的应用程序。为了能够在计算机上正确运行和编译Java代码,需要正确配置Java Development Kit(JDK)环境变量。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

397

2023.08.01

java保留两位小数
java保留两位小数

Java是一种广泛应用于编程领域的高级编程语言。在Java中,保留两位小数是指在进行数值计算或输出时,限制小数部分只有两位有效数字,并将多余的位数进行四舍五入或截取。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

400

2023.08.02

java基本数据类型
java基本数据类型

java基本数据类型有:1、byte;2、short;3、int;4、long;5、float;6、double;7、char;8、boolean。本专题为大家提供java基本数据类型的相关的文章、下载、课程内容,供大家免费下载体验。

447

2023.08.02

java有什么用
java有什么用

java可以开发应用程序、移动应用、Web应用、企业级应用、嵌入式系统等方面。本专题为大家提供java有什么用的相关的文章、下载、课程内容,供大家免费下载体验。

431

2023.08.02

java在线网站
java在线网站

Java在线网站是指提供Java编程学习、实践和交流平台的网络服务。近年来,随着Java语言在软件开发领域的广泛应用,越来越多的人对Java编程感兴趣,并希望能够通过在线网站来学习和提高自己的Java编程技能。php中文网给大家带来了相关的视频、教程以及文章,欢迎大家前来学习阅读和下载。

16926

2023.08.03

c++空格相关教程合集
c++空格相关教程合集

本专题整合了c++空格相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.23

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 4万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 2.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3万人学习

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

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