__proto__ 和 prototype ➡️ 原型链继承

参考文章:


写在前面的自己的理解:

  • 每个函数都有自己的prototype, 是用来把函数引入原型链的小弟角色
  • 所有函数的__proto__都是Function. prototype

两张原理图是一样的:

Prototype chain 1
Prototype chain 2

有人说:这张图指10块钱,来把这10块钱赚了吧。


__proto__

  • 对象__proto__属性的值就是它所对应的原型对象, 表示继承关系(所谓的原型链)。

    eg: 如图中的继承关系(原型链):
    一条是:
    (实例对象)foo--->Foo. prototype--->Object. prototype--->null
    另一条是:
    (函数)Foo()--->Function. prototype--->Object. prototype--->null


prototype

  • 只有函数才有prototype属性。函数在JS中真的很特殊,是所谓的一等公民

  • 当你创建函数时,JS会为这个函数自动添加prototype属性, 值是一个有constructor 属性的对象,不是空对象。而一旦你把这个函数当作构造函数(constructor)调用(即通过new关键字调用),那么JS就会帮你创建该构造函数的实例,实例继承构造函数prototype的所有属性和方法(实例通过设置自己的__proto__指向承构造函数的prototype来实现这种继承)。


很显然,__proto__是很好理解的,prototype就有点绕了。

❓为什么不是(函数)Foo 而是 创造了一个 Foo. prototype加入(实例对象foo) 的原型链。

我的狭隘理解:函数觉得我堂堂一等公民,才不要跟你们普通对象一起玩,我就派我的属下 prototype代替我跟你们一起玩好了。


Js创建对象的两种方式:

1、{……}

let xiaoming = {
  name: 'Robot',
  height: 1.2,
  run: function () {
    console.log(this.name + ' is running...');
  }
};

2、new foo()

let func = function () {
  this.name = '属性';
};
let xiaoli = new func();

  • JS中万物皆对象, 函数也是对象,所以既有prototype属性又有__proto__属性。

  • JavaScript 没有类(class,ES6引进了这个关键字,但更多是语法糖)的概念。JS通过函数来模拟类。

  • Function、Objcet、Array、…… 都是函数。

  • JS是单继承的,Object.prototype是原型链的顶端。

  • Function.prototype 和 Function.proto为同一对象。

    4ae9c5e6-c2d4-11e5-93c1-b7b0dc6d0975.png

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容