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

人亦已歌 · 发表于 2023-1-28 12:55:45

通过前面两节的讲解，我们已经把构造函数、实例对象和原型对象都进行了说明，但是我们依然非常有必要再次讲解一下构造函数、实例对象、原型对象的之间的关系，本节内容是JS中面向对象的核心原理，也是最容易傻傻分不清楚的逻辑，所以请大家务必认真理解，否则后面会越来越迷糊，至少小编本人在初学js时，这块内容着实掉了不少头发。

下面我们会用最直白的方式来将这部分内容讲清楚，但我仍然相信，能够一次搞明白的人天赋异禀。

构造函数 --是用来创建实例的对象的，new构造函数，可以得到一个实例对象
实例对象 -- 是被new出来的那个东西。
原型对象 --是构造函数的方法的集合，即实例对象公有的方法集合，它一定是一个对象而不是一个函数。

复制代码

取构造函数的原型对象，语法如下：

构造函数.prototype

复制代码

取实例对象的构造函数，语法如下：

实例对象.constructor

复制代码

取实例对象的原型对象，语法如下：

实例对象.__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，以上就是关于构造函数、实例对象、原型对象之间的关系，确实比较绕，但也已经是最直白的讲解了，大家动手练习一下。

hushuang20 · 发表于 2023-2-21 07:53:18

谢谢楼主：从你的文章中我学会很多！

heimj · 发表于 2023-3-5 10:21:38

^学习

bjszwx04 · 发表于 2023-3-15 19:00:19

让我深有感触，感觉自已差太多太多了

rainmoon · 发表于 2023-3-24 07:23:53

真得有收获

odehz · 发表于 2023-3-30 09:26:11

不管结果怎样，至少努力过.............

dkdk · 发表于 2023-4-4 11:41:29

真得有收获

无心人 · 发表于 2023-4-9 23:48:16

^你好！我想问你一道题：试分别以顺序表和单链表作存储结构，各写一个实现线性表的就地（既使用尽可能少的附加空间）逆置的算法，在原表的存储空间内将线性表（a1,a2,.....an)逆置为(an,.....,a2,a1).

kltscb · 发表于 2023-4-14 13:43:39

从大体上说，我也可以算的上一个初级程序员吧，学的语言很多，不过都不是很精，软件工程学的一点都不好，大部分原因是在学校和老师，谁让我们在这样的垃圾学校拉，不过，我在c和vb上有一点基础，可以这样说，我在学校还可以吧，不过看了你的帖子，我感到我真的不行。以后希望大家在c和vb和单片机的c51方面多说说，谢谢！