javascript原型与原型链到底是什么？

一看到javascript中的prototype、__proto__、constructor这些单词是不是有点懵呢？网上有很多高大上的原型链的讲解图，例如下面的这张：

首先把他列出来不是说他不好，只是作为一个对比，我觉得用实例的方式去剖析更直观一些，方便我们快速的理解什么是原型链。接下来我们先看看下面的案例分析。

案例分析

以下是源码：

 // 构造函数PersonA    function PersonA() {        this.name = “名字1”    }    // 构造函数PersonA原型中添加一个方法    PersonA.prototype.say = () => {        console.log(1)    }    // 实例persona    let persona = new PersonA();    persona.eat = () => {        console.log(2)    }
    // 构造函数PersonB    function PersonB() {        this.name = “名字2”    }    // 构造函数PersonB继承了实例化对象persona，    // 同时继承了他的原型链对象中的所有方法和属性    PersonB.prototype = persona;
    let personb = new PersonB();    //由于PersonB继承了persona，所以personb拥有了    // persona以及他的原型PersonA.prototype中的方法    personb.say(); //1    personb.eat();//2

关于原型

网上看了很多的文章对于prototype、__proto__的描述也是各有千秋，我是这么去理解和记忆的，只是提供一下参考：prototype、__proto__都属于原型，prototype是构造函数的原型，__proto__是实例化对象以及构造函数prototype属性的原型。

（每一个函数对象都有一个prototype属性，该属性指向其prototype对象）
（每一个对象都有一个__protto__属性，该属性指向创建这个对象的构造函数的prototype对象）

关于原型链

上面的案例中通过__proto__原型串起来的蓝色线条的路径就是原型链。

作用

如果非要说说他的作用，我觉得最大的作用就是解决通过原型链实现了对象属性和方法的继承。

以上就是javascript原型与原型链到底是什么的全部内容，欢迎大家一起交流。(PS：图片是我PS改的，文字是我手码的，喜欢给点个赞呗)

案例更新：

JavaScript 使用基于原型链的继承。访问一个对象的属性时若该属性在对象上不存在，则会沿原型链向下搜寻每个原型对象。

每个构造器都拥有 prototype 属性，代表该构造器的原型对象，初始为一个 Object 实例。所有用此构造器 new 出的对象都可以访问该对象的属性。

• function Foo(bar) { this.bar = bar }
• Foo.prototype.baz = ‘test’
• let qux = new Foo(‘hello’)
• qux.bar // => 对象本身的属性：’hello’
• qux.baz // => 对象原型链上 Foo 的原型属性：’test’
• // qux 的原型链：(qux ->) Foo.prototype -> Object.prototype

如果一个构造器 A 的 prototype 属性是另一个构造器 B 的实例，那么 B 的原型链会被接到 A 上，此时我们就说 A 继承了 B，A 实例可以访问所有 B 原型链上的属性。