JS prototype 与 __proto__

一、各种概念

1、构造函数

通过 new 操作符来创建对象时初始化对象的函数叫做构造函数

2、实例(实例对象)

用 new 调用构造函数创建出来的对象叫做实例，或是实例对象

3、prototype

它是函数(包括构造函数)独有的，每个函数都有一个 prototype 属性，它是一个指针，指向一个对象（原型对象），这个对象包含了所有实例对象共享的属性和方法

4、__proto__ 和 [[Prototype]]，名字有所差异，功能是一样的

每个对象（包括实例对象、函数）都有的属性，它指向了该实例对象对应的原型对象
读作 “dunder proto”，“double underscore proto” 的缩写，实际上，该属性在 ES 标准定义中的名字应该是[[Prototype]]
__proto__ 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，不建议在项目中直接使用该属性，推荐使用 Object.getPrototypeOf() 方法来获取实例对象的原型
其实我们平时调用的字符串方法、数组方法、对象方法、函数方法等都是靠 __proto__ 继承而来的

5、constructor

也是每个对象（包括实例对象、函数）都有的属性，含义就是指向该对象的构造函数

二、prototype 与 __proto__ 的联系

prototype 与 __proto__ 都指向原型对象，任意一个函数(包括构造函数)都有一个 prototype 属性，指向该函数的原型对象；任意一个构造函数的实例化对象，都有一个 __proto__ 属性，它指向构造函数的原型对象

三、prototype 与 __proto__ 的区别

• 1、prototype 是函数独有的，而 __proto__ 是每个对象都有的（包括实例对象、函数）
• 2、prototype 的作用是保存所有实例公共的属性和方法；__proto__ 的作用是当访问一个对象的属性时，如果内部没有该属性，就会在它的 __proto__ 属性所指的那个父对象去找，父对象没有，再去父对象的父对象里找…，直到 null，即原型链
• 3、s.proto === Student.prototype
  prototype 还有一个 constractor 属性，指向该对象的构造函数本身

四、代码示例

function Student(newId, newName){
    this.id = newId;
    this.name = newName; // 这俩是每个实例对象特有的
    // this.prototype = "haha"; // 这相当于给 this 添加了一个名叫 prototype 的属性，不能这么用
    // this.prototype.eat = function(){
    //    console.log("eat");
    // } // 不能写在里面 this 是实例对象，实例对象没有 prototype 的方法
}
Student.prototype.eat = function(){
    console.log("eat");
}
Student.prototype.teacher = "dahuang"; // 为原型对象添加新共有属性
let s = new Student(1, "laowang");

s.teacher = "xiaobai"; // 为实例对象添加了一个实例属性，覆盖了实例对象原有的原型对象
delete s.teacher;
console.log(s.teacher); // 删除后，实例对象的原型对象属性恢复
    
console.log(s.__proto__ === Student.prototype); // true
console.log(Student.prototype.constructor === Student); // true

prototype 是函数才有的属性，切记，切记

__proto__ 是每个对象(包括函数)都有的属性

原文地址：https://blog.csdn.net/high32/article/details/111409049

更详细的讲解请参考：https://blog.csdn.net/cc18868876837/article/details/81211729