js中原型链是什么，以及原型链的理解

最新推荐文章于 2025-10-16 20:06:24 发布
原创 最新推荐文章于 2025-10-16 20:06:24 发布 · 2.5k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#原型模式

JavaScript中的原型和原型链是核心概念，每个函数有prototype属性，对象通过__proto__指向原型对象。原型链允许实例共享构造函数的属性和方法，节省内存。当查找对象属性时，如果未找到会沿着原型链向上搜索，直到Object.prototype的__proto__为null为止。

一.什么是原型和原型链？

1.原型：在js中，函数可以有属性。每个函数都有一个特殊的属性叫原型（prototype）

2.原型链：当调用某个函数的方法时，这个函数未定义这个方法，此时不会返回undefined，而是继续往原型链后面的原型去查找，只有查找不到，才返回undefined。

原理： 每个对象都有隐式原型（__proto__）和显式原型（prototype），对象的proto指向它原型对象上的prototype。原型链最终指向的是Object.prototype，他的__proto__为null

二.原型和原型链存在的意义是什么？

使得实例对象可以共享构造函数的原型属性和方法，可以节省内存，构造函数原型上的属性和方法越多，节省的内存就越大。

rich_c
关注
JavaScript中的继承与原型链详解
柯晓楠
08-06 1477
同理，原型对象也是一个对象，它也有自己的原型对象，因此也可以继承它的原型对象的属性。这样的实现避免了引用类型的属性被所有实例共享的问题，在父类实例创建时还可以自定义地传参，缺点是方法都是在构造函数中定义，每次创建实例都会重新赋值一遍方法，即使方法的引用是一致的。在访问一个对象的时候，JavaScript 引擎会执行一个搜索过程，如果在对象实例上发现该属性，该属性值就会被使用，如果没有发现则搜索其原型对象。这就是原型继承链：对象继承其原型对象，而原型对象继承它的原型对象，以此类推。
彻底搞懂JS原型与原型链
06-03
内容概要：文章详细解析了JavaScript中原型与原型链的概念、工作原理及其实际应用。核心概念包括原型（每个对象拥有指向另一对象的[[Prototype]]属性）、构造函数（用于创建对象，new操作符调用时新对象的[...
js原型链详解
06-04
javascript的原型与原型链的详细的解析，一篇从认识到熟悉深入的好文章！
简单粗暴地理解js原型链--js面向对象编程
weixin_30421525的博客
05-03 341
原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。 不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的不能帮你什么。简单粗暴点看原型链吧，想点与代码无关的事，比如人、妖以及人妖。 1）人是人他妈生的，妖是妖他妈生的。人和妖都是对象实例，而人他妈和妖他妈就是原型。原型也是对象，叫原型对象。 2）人他妈和人他爸啪啪啪能生...
JavaScript------原型、原型链
最新发布
dd的博客
10-16 936
在js中，原型和原型链是一个很重要的知识点，只有理解了它，我们才能更深刻的理解js，在这里，我们将分成几个部分来逐步讲解。构造函数是使用了new关键字的函数，用来创建对象，所有函数都是Function()的实例原型对象是用来存放实例对象的公有属性和公有方法的一个公共对象，所有原型对象都是Object()的实例原型链又叫隐式原型链，是由__proto__属性串联起来，原型链的尽头是Object.prototype。
javascript中的原型与原型链
codewhy的博客
09-09 1420
文章目录一、什么是原型二、prototype四、constructor五、实例与原型六、原型的原型七、原型链 一、什么是原型 原型：每一个javascript对象(除null外)创建的时候，都会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型中“继承”属性。 例如 var obj = new Object(); 创建一个对象的时候都会同时关联一个对象，如图，关联的这个对象就是新建的对象obj的原型 二、prototype 在JavaScript中，每个函数都有一个prototype属
javascript之原型与原型链
zhao97的博客
03-06 1131
借鉴原文原型与原型链 一、prototype 在javascript除外，每一个函数都有一个prototype属性，这个属性指向函数的原型 function Person(age) { this.age = age } Person.prototype.name = 'kavin' var person1 = new Person() var person2 = new Person() console.log(person1.name) //kavin console.log(per
JS原型、原型链深入理解
weixin_34050005的博客
08-28 182
原型是JavaScript中一个比较难理解的概念，原型相关的属性也比较多，对象有”prototype”属性，函数对象有”prototype”属性，原型对象有”constructor”属性。 一、初识原型在JavaScript中，原型也是一个对象，通过原型可以实现对象的属性继承，JavaScript的对象中都包含了一个”[[Prototype]]”内部属性，这个属性所对应的就是该对象的原型。“[[...
JavaScript中原型和原型链详解
10-24
在探讨JavaScript中原型和原型链的详细知识前，我们首先要了解JavaScript对象的几个核心概念，包括私有变量和函数、静态变量和函数以及实例变量和函数。这些都是理解原型和原型链的基础。 私有变量和函数属于一个...
JS原型与原型链的深入理解
10-20
以上内容总结了JavaScript中原型和原型链的基本概念和工作机制。理解这些概念有助于编写更加高效和优雅的代码，并且可以更好地控制对象的创建和继承过程。对于JavaScript开发者而言，掌握原型和原型链的深入理解是...
【原型链】JS中的原型链到底是什么
qq_43882506的博客
05-29 440
1.构造函数 JS中的构造函数和普通函数没有本质区别，要用调用方式的不同来区分。 在调用构造函数时要用new Func（）的方法来调用，此时函数会默认返回this 为了与普通函数区分，构造函数的函数名一般以大写字母开头。 function Person(name,age){ this.name=name; this.age=age } var xiaoming=Person('xiaoming',20);//错误调用，xiaoming为undefined var xiaoming=new P
什么是 JS 原型链？
笔记
08-07 505
我们知道 JS 有对象，比如 var obj = { name: 'obj' } 我们可以对 obj 进行一些操作，包括 「读」属性 「新增」属性 「更新」属性 「删除」属性 下面我们主要来看一下「读」和「新增」属性。 为什么有 valueOf / toString 属性呢？ 在我们没有对 obj 进行任何其他操作之前，发现 obj 已经有几个属性（方法）了： 那么问题来了：valueOf / toString / constructor 是怎么来？我们并没有给 ob..
js原型与原型链详解（万文总结，一文搞懂原型链!）
热门推荐
Yi_qian的博客
12-28 2万+
JavaScript中的原型和原型链：1，每个对象均存在隐式原型(__proto__)，函数对象才有prototype属性2，__proto__存在的意义在于为原型链查找提供方向，原型链查找靠的是__proto__，而不是prototype3，函数对象的__proto__都指向Function.prototype4，每个对象都有一个隐式原型属性(__proto__)，多个原型通过__proto__链接在一起形成的链式结构就是原型链😃。
JS原型链的一些理解
我的技术博客
07-26 896
关于原型链我的理解是一个构造函数的原型作为另一个构造函数的实例形成的继承关系 在JS高级程序设计中有这样一个图 当我们定义一个函数时会有一个原型,即图中的SuperType Prototype,这时原型对象中会有一个constructor指向构造函数SuperType,这便是构造函数与原型对象之间的关系; function Super(){ this.name='bob'; ...
Javascript原型链详解，一文带你彻底搞懂js原型、原型对象及原型链
greatming666的博客
03-01 1965
原型链是 JavaScript 中的一个重要特性，它是实现对象之间继承关系的机制。在 JavaScript 中，每个对象都有一个原型属性，指向另一个对象。当试图访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到对应的属性或方法为止。
js原型链的理解
weixin_42242810的博客
05-19 855
构造函数创建出来的实例化对象，拥有创年改对象的构造函数的所有属性和方法，该构造函数有一个prototypes属性，指向该构造函数的原型对象，该原型对象又有一个属性，__proto__属性指向js中的Object对象，该对象有一个__proto__属性指向为null，以上就是原型链的理解，原型链的使用主要运行在继承方面。...
js的原型和原型链是什么？
France_CG
04-12 1711
js的原型和原型链是：1、原型模式是用于创建重复的对象，同时又能保证性能，这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方式；2、原型链是原型对象创建过程的历史记录，当访问一个对象的某个属性时，会先在这个对象本身属性上查找。 js的原型和原型链是： JavaScript是一门基于原型的语言，在软件设计模式中，有一种模式叫做原型模式，JavaScript正是利用这种模式而被创建出来 原型模式是用于创建重复的对象，同时又能保证性能，这种类型的设计模式属于创建型模式，它提供了一种创建对象的最佳方.
何为JS中的原型链
qq_48643318的博客
08-13 422
js, 原型链, 原型对象, prototype, __proto__
JS中的原型链(超清晰理解)
qq_39112047的博客
06-20 1万+
原型链，所有的原型构成了一个链条，这个链条我们称之为原型链（prototype chain)。如果我们执行下面这段代码,因为没有定义address这个属性，程序结果理所当然的是undefined。 这个时候经历了什么呢？JS引擎线从Obj.address里寻找，发现没有找到，然后接着去找obj.__ proto __ 里面寻找，发现还是没找到，所以结果为undefined。我们可以给obj.__ proto __ 赋值 或者这样 接着套娃 js引擎会顺着这些原型不断的往上找，直到address这个属性。这些
js中原型与原型链的作用
03-28
<think>好的，我现在要回答用户关于JavaScript中原型与原型链的作用的问题。首先，我需要回忆一下自己对原型和原型链的理解，确保概念正确。然后，按照用户的要求，结构要清晰，分步骤解释，同时要遵循系统级指令中的格式要求，比如数学表达式用$...$，独立公式用$$...$$，并且用中文回答。 首先，用户可能对原型和原型链的基本概念不太清楚，需要从基础讲起。我应该先解释原型是什么，然后再说原型链，以及它们的作用。需要注意使用例子来帮助理解，同时避免技术术语过于复杂。 原型在JavaScript中是对象继承的基础。每个对象都有一个原型对象，从那里继承属性和方法。构造函数有一个prototype属性，指向实例的原型。而每个实例有一个__proto__属性，指向构造函数的prototype。这可能有点抽象，需要用具体的例子来说明。 比如，创建一个构造函数Person，然后实例化一个对象person1。Person.prototype就是person1的原型，person1.__proto__ === Person.prototype。这时候，如果person1访问一个属性，比如sayHello，而它自身没有这个属性，就会去Person.prototype上找，这就是原型链的查找机制。 接下来，原型链是如何形成的呢？比如，如果Person.prototype本身也是一个对象，它可能有自己的原型，比如Object.prototype。这样，当访问person1.toString()时，如果Person.prototype没有，就会继续向上查找Object.prototype，直到找到或者到达原型链的末端null。这个过程就是原型链的作用，实现属性和方法的继承。 然后需要提到原型链的作用，比如实现继承、共享属性和方法、节省内存等。比如，所有实例共享原型上的方法，而不是每个实例都创建一份，这样节省内存。同时，可以通过修改原型来动态添加方法，所有实例都能访问到。 可能还需要解释ES6中的class语法糖，其底层还是基于原型继承的。比如，class中的方法其实是定义在prototype上的。 需要注意是否有常见的误解需要澄清。比如，原型链的终点是null，而Object.prototype.__proto__就是null。还有，函数也是对象，所以Function.prototype也有自己的原型链。 在回答过程中，要检查是否有错误的地方。比如，构造函数.prototype的constructor属性指向构造函数本身，这点可能需要提及，但用户的问题主要关于作用和功能，所以可能不需要太深入。 最后，总结原型和原型链的作用，强调其在JavaScript面向对象编程中的重要性。确保回答结构清晰，分点说明，可能用步骤式的方式，比如分点讲解原型的作用、原型链的形成、以及它们带来的好处。 现在需要将这些思路整理成符合用户要求的结构，使用中文，正确应用LaTeX格式，比如在提到对象属性时，可能用$obj.__proto__$这样的行内公式，或者构造函数.prototype这样的写法。但根据系统指令，数学表达式需要用$...$，所以可能需要将代码相关的部分用反引号，而变量或属性名用$...$包裹，但可能用户的问题中较少涉及数学表达式，更多是代码概念。这时候可能需要判断，如果属性名如prototype或__proto__不需要用LaTeX，而如果作为例子中的变量，可能需要使用代码块或者反引号。但系统指令中提到的是行内数学表达式，比如变量、方程等需要用$...$，可能这里的变量指的是数学变量，而代码中的变量可能用反引号。需要仔细看系统指令。 系统指令中第一条说：“所有行内数学表达式(包括变量、不等式、方程等)必须使用$...$格式”，而代码相关的部分可能不属于数学表达式，所以应该用反引号。比如，在提到obj.__proto__时，应该用反引号包裹，如`obj.__proto__`，而不是$obj.__proto__$。可能我之前理解有误，需要确认。例如，用户给的例子中有$(a+b)^2$，这是数学表达式，而代码中的变量如x^2可能属于数学表达式，但代码中的属性如prototype属于代码语法，应该用反引号。所以可能需要区分，在回答中，代码相关的术语用反引号，而数学相关的用$...$。 因此，在回答中，当提到JavaScript中的属性或方法时，使用反引号，例如`prototype`，`__proto__`，而数学表达式如方程则用$...$。但用户的问题是关于JavaScript的原型，可能较少涉及数学表达式，所以可能主要使用反引号来标记代码元素，而系统指令中的数学表达式可能不适用于此，但需要遵守规则，可能用户问题中的变量如原型链相关的术语不需要用数学格式，而代码中的变量需要正确标记。不过系统指令可能更强调数学内容，而代码部分可能按常规处理，用反引号。需要再次仔细看系统指令： 系统级指令第一条：“所有行内数学表达式(包括变量、不等式、方程等)必须使用$...$格式”，而代码中的变量是否属于这里的“变量”？可能这里的变量指的是数学中的变量，而不是编程中的变量。例如，在数学表达式中的变量x用$x$，而编程中的变量如prototype用反引号。因此，在回答中，代码部分用反引号，数学表达式用$...$。例如，在提到构造函数时，用`function Person() {}`，而数学中的变量如方程中的变量用$...$。 因此，在回答中，可能较少使用数学表达式，但如果有的话要正确应用。例如，如果讨论原型链的长度或层次，可能不需要数学公式，所以可能整个回答中数学表达式较少，但需要确保符合格式。 现在，组织回答的结构： 1. 先简要介绍原型和原型链的概念。 2. 解释原型的作用，如共享属性、继承等。 3. 解释原型链的形成，通过例子说明查找机制。 4. 总结原型链的作用和重要性。 5. 可能提到ES6的class语法和原型的关系。 6. 最后举例说明，帮助理解。 需要确保每个部分都清晰，分步骤或分点，帮助用户逐步理解。同时，使用中文，避免术语堆砌，尽量口语化但准确。 现在开始写回答： 首先，原型（Prototype）是JavaScript实现继承和共享属性的核心机制。每个对象都有一个隐藏的`[[Prototype]]`属性（可通过`__proto__`访问），指向其原型对象。当访问对象属性时，如果自身不存在，则会沿原型链逐级查找，直到找到或到达终点`null`。构造函数通过`prototype`属性关联实例的原型，例如： ```javascript function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, ${this.name}!`); }; const person1 = new Person('Alice'); person1.sayHello(); // 输出：Hello, Alice! ``` 这里，`person1`自身没有`sayHello`方法，于是通过`person1.__proto__`（即`Person.prototype`）找到。 其次，原型链是由多个对象的`[[Prototype]]`连接而成的链式结构。例如，`Person.prototype`的原型是`Object.prototype`，因此： $$ \text{person1} \rightarrow \text{Person.prototype} \rightarrow \text{Object.prototype} \rightarrow \text{null} $$ 当调用`person1.toString()`时，JavaScript会沿此链向上查找，直到在`Object.prototype`中找到。 原型的作用包括： 1. **实现继承**：子类可共享父类的属性和方法。 2. **节省内存**：所有实例共享原型上的方法，无需重复创建。 3. **动态扩展**：修改原型后，所有实例均可立即访问新增属性。 原型链确保了JavaScript的对象体系具有灵活的继承能力，但过度依赖可能导致性能问题，需谨慎设计层次结构。</think>JavaScript 中的**原型**和**原型链**是实现继承与属性共享的核心机制，下面通过结构化解释帮助你理解其作用： --- ### 一、原型（Prototype）的作用 1. **共享属性和方法** 每个构造函数（如 `Person`）都有一个 `prototype` 属性，指向一个对象。所有通过该构造函数创建的实例（如 `person1`）会**共享这个原型对象上的属性和方法**。 例如： ```javascript function Person(name) { this.name = name; } // 方法定义在原型上，所有实例共享 Person.prototype.sayHello = function() { console.log(`Hello, ${this.name}!`); }; const person1 = new Person('Alice'); const person2 = new Person('Bob'); person1.sayHello(); // Hello, Alice! person2.sayHello(); // Hello, Bob! ``` 2. **节省内存** 如果方法定义在构造函数内部，每个实例会创建独立的副本。而定义在原型上时，所有实例**共享同一份方法**，减少内存占用。 --- ### 二、原型链（Prototype Chain）的作用 1. **实现继承** 当访问对象的属性时，若对象自身没有该属性，JavaScript 会通过 `__proto__` 属性（即对象的原型链）**逐级向上查找**，直到找到或到达终点 `null`。 例如： ```javascript person1.toString(); // 输出：[object Object] ``` - `person1` 自身没有 `toString` 方法。 - 查找 `Person.prototype`，也没有。 - 继续查找 `Object.prototype`（所有对象的顶层原型），找到并调用。 这形成了一条链式结构： $$ \text{person1} \rightarrow \text{Person.prototype} \rightarrow \text{Object.prototype} \rightarrow \text{null} $$ 2. **动态扩展性** 即使实例已创建，修改原型后，所有实例**仍能访问新增的属性和方法**： ```javascript Person.prototype.sayGoodbye = function() { console.log('Goodbye!'); }; person1.sayGoodbye(); // 输出：Goodbye! ``` --- ### 三、关键概念总结 1. **构造函数、实例、原型的关系** - **构造函数**：通过 `prototype` 属性关联原型。 - **实例**：通过 `__proto__` 属性指向构造函数的原型。 - **原型对象**：包含共享的属性和方法，其 `constructor` 属性指回构造函数。 ```javascript person1.__proto__ === Person.prototype; // true Person.prototype.constructor === Person; // true Object.getPrototypeOf(person1) === Person.prototype; // true（推荐写法） ``` 2. **原型链的终点** 所有原型链的顶端是 `Object.prototype`，其 `__proto__` 为 `null`： $$ \text{Object.prototype.__proto__} \rightarrow \text{null} ``` --- ### 四、ES6 中的 `class` 语法 `class` 是原型继承的语法糖，本质仍基于原型链： ```javascript class Person { constructor(name) { this.name = name; } sayHello() { /* 定义在 Person.prototype 上 */ } } ``` --- ### 五、总结：原型与原型链的意义 - **实现继承**：通过链式查找模拟传统面向对象语言的继承。 - **高效共享**：减少重复属性和方法的存储。 - **灵活扩展**：动态修改原型会影响所有实例。 理解原型链是掌握 JavaScript 面向对象编程的关键，也能帮助规避属性遮蔽、意外覆盖等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值