清楚搞懂JS原型对象和原型链

目录

一 构造函数和实例对象

二 原型对象

三 原型链

---

一 构造函数和实例对象

要想理解原型必须要从构造函数和实例对象说起:

        //构造函数
        function Person(name,age){
            this.name = name
            this.age = age
        }
        //创建一个实例对象
        const P = new Person('小明','18')
        

上面我们创建了一个构造函数，并且还使用这个构造函数创建了其实例对象，下面我们来打印这个实例对象，看看他是什么鬼

对于上面的结果想必大家并不意外，那问题来了，若我们使用这个构造函数创建了几十个实例对象，现在我们如何不改动构造函数给所有的对象都添加一个属性sex ?所以设计者针对实例对象的公共属性和方法设计出了原型对象。

二 原型对象

我们继续将上的实例对象的打印结果展开

        

 我们可以看到在实例对象p上有一个prototype属性，它所指向的就是实例对象p的构造函数的原型对象，并且在其内部还有一个construcor属性，它所指向的就是实例对象p的构造函数，一顿巧妙的操作将实例对象，构造函数和原型对象联系了起来。我们给出一段代码和打印结果：

​
        // 构造函数
        function Person(name,age){
            this.name = name
            this.age = age
        }
        // 在原型对象上添加属性sex
        Person.prototype.sex = 'male'
        const p = new Person('小明',18)
        const pp = new Person('校小张',20)
        console.log(p,p.sex);
        console.log(pp,pp.sex);

​

 

我们很清楚的看到在p和pp两个实例对象的prototype上都有male的属性，并且都可以读到sex属性的值。

三 原型链

理解了原型对象那理解起原型链就很简单了，先给出一段代码再做讲解

        // 构造函数
        function Person(name,age){
            this.name = name
            this.age = age
        }
        // 在原型对象上添加属性sex
        Person.prototype.getName = function(){
            console.log(this.name);
        }
        const p = new Person('小明',18)
        console.log(p.hasOwnProperty('getName') ) // -------false
        p.getName() //-------小明

        console.log(p);

   可以看到我们在Person的原型对象上增加了一个getName函数，用hasOwnProperty判断p本身并没有这个函数，但是后面p仍然使用了这个函数并且没有任何错误警告，这是为什么呢？我们继续把打印结果展开，答案就在这里

 在原型链_proto_是不可或缺的存在，它指向的就是p的构造函数的原型对象，当我们访问对象的某个属性的时候若在其本身没有此属性就会通过_proto_继续向上找直至找到属性或者_proto_为null，像这样一层一层向上查找的链式结构就叫做原型链。需要注意的是我们最好不去操作_proto_,因为一旦在某个实例对象中对_proto_里的属性进行修改，其余所有使用这个构造函数插件的实例对象都会相应修改。

以上都是本人在学习过程中对原型对象和原型链的一点理解，有错误或者不完全的地方请大家积极指出，祝大家学业进步，工作顺利！