javascript核心技术(四十四)面向对象(三) 构造函数、实例对象、原型对象的关系

[复制链接]
查看: 953|回复: 31
发表于 2023-1-28 12:55:45 | 显示全部楼层 | 阅读模式
通过前面两节的讲解,我们已经把构造函数、实例对象和原型对象都进行了说明,但是我们依然非常有必要再次讲解一下构造函数、实例对象、原型对象的之间的关系,本节内容是JS中面向对象的核心原理,也是最容易傻傻分不清楚的逻辑,所以请大家务必认真理解,否则后面会越来越迷糊,至少小编本人在初学js时,这块内容着实掉了不少头发。

下面我们会用最直白的方式来将这部分内容讲清楚,但我仍然相信,能够一次搞明白的人天赋异禀。
  1. 构造函数 --是用来创建实例的对象的,new构造函数,可以得到一个实例对象
  2. 实例对象 -- 是被new出来的那个东西。
  3. 原型对象 --是构造函数的方法的集合,即实例对象公有的方法集合,它一定是一个对象而不是一个函数。
复制代码
取构造函数的原型对象,语法如下:
  1. 构造函数.prototype
复制代码
取实例对象的构造函数,语法如下:
  1. 实例对象.constructor
复制代码
取实例对象的原型对象,语法如下:
  1. 实例对象.__proto__
复制代码

总结:
只要是从对象上取原型对象,那就是proto,不同的是:函数取原型是用prototype,对象取原型是用__proto__。
只要是取构造函数,那就是constructor。


请务必认真理解以上内容。


下面我们用代码进行说明:
<!DOCTYPE html>
<html>
<head>
        <title>面向对象(三) 构造函数、实例对象、原型对象的关系</title>
</head>
<body>
        <script type="text/javascript">

        //定义一个构造函数
        function Person(n,a){
                this.name = n;
                this.age = a;
        }
        //通过原型对象设置方法
        Person.prototype.say = function(){
                console.log('我叫' + this.name + ',我今年' + this.age + '岁');
        }
        //实例化构造函数得到 实例对象
        var person1 = new Person('张飞', 30);
        console.log(person1);

        //构造函数的prototype属性存的是原型对象
        console.log(Person.prototype);

        //实例对象的__proto__属性  存的也是原型对象
        console.log(person1.__proto__);

        //构造函数的prototype和实例对象的__proto__完全相同
        console.log(person1.__proto__ === Person.prototype);//true

        //通过原型对象的constructor属性,取到构造函数
        console.log(Person.prototype.constructor);
        //实例对象也可以直接使用原型对象上的constructor
        console.log(person1.constructor);
        
        //原型对象的构造函数等同于实例对象的构造函数
        console.log(Person.prototype.constructor===person1.constructor);//true

        //new Object().__proto__等于Object.prototype
        console.log(new Object().__proto__===Object.prototype);//true
        
        </script>
</body>
</html>


请认真理解以上的每一句代码及注释,这是JS面向对象的核心。

下面再来一段代码巩固上面的知识点。
<!DOCTYPE html>
<html>
<head>
        <title>面向对象(三) 构造函数、实例对象、原型对象的关系</title>
</head>
<body>
        <script type="text/javascript">
        //定义两个构造函数
        function A(){
                this.age = 20;
        }

        function B(){
                
        }

        //实例化 构造函数A得到一个对象
        var obj = new A();
        //将A的实例对象obj设置为构造函数B的原型对象
        B.prototype = obj;

        //实例化 构造函数B
        var obj2 = new B();
        console.log(obj2);
        //实例对象obj2的原型对象对象是obj
        console.log(obj2.__proto__);
        //obj的原型对象是new Object(),即Object的实例对象,而非Object,因为原型对象是个对象,而Object是个构造函数。
        console.log(obj2.__proto__.__proto__);
        //new Object()的原型对象是Object.prototype,
        console.log(obj2.__proto__.__proto__.__proto__);
        //即Object实例对象的原型对象等于Object构造函数的原型对象
        console.log(new Object().__proto__===Object.prototype);//true
        // 这种原型对象的链式结构,叫做是原型链
        console.log(obj2.age);//20 
        //age属性为原型链上的属性,所有实例对象都可以使用
        var obj3 = new B();
        console.log(obj3.age);
        </script>
</body>
</html>


javascript核心技术(四十四)面向对象(三) 构造函数、实例对象、原型对象的关系

ok,以上就是关于构造函数、实例对象、原型对象之间的关系,确实比较绕,但也已经是最直白的讲解了,大家动手练习一下。


易博软件介绍

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-2-21 07:53:18 | 显示全部楼层
谢谢楼主:  从你的文章中我学会很多!

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-3-5 10:21:38 | 显示全部楼层
^学习

0

主题

6

帖子

3

积分

营销入门

Rank: 2

积分
3
发表于 2023-3-15 19:00:19 | 显示全部楼层
让我深有感触,感觉自已差太多太多了

0

主题

18

帖子

10

积分

营销入门

Rank: 2

积分
10
发表于 2023-3-24 07:23:53 | 显示全部楼层
真得有收获

0

主题

37

帖子

20

积分

营销入门

Rank: 2

积分
20
发表于 2023-3-30 09:26:11 | 显示全部楼层
不管结果怎样,至少努力过.............

2

主题

160

帖子

84

积分

终身会员

Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25Rank: 25

积分
84

终身会员

发表于 2023-4-4 11:41:29 | 显示全部楼层
真得有收获
发表于 2023-4-9 23:48:16 | 显示全部楼层
^你好!我想问你一道题:试分别以顺序表和单链表作存储结构,各写一个实现线性表的就地(既使用尽可能少的附加空间)逆置的算法,在原表的存储空间内将线性表(a1,a2,.....an)逆置为(an,.....,a2,a1).

0

主题

9

帖子

5

积分

营销入门

Rank: 2

积分
5
发表于 2023-4-14 13:43:39 | 显示全部楼层
从大体上说,我也可以算的上一个初级程序员吧,学的语言很多,不过都不是很精,软件工程学的一点都不好,大部分原因是在学校和老师,谁让我们在这样的垃圾学校拉,不过,我在c和vb上有一点基础,可以这样说,我在学校还可以吧,不过看了你的帖子,我感到我真的不行。    以后希望大家在c和vb和单片机的c51方面多说说,谢谢!

0

主题

15

帖子

8

积分

营销入门

Rank: 2

积分
8
发表于 2023-4-19 15:52:13 | 显示全部楼层
经典,也给我们清醒了一下!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1、请认真发帖,禁止回复纯表情,纯数字等无意义的内容!帖子内容不要太简单!
2、提倡文明上网,净化网络环境!抵制低俗不良违法有害信息。
3、如果你对主帖作者的帖子不屑一顾的话,请勿回帖。谢谢合作!
3、问答求助区发帖求助后,如有其他用户热心帮您解决问题后,请自觉点击设为最佳答案按钮。

 
 
QQ在线客服
QQ技术支持
工作时间:
8:00-18:00
软著登字:
1361266号
官方微信扫一扫
weixin

QQ|小黑屋|慈众营销 ( 粤ICP备15049986号 )|网站地图

自动发帖软件 | 自动发帖器 | 营销推广软件 | 网络营销工具 | 网络营销软件 | 网站推广工具 | 网络推广软件 | 网络推广工具 | 网页推广软件 | 信息发布软件 | 网站推广工具 | 网页推广软件

Powered by Discuz! X3.4   © 2012-2020 Comsenz Inc.  慈众科技 - Collect from 深圳吉宝泰佛文化有限公司 公司地址:罗湖区黄贝街道深南东路集浩大厦A1403

返回顶部 返回列表