讲师中心 微信公众号
AI工具推荐 视频效率加速

深入探讨 JavaScript 的原型链和函数的基础作用

浅丽酱_8462

浅丽酱_8462

发布时间:2024-11-12 20:12:01

|

904人浏览过

|

来源于dev.to

转载

深入探讨 javascript 的原型链和函数的基础作用

javascript 采用独特的继承方法,与 java 或 c++ 等传统的面向对象语言不同。 javascript 使用基于原型的继承模型,而不是依赖基于类的继承。该模型以语言的函数及其原型属性为基础,构成了对象如何继承行为的基础。为了理解为什么 javascript 的继承是这样设计的,以及它是如何通过原型链实现继承的,我们必须探索函数、原型和原型链内部工作原理之间的关系。

1. 基金会:作为带有原型链接的构造函数

在 javascript 中,函数不仅仅是可执行代码块;它们拥有独特的属性,这些属性使它们成为该语言的面向对象功能的基础。 javascript 中的每个函数(箭头函数除外)自动具有一个原型属性,它是一个用作该函数创建的实例蓝图的对象。这是一个显着特征 - 大多数其他面向对象语言依赖类而不是函数作为继承的构建块。

当函数用作构造函数时(通过 new 关键字),javascript 会创建一个新对象,将其链接到函数的原型,并将新对象分配为构造函数内的上下文 (this)。这意味着添加到函数原型的任何属性或方法都可以被从该函数创建的所有实例访问,从而建立共享继承模型。

为什么是函数?

使用函数作为构造函数并将继承属性附加到其原型上,使 javascript 变得灵活且轻量级。通过在函数而不是类上构建继承,javascript 允许继承而不需要严格的类结构。这种灵活性对于 javascript 的初始设计尤其重要,因为它是一种用于动态、基于 web 的脚本语言,需要轻量级、面向对象的行为。

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

2. 理解原型链:一系列链接的原型

原型链是 javascript 用于搜索属性和方法的机制。创建对象时,javascript 通过名为 proto 的内部引用自动将其链接到另一个对象(函数的原型对象)。这形成了一个链状结构,其中对象通过链接到其他对象来继承属性,从而创建“原型链”。

链条如何运作

直接访问优先:当您尝试访问对象上的属性时,javascript 首先检查该属性是否直接存在于该对象上。

原型查找:如果在对象本身上找不到属性,javascript 会查找链,检查 proto 引用的对象原型(函数的原型属性)。

遍历链:如果仍未找到属性,javascript 会继续查找每个原型的 proto,有效地遍历对象链,直到到达末尾(即,object.prototype,顶级原型)。

链结束:如果在原型链中的任何位置都找不到该属性,javascript 将返回 undefined。

feishu-dingtalk-bridge
feishu-dingtalk-bridge

打通飞书/钉钉开放API,实现日程同步、审批追踪、文档解析与智能待办分发的企业协同中枢

下载

这种结构使 javascript 对象能够继承共享方法和属性而无需重复,从而提供了一种节省内存的方式来实现继承。

为什么是链条?

链允许 javascript 动态地实现继承,而无需预定义的类结构。每个对象都可以有自己的原型链接,因此可以在运行时设置继承层次结构。与传统的基于类的模型相比,这种结构使得 javascript 的原型继承变得如此灵活和适应性强。

3. 通过构造函数进行实际继承

要了解这个基于原型的系统的强大功能,请考虑一个简单的示例,其中两个构造函数(animal 和 dog)使用原型链来共享行为。

function animal() {}
animal.prototype.speak = function() {
    return "some generic sound";
};

function dog(name) {
    this.name = name;
}

// set dog’s prototype to inherit from animal’s prototype
dog.prototype = object.create(animal.prototype);
dog.prototype.constructor = dog; // correcting constructor reference

// adding dog-specific behavior
dog.prototype.bark = function() {
    return `${this.name} barks!`;
};

const mydog = new dog("rex");
console.log(mydog.speak());  // output: "some generic sound"
console.log(mydog.bark());   // output: "rex barks!"
in this example:

dog.prototype被设置为继承自animal.prototype,允许dog实例继承speak方法。
当调用 mydog.speak() 时,javascript 会查找 mydog 的原型链并在 animal.prototype 上找到 talk。
此设置使 dog 实例能够说话(来自动物)和吠叫(来自狗),而无需重复代码。
这个例子展示了 javascript 的原型链如何允许灵活高效的继承,使用函数作为定义和共享行为的基础。

4. 函数、原型和共享内存

原型链的一个关键优势是内存效率。当您向函数原型添加方法时,该函数创建的所有实例都会共享这些方法,而不是创建副本。此模型与具有经典继承的语言不同,在经典继承中,每个对象通常都有自己的方法副本,从而导致更大的内存使用量。

例如,在 dog 示例中,向 animal.prototype 添加 talk 意味着每个 dog 实例都可以调用spoke,而无需创建它的单独副本。这种共享访问对于内存管理至关重要,尤其是在内存中可能存在许多对象的 web 应用程序中。

5. object.create 的替代方案

javascript 还提供了 object.create() 方法,该方法允许您创建具有特定原型的对象,而无需构造函数。虽然这种方法不需要函数,但它仍然依赖于原型的概念,强调了原型链对于 javascript 继承的重要性。

const animal = {
    speak: function() {
        return "Some generic sound";
    }
};

const dog = Object.create(animal);
dog.bark = function() {
    return "Woof!";
};

console.log(dog.speak()); // Output: "Some generic sound"
console.log(dog.bark());  // Output: "Woof!"

这里,dog通过原型链继承自animal,使其能够访问speak。虽然我们没有使用构造函数,但继承过程仍然基于原型链,并遵循相同的通过 proto.

查找的原则

6. 为什么 javascript 的原型链很重要

原型链是 javascript 灵活性的基石。通过允许通过函数和原型链接建立继承,javascript 避免了经典继承的僵化,并提供了更流畅、适应性更强的继承系统。这种适应性是 javascript 的关键优势之一,尤其是在 web 开发等环境中,快速迭代、轻量级结构和内存效率至关重要。

原型链使开发人员能够控制继承,让他们可以动态设置层次结构并有效地重用属性。这就是为什么,即使引入了 es6 类(它为基于原型的继承提供了语法糖),底层原型链仍然是 javascript 处理继承的基础。

总之

javascript 的继承模型以函数和原型为中心,使用原型链进行属性查找和共享行为。函数提供原型属性,形成 javascript 遍历以进行继承的链接对象链。这种方法比基于类的继承更灵活、更节省内存,使得 javascript 特别适合动态应用程序。因此,原型链不仅是一个基本概念,而且是一个赋予 javascript 在面向对象编程中独特能力和适应性的功能。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

相关专题

更多
es6新特性
es6新特性

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

285

2023.07.17

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

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

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

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

375

2025.12.24

go语言 面向对象
go语言 面向对象

本专题整合了go语言面向对象相关内容,阅读专题下面的文章了解更多详细内容。

6895

2025.09.05

java面向对象
java面向对象

本专题整合了java面向对象相关内容,阅读专题下面的文章了解更多详细内容。

362

2025.11.27

C++ 面向对象编程与设计模式实践
C++ 面向对象编程与设计模式实践

本专题整合了 C++ 面向对象编程的核心机制,涵盖类的定义与访问控制、构造函数与析构函数、拷贝语义与移动语义、继承与虚函数多态、抽象类与接口、运算符重载、友元函数等关键知识点,同时结合单例模式、工厂模式、观察者模式、策略模式等常用设计模式的 C++ 实现,帮助开发者写出结构清晰、易于维护的面向对象代码。

364

2026.04.09

Java 面向对象与核心编程机制
Java 面向对象与核心编程机制

系统讲解 Java 面向对象编程的核心知识体系,涵盖类的定义与封装、构造方法与 this/super 关键字、继承与方法重写、多态与向上向下转型、抽象类与接口的区别与设计原则、异常处理机制(try-catch-finally / 自定义异常)、泛型的类型参数与通配符、集合框架(List/Set/Map)的使用与遍历方式,帮助开发者全面掌握 Java 程序设计的核心机制与面向对象思维。

243

2026.04.17

undefined是什么
undefined是什么

undefined是代表一个值或变量不存在或未定义的状态。它可以作为默认值来判断一个变量是否已经被赋值,也可以用于设置默认参数值。尽管在不同的编程语言中,undefined可能具有不同的含义和用法,但理解undefined的概念可以帮助我们更好地理解和编写程序。本专题为大家提供undefined相关的各种文章、以及下载和课程。

12085

2023.07.31

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
C++ Core Guidelines
C++ Core Guidelines

共0课时 | 0人学习

C++ Reference
C++ Reference

共0课时 | 0人学习

C++ 官方标准说明
C++ 官方标准说明

共0课时 | 0人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn