原型链图解

news/2024/11/17 21:44:16/

 

原型链图

 


首先,要明确几个点:
1.在JS里,万物皆对象。方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。
即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。

 

2.方法(Function)
方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。

 

好啦,知道了这两个基本点,我们来看看上面这副图。
1.构造函数Foo()
构造函数的原型属性Foo.prototype指向了原型对象,在原型对象里有共有的方法,所有构造函数声明的实例(这里是f1,f2)都可以共享这个方法。

 

2.原型对象Foo.prototype
Foo.prototype保存着实例共享的方法,有一个指针constructor指回构造函数。

 

3.实例
f1和f2是Foo这个对象的两个实例,这两个对象也有属性__proto__,指向构造函数的原型对象,这样子就可以像上面1所说的访问原型对象的所有方法啦。

 

另外:
构造函数Foo()除了是方法,也是对象啊,它也有__proto__属性,指向谁呢?
指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛,因此这里的__proto__指向了Function.prototype。
其实除了Foo(),Function(), Object()也是一样的道理。

 

原型对象也是对象啊,它的__proto__属性,又指向谁呢?
同理,指向它的构造函数的原型对象呗。这里是Object.prototype.

 

最后,Object.prototype的__proto__属性指向null。

 


总结:
1.对象有属性__proto__,指向该对象的构造函数的原型对象。

2.方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。

 <a href="https://www.zhihu.com/question/34183746/answer/59043879">转载路径:知乎</a> 


http://www.ppmy.cn/news/484830.html

相关文章

原型、原型对象和原型链

原型&#xff1a; __ proto __ 原型对象&#xff1a; prototype 每个对象中都有 __ proto __ 一、构造函数和原型 ES6之前并没有引入类的概念&#xff0c;对象不是基于类创建的&#xff0c;是用一种称为构造函数的特殊函数来定义的。 创建对象的三种方式&#xff1a; 1.通过…

带你了解原型链

了解原型链可以先看我上期发布的帖子再来看这篇会更好的理解: 详解原型对象_loulansd的博客-CSDN博客 问:什么是原型链? 得先知道什么是对象,比如一个物品一只笔就是对象,他的属性可以是黑色彩色的它的方法可以是写字,包括我们生活的万物都有自身的属性,那么我们就可以理解万…

原型和原型链(二)

文章目录 前言一、_proto_(上文提到)1、定义&#xff1a;2、小测试&#xff1a; 二、原型链1、定义及相关解释&#xff1a;2、原型链图&#xff1a; 前言 在上篇文章中对构造函数和原型对象进行了相应的总结。此文章将会对原型链进行详细的阐述。希望大家对原型和原型链的理解…

原型链的解说

首先&#xff0c;我们要知道&#xff0c;万物皆对象&#xff0c;一切的一切都是由对象构成的。 一、关于函数的原型对象 在JavaScript中&#xff0c;如果我们创建一个函数A&#xff0c;那么浏览器就会在内存空间里创建一个对象B&#xff0c;而且每个函数都会默认会有一个属性…

【js进阶】-原型/原型链

一、构造函数创建对象 我们先使用构造函数创建一个对象&#xff0c;先来认识下构造函数 function Person() { } var person1 new Person(); person1.name 张三; console.log(person1.name) // 张三在这个例子中&#xff0c;Person 就是一个构造函数&#xff0c;我们使用 ne…

JS原型、原型链到底是什么?

前言 在js的学习中&#xff0c;原型毫无疑问是一个难点&#xff0c;但也是一个不可忽视的重点。在前端面试中也是一个高频考题&#xff0c;在接下来的深入学习中&#xff0c;你会发现原型、原型链等知识点其实并不难。 1. “一切皆为对象” JavaScript是一个面向&#xff08…

原型及原型链 ①

文章目录 原型及原型链函数对象constructor 构造函数new 操作符将构造函数当作函数构造函数的问题prototype 原型理解原型对象更简单的原型语法原型的动态性原生对象的原型原型对象的问题构造函数和原型结合构造函数和原型结合 __proto__原型链关卡 本文转&#xff1a;https://…

原型原型链深度解析

原型 原型是函数特有的&#xff0c;构造函数制造出对象的公共祖先。通过该构造函数产生的对象&#xff0c;可以继承该原型的属性和方法。 我们先写一个构造函数 function Person() {} var person new Person(); person.name luoxi; console.log(person.name) // luoxi在这…