JavaScript原型和闭包之---构造函数、原型与对象三者之间的关系(扩充constructor)(五)

本文详细解析了JavaScript中构造函数、原型及其实例对象之间的关系。通过实例演示了构造函数如何通过prototype属性访问原型对象,原型对象如何通过constructor属性指向构造函数,以及实例对象如何通过__proto__属性访问原型。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

    通过前面的博客:构造函数、原型、prototype与__proto__我们已经了解:

  • 构造函数有个prototype属性可以访问原型对象,
  • 构造函数可以实例化对象,
  • 实例化的对象有个非标准的__proto__属性,对象可以通过__proto__访问原型。
  • 在默认情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,指向对应的构造函数也就是Person.prototype.constructor指向Person。[点击这里:原型]中我有提到过(http://blog.youkuaiyun.com/diligentkong/article/details/76099287)
        那么接下来,我用图文的形式来记录一下 构造函数、原型与构造函数实例化的对象(以下会简称对象)三者之间的相爱相杀关系。
        还是用例子说明:
function Person(name,age){
        this.name = name;
        this.age = age;
    }

构造函数对原型的爱恋

    在创建构造函数的时候,系统会默认帮构造函数创建一个prototype属性,而这个属性指向函数的原型对象。原型对象包括属性和方法。
画图理解:
这里写图片描述
                                    图1 创建构造函数的时候自动关联prototype原型对象

           构造函数访问原型的方法:构造函数.prototype

Person.prototype
console.log(Person.prototype); // 输出Object

原型对象对构造函数的爱恋

          在默认情况下,所有的原型对象都会自动获得一个constructor(构造函数)属性,指向对应的构造函数。

          如何通过原型访问构造函数呢?构造函数.prototype.constructor

Person.prototype.constructor 指向Person 这个构造函数
console.log(Person.prototype.constructor);

输出结果:
这里写图片描述
完善图1:
这里写图片描述
                                  图2 原型对象自动获得constructor属性,该属性指向对应的构造函数

constructor知识点扩充

通过前面讲的几篇文章,我们已经知道 原型对象也是一个对象。还是拿Person()构造函数为例子。

  • 通过对象访问构造函数
var o = Person.prototype;
console.log(o); //Object
o是原型对象,其有constructor属性可以访问构造函数
o.constructor 指的就是Person
console.log(o.constructor);

输出结果:
这里写图片描述
那么既然o是原型对象,也就是说对象中也有constructor属性可以访问原型,信不信试试就知道了

    var p1 = new Person("kongkong",20);
    console.log(p1.constructor);  果然指的是Person  

结果证实:
这里写图片描述
通过以上可以说明,对象可以通过constructor属性访问构造函数
p1.constructo –>Person()

var p2 = new p1.constructor("diligentkong",20); //相当于直接使用 new Person()
console.log(p2.name); //diligentkong
  • 在使用新的对象替换掉默认的原型对象之后,原型对象中的constructor属性会变成 Object。为了保证整个 构造函数—原型—-对象 之间的关系的合理性,应做如下操作:
    在替换原型对象的时候,在新的原型对象中手动添加 constructor 属性
console.log(Person.prototype.constructor);
使用新对象替换原型
Person.prototype={

}
console.log(Person.prototype.constructor);

最后输出结果:
这里写图片描述
          要想保证原型替换之后,让constructor属性仍然指向Person构造函数,那么就要在新的原型对象中手动添加constructor属性

Person.prototype={
        constructor : Person
    }

打印输出再看:
这里写图片描述

构造函数与实例的爱,实例与原型的爱恋

  • 构造函数可以实例化对象,
  • 实例化的对象通过__proto__访问原型
    构造函数要实例化对象,必须使用new关键字。具体原理 参考这里 js中的构造函数
    当调用构造函数创建一个新实例后,该实例内部有一个__proto__属性(__proto__属性最早是火狐浏览器引入的,用以通过实例对象来访问原型,这个属性在早期是非标准的属性)
    构造函数的实例对象可以通过__proto__访问原型 : p.__proto__
var p = new Person("kong",18);
console.log(p.__proto__);//Object 

不过要明确的重要一点是:__proto__连接存在于实例和构造函数的原型对象之间,而不是存在于实例和构造函数之间。
完善图2:

这里写图片描述
                                  图3 构造函数实例化对象,对象通过__proto__访问原型

总结

构造函数、原型、对象的三角关系

  • 构造函数通过.prototype访问原型对象 例子:Preson.prototype
  • 原型对象中constructor属性指向对应的构造函数 Person.prototype.constructor
  • 构造函数实例化的对象通过.__proto_访问原型 p.__proto__
    缩略图总结:
    这里写图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值