分析JavaScript中的原型链结构

最新推荐文章于 2024-09-04 23:36:31 发布
最新推荐文章于 2024-09-04 23:36:31 发布
阅读量365 收藏 1
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/80703387
版权

1.原型链继承

下面的案例使用了原型链继承的方法，实现了Student 继承 Person

    /**1.父亲构造器函数*/
    function Person(name) {

    }

    /**2.子构造器函数*/
    function Student() {

    }

    /**3.设计原型链继承*/
    Student.prototype=new Person();
    /**4.修改原型对象中constructor属性指向*/
    Student.prototype.constructor=Student;

    /**5.创建Student对象*/
    var student=new Student();

2.画图分析原型链结构

1.分析Student构造函数和其原型对象关系

这里写图片描述

1.从上图可以看出student对象是通过Student构造器函数实例化的。

2.Student构造器函数的原型对象 和 student对象的原型是person对象

3.Student构造器函数的原型对象的构造器函数是Student构造器函数

2.分析Person构造函数和其原型对象关系

这里写图片描述

1.Student构造器函数的原型对象 是 person对象( 即 Student.prototype )

2.person对象( 即 Student.prototype )是通过Person构造器函数实例化的

3.控制台输出Person构造函数的原型对象

    /**1.父亲构造器函数*/
    function Person(name) {
    }

    /**2.子构造器函数*/
    function Student() {
    }

    /**3.设计原型链继承*/
    Student.prototype=new Person();
    /**4.修改原型对象中constructor属性指向*/
    Student.prototype.constructor=Student;

    /**5.创建Student对象*/
    var student=new Student();

    console.log(Student.prototype);//是person对象（通过Person实例化）
    console.log(Student.prototype.constructor);//是Student的构造函数

    console.log(Person.prototype);//是Object对象（通过Object实例化）
    console.log(Person.prototype.constructor);//是Person的构造函数

控制台输出：

这里写图片描述

4.分析Person构造函数的原型对象关系

这里写图片描述

1.Person构造器函数的原型对象 是object 对象( 即 Person.prototype )

2.object 对象( 即 Person.prototype )是 通过Object构造函数实例化出来

3.Object构造器函数的原型对象 和 object对象(即 Person.prototype) 的原型是Person.prototype_proto_对象( 其实这个也是一个object对象)

5.控制台输出Object构造函数的原型对象

    /**1.父亲构造器函数*/
    function Person(name) {
    }

    /**2.子构造器函数*/
    function Student() {
    }

    /**3.设计原型链继承*/
    Student.prototype=new Person();
    /**4.修改原型对象中constructor属性指向*/
    Student.prototype.constructor=Student;

    /**5.创建Student对象*/
    var student=new Student();

//    console.log(Student.prototype);//是person对象（通过Person实例化）
//    console.log(Student.prototype.constructor);//是Student的构造函数

//    console.log(Person.prototype);//是Object对象（通过Object实例化）
//    console.log(Person.prototype.constructor);//是Person的构造函数

    console.log(Object.prototype);//是Object对象（通过Object实例化）
    console.log(Object.prototype.constructor);// 是Objectg构造函数
    console.log(Object.prototype.__proto__);//null

控制输出：

这里写图片描述

6.分析Object构造函数的原型对象关系

这里写图片描述

1.Object构造函数的原型对象 是一个object对象( 即 Object.prototype)

2.object对象( 即 Object.prototype) 的constructor属性的是Object构造函数

3.object对象( 即 Object.prototype) 是通过Object构造函数实例化出来的

4.object对象( 即 Object.prototype) 的原型的是null

思考：在js中函数也是对象, 那么Student构造器函数这个对象是谁实例化出来的 ?

7.查看Student构造器函数这个对象

1.控制台打印Student构造器函数这个对象相关的属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    /**1.父亲构造器函数*/
    function Person(name) {
    }
    /**2.子构造器函数*/
    function Student() {
    }

    /**3.设计原型链继承*/
    Student.prototype=new Person();
    /**4.修改原型对象中constructor属性指向*/
    Student.prototype.constructor=Student;

    /**5.创建Student对象*/
    var student=new Student();

    console.log(Student.constructor); // Student构造函数是一个对象，它的构造函数是Function: ƒunction Function(){ },所以 Student构造函数对象是通过Function构造函数实例化的
    console.log(Student.__proto__); // 是一个空函数:  ƒunction () { }
    console.log(Function.prototype); // 是一个空函数: ƒunction () { }

</script>
</body>
</html>

2.控制台 输出：

这里写图片描述

8.分析Student构造器函数这个对象的关系

这里写图片描述

1.Student构造器函数也是一个对象

2.Student构造器函数这个对象是通过Function构造函数实例化出来的

3.Student构造器函数这个对象 的构造器是Function构造函数

4.Student构造器函数这个对象 的 ._proto_是一个空函数

5.Function构造函数 的原型对象是空函数

9.查看空函数这个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**1.父亲构造器函数*/
    function Person(name) {
    }

    /**2.子构造器函数*/
    function Student() {
    }

    /**3.设计原型链继承*/
    Student.prototype=new Person();
    /**4.修改原型对象中constructor属性指向*/
    Student.prototype.constructor=Student;

    /**5.创建Student对象*/
    var student=new Student();

    console.log(Function.prototype.constructor); // 空函数Function.prototype也是一个对象，这个对象是通过谁创建的?通过Function构造函数
    console.log(Function.prototype.__proto__);// 空函数也是一个对象，这个对象的原型是谁? 是 object对象

    console.log(Function.prototype.__proto__ === Object.prototype);//空函数的原型对象是Object的原型对象
</script>
</body>
</html>

查看控制台输出：

这里写图片描述

10.分析空函数这个对象的关系

这里写图片描述

1.空函数也是一个对象

2.空函数这个对象的构造器函数是 Function构造器函数，所以空函数对象也是通过Function构造函数实例化出来的 .

3.空函数这个对象 的原型._proto_ 是 Object构造器函数的原型对象

思考：Function构造函数也是一个对象？ 那么Function是谁实例化的? 它的._proto_对象是？

11.查看Function构造函数这个对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /**1.父亲构造器函数*/
    function Person(name) {
    }

    /**2.子构造器函数*/
    function Student() {
    }

    /**3.设计原型链继承*/
    Student.prototype=new Person();
    /**4.修改原型对象中constructor属性指向*/
    Student.prototype.constructor=Student;

    /**5.创建Student对象*/
    var student=new Student();

    console.log(Function.constructor);//Function也是一个对象,是谁实例化?是Function构造函数
    console.log(Function.__proto__); // 是空函数: function(){}
</script>
</body>
</html>

控制台输出结果：

这里写图片描述

12.分析Function构造函数这个对象关系

这里写图片描述

1.Function构造器函数也是一个对象

2.Function构造器函数这个对象 的构造器函数是自身 Function构造器函数

3.Function构造器函数这个对象的原型._proto_ 是 空函数

结论：所有的对象都是继承Object对象。

LiuJun2Son
关注
专栏目录
分析javascript原型及原型链
10-18
这里重写原型对象后，尽管原型链的结构发生了变化，但person1和person2的sayName方法仍然是同一个函数，这说明了重写原型对象不会影响已经创建的对象实例的原型链结构。 总结： JavaScript中的原型是一个非常重要的...
JavaScript对象原型链原理解析
11-21
JavaScript对象原型链是JavaScript语言中的一个核心概念，它在实现继承和共享属性方面起到了关键作用。原型链基于原型（prototype）对象，通过一系列链接形成一个链式结构，使得一个对象可以访问到另一个对象的属性...
JavaScript 原型链结构
houyanhua1的专栏
04-02 142
demo.html：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script&gt; //一、什么是原型链？
JS中的原型与原型链简单分析
MichaelAn的博客
03-30 372
原型与原型链是JS中一个难点，也是其他语言不具有的特点之一。 1. 原型链作用：利用修改原型链的结构（增删改节点中的成员），使得实例对象可以使用整条原型链中的所有成员。 2. 对象的原型链：凡是对象都有原型；原型也是对象。原型总可以找到下面的原型，构成一个对象的序列，就称该结构为原型链。 3. 原型链结构：凡是使用构造函数创建出来的对象，并且没有利用赋值的方式修改原型，该对象保留默认的原型链...
JavaScript中的原型链简析与原型链结构图绘制
yzzane的博客
05-21 549
在JavaScript中，对象有原型对象，而原型对象也是对象，所以原型对象也有原型对象，如此一来，一环紧扣一环，就形成了一种链式结构，简称原型链.     JS中的原型链是面向对象编程思想的很好体现，将原型链理解透彻就能理解JS中各种数据类型间的关系，在一定程度上可以装逼一把：“万物皆对象”。
Object.create()是怎样建立原型链的
richest_qi的博客
04-17 637
1实例、实例之间的关系与判断方法 每个函数都有一个prototype属性，这个属性指向函数原型； 函数原型自带一个constructor属性，这个属性指向函数自己。 举个例子，比如有这么一个函数 function Book(title,author){ this.title= title; this.author= author; } 函数Book和它的原型之间的关系就可以用下图描...
原型链分析
weixin_40793759的博客
05-15 153
ps：这一part我们主要对new Array→Array→Function→Object这条链展开 首先各个对象展开结构如下： new Array对象属性只有_proto_ Array对象属性结构： Function对象属性结构： Object对象属性结构： 分析上面各个对象结构可以总结如下： 每个实例对象（ object ）都有一个私有属性（称之为 __proto__ ） 实例化对象没有prototype var arr = new Array() arr.prototype === und
在javascript中什么是原型链
最新发布
m0_57836225的博客
09-04 409
原型链使得对象可以继承来自其原型对象的属性和方法，这种机制有助于减少代码重复和实现代码复用。但如果不恰当使用可能会导致一些意外的结果，比如在原型链上修改属性可能会影响到多个对象。每个对象都有一个指向其原型对象的内部链接，这个原型对象又有自己的原型，直到达到一个对象的原型为 null 为止，这样就形成了一个类似链条的结构，称为原型链。在 JavaScript 中，原型链是实现继承的一种机制。所以，代码的输出结果是。
javascript原型 原型链
gqk01的博客
08-20 1066
1 一切都是对象 “一切都是对象”这句话的重点在于如何去理解“对象”这个概念。 ——当然，也不是所有的都是对象，值类型就不是对象。 首先咱们还是先看看javascript中一个常用的运算符——typeof <script type="text/javascript"> //1. 基本 // typeof返回数据类型的字符串表达 // <!-- // 1. 分类 // * 基本(值)类型 // * String: 任意字符串 // * Number
javascript 原型与原型链的理解及实例分析
10-15
JavaScript中的原型（Prototype）和原型链（Prototype Chain）是理解JavaScript面向对象编程的关键概念。在这个模型中，每个对象都有一个内部属性`[[Prototype]]`，在JavaScript中通常通过`__proto__`或`Object....
JavaScript进阶（四）原型与原型链用法实例分析
10-15
JavaScript中的原型和原型链是理解JavaScript面向对象编程的关键概念。原型是JavaScript中实现对象继承的一种方式，它是一个JavaScript对象，可以存储方法和其他属性，供构造函数创建的实例对象共享和引用。原型对象...
原型链的从对象创建到原理详解
木毅成舟的博客
12-21 2111
js原型与原型链终极详解一、在javascript中没有所谓的空对象，即使最简单的{}也具有从Object.prototype继承的方法和属性。二、创建的对象的俩种等价的方法：使用字面量方法创建对象：var oschina = {goes:”far”}; 使用内置构造函数创建对象：var oschina = new Object(); car.gose = “far”。我们应该尽量使用字面量发创
JS原型链
热门推荐
weixin_45045252的博客
06-09 1万+
原型：被用于复制现有实例来生成新实例的函数 构造函数：用new来调用，就是为了创建一个自定义类实例：是类在实例化之后一个一个具体的对象原型链：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例，结果会怎样？显然，此时的原型对象将包含一个指向另一个原型的指针，相应地，另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例，那么上述关系依然成立。如此层层递进，就构成了实例与原型的链条
ES6-字符串模板
liujun2son
12-28 5796
1.普通字符串的拼接 普通字符串在与变量拼接时一般使用+号，这种适用于简单的拼接。 如果是复杂的拼接使用JSX中的字符串模板比较方便。 //1.普通字符串的拼接 var str='I bought an iphone '; var number=7; console.log(str+number+'s'); // I bou...
常用的正则表达式
liujun2son
09-26 1513
1.正则表达式 正则表达式，又称规则表达式**。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换、验证表单、提取**那些符合某个模式(规则)的文本。 许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。 正则表达式这个概念最初是由Unix中的工...
ES6-箭头函数
liujun2son
12-28 1158
1.es5普通函数 function sum1(a,b) { return a+b; } 2.es5匿名函数 var sum2=function (a,b) { return a+b; } 3.ES6箭头函数 把匿名的函数去掉 function 函数 , 同时添...
ES6-数组
liujun2son
12-28 897
ES6 中数组的常用函数：map , filter , reduce 1.map函数 map 是映射的意思。map函数的的作用就是将一个数组映射为另一个数组。 返回一个新的数组。 例如： 1.将一个普通数组映射为对象数组 将[60,70,80] 映射为 [{score: 60}, {score: 70}, {score: 80}] //将一个普通数组映射为对象数组,...
ES6-Promise承诺
liujun2son
12-28 733
Promise对象表示用于处理异步请求 和请求的成功或者失败。(简单点说就是 : 用同步一样的方式，来书写异步代码)。 异步：同时可以进行多个操作，每一个操作互不干扰 同步：同一个时刻只能做一件事情，做完了才能继续做 1.jQuery中的ajar实现异步请求 &lt;script src="jquery-1.11.3.min.js"&gt;&lt;/script&gt; ...
ES6-Promise与Generator结合
liujun2son
12-29 598
需求：使用ajar依次发送3次网络请求, 必须前一次发送成功后才能进行下一次的网络请求。 目的：实现把异步代码的风格写成了同步代码的风格。这个就是Promise + Generator 结合的精髓 1.jQuery中ajar的实现 使用ajar依次发送3次网络请求, 第一次请求user.json, 请求成功后发起第二次网络请求获取banners.json , 第二次获取banners.j...
JavaScript原型与原型链深度解析
"本文深入探讨了JavaScript中的原型和原型链，通过实例分析它们的基本概念、原理和用法，旨在帮助开发者理解和掌握这一核心概念。" JavaScript的原型（prototype）和原型链是理解对象继承和共享属性的关键。原型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值