JS深挖（prototype、__proto__|JS深挖：prototype、__proto__ 和 Object.getPrototypeOf的区别） JS深挖：prototype、__proto__和Ob

目录： 1、问题描述 2、prototype 3、__proto__ 4、getPrototypeOf()

1、问题描述
写代码的时候遇到如下的问题：

function User() { this.name = 'xw' this.age = 10} User.prototype.getName = () => { console.log(this.name); }let u = new User()console.log(Object.getPrototypeOf(u)); console.log(User.prototype); console.log(u.__proto__); //{ getName: [Function (anonymous)] } //{ getName: [Function (anonymous)] } //{ getName: [Function (anonymous)] }

我用构造函数User创造了实例u，接着我可以通过 Object.getPrototypeOf、prototype、__proto__三种方法获取构造函数的原型，那么这三种方法本质上有何区别呢？
首先测试下三种方式获得的是否是同一个原型对象：

console.log(Object.getPrototypeOf(u) === User.prototype); console.log(Object.getPrototypeOf(u) === u.__proto__); console.log(u.__proto__ === User.prototype); // true // true // true

【JS深挖（prototype、__proto__|JS深挖：prototype、__proto__ 和 Object.getPrototypeOf的区别）】显然是的，那么我们来分析这三种方法实现获取原型的本质是什么，以及他们的区别。
2、关于prototype
本质：每个构造函数默认会创建一个prototype对象，用于存储对象实例共享的变量和方法。
所以可以理解为User.prototype就是构造函数的原型，它用于让构造函数找到自己的原型，同样也可通过prototype手动更改构造函数的原型。
3、__proto__
本质：是用户获取对象实例原型的非标准方法。
可以抓住核心，所谓的非标准，就是不被Web标准所认可的方法，早晚会被替代，所以不提倡使用。
从MDN的介绍中也可以看到，该方法随时可能被废弃，所以尽量不要使用。

文章图片

4、getPrototypeOf()
本质：是ES5 提供的用于获取对象原型的标准方法。
MDN中对其定义为：

文章图片

关键点是指定对象，如果不是对象，则会报错。
另外，getPrototypeOf() 和 prototype 也存在区别：

// JavaScript中的 Object 是构造函数（创建对象的包装器）。 // 一般用法是： var obj = new Object(); // 所以： Object.getPrototypeOf( Object ); // ? () { [native code] } Object.getPrototypeOf( Function ); // ? () { [native code] }Object.getPrototypeOf( Object ) === Function.prototype; // true// Object.getPrototypeOf( Object )是把Object这一构造函数看作对象， // 返回的当然是函数对象的原型，也就是 Function.prototype。// 正确的方法是，Object.prototype是构造出来的对象的原型。 var obj = new Object(); Object.prototype === Object.getPrototypeOf( obj ); // trueObject.prototype === Object.getPrototypeOf( {} ); // true

总结：