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

原型

1.什么是原型

在js中,任何一个对象都有它的原型对象(__proto__),对象可以使用它原型对象上的属性和方法。

2.什么是构造函数

构造函数本质就是一个普通函数。

function Food(price){
	this.price = price;
}
Food.prototype.eat = function(){
	console.log('好吃')
};
var apple = new Food(12);
// apple {price: 12}

构造函数通过this,可以将new 出来的实例继承某些属性。
构造函数的prototype指向实例的原型对象。
因此这里apple实例可以访问 eat 方法。
因此apple 实例的 __proto__和构造函数Foodprototype是同一个原型对象。

apple.__proto__ === Food.prototype
//true
apple.__proto__.eated = function(){
	console.log('吃完了')
}
var banana = new Food(8);
banana.eated()
// '吃完了'

所以,也能通过实例去修改构造函数的原型。

3.原型链

那原型链的话就是,原型对象也有它的原型对象,即通过对象的__proto__属性一直找到原型对象是null的对象为止即Object.prototype.__proto__的值为null,这样就形成了一个“链”,通过这个“链”可以实现属性的继承。

4.实例、构造函数、原型对象的关系

刚刚说了,任何对象都有它的原型对象__proto__,而函数都拥有一个prototype属性指向实例的原型对象,这里需要补充一个属性,原型对象的constructor属性,指回它的构造函数。如图:
在这里插入图片描述
这里有点绕了,任何对象都有俩属性,__proto__,constructor,那么构造函数Food 的__proto__是什么。要知道它是啥,先得知道Food 的constructor是啥,构造函数本身也是对象,它的constructor是js 的内置对象Function构造函数,用于创建函数的函数对象,而Function的constructor指向自己

var f1 = new Function('x','y', "return x*y")
var f2 = function(x,y){return x*y}

这俩定义的函数几乎是等价的。
而Function的prototype,和Function的__proto__指向同一个原型对象。

Function.__proto__ === Function.prototype
// true

所以前面Food 的 __proto__也就等于 Function.prototype,也就是说Function.prototype是所有构造函数的原型。
那Function.prototype的 __proto__又是啥?
就是Object.prototype,而Object.prototype 的__proto__是null,终于到了终点,所以看起来一切都是从Object.prototype起源而来的。
Object.prototype的constructor指回Object,Object的constructor属性,自然就是Function,因为本身Object就是一个构造函数。
这里非常绕,但是把图画出来,就清楚了。

Function.prototype.__proto__ === Object.prototype
// true
constructor

还有一点需要注意的是,前面说到对象都有constructor属性,这个属性只要原型对象才有,指向原型对象的构造函数,实例本身没有constructor,其实是从对象的__proto__上继承而来。
即前面例子中,apple本身没有constructor属性,它从apple.__proto__上继承而来,即Food.prototype的constructor,即Food 自己。

总结

1.__proto__constructor属性是对象所独有的;
2.prototype属性是函数所独有的,因为函数也是一种对象,所以函数也拥有__proto__constructor属性。
3.__proto__属性的作用:当访问一个对象的属性时,如果该对象内部不存在这个属性,那么就会去它的__proto__属性所指向的那个对象(父对象)逐级往上找,直到找到Object.prototype.__proto__为null。通过__proto__属性将对象连接起来的这条链路即我们所谓的原型链
4.prototype属性的作用就是让该函数所实例化的对象们都可以找到公用的属性和方法,即apple.__proto__ === Food.prototype
5.constructor属性的含义就是指向该对象的构造函数,所有函数(此时看成对象了)最终的构造函数都指向Function。

参考文章:
https://blog.csdn.net/cc18868876837/article/details/81211729

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值