乐趣区

关于javascript:JS深挖prototypeproto-和-ObjectgetPrototypeOf的区别

jiezi 
目录：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

显然是的，那么咱们来剖析这三种办法实现获取原型的实质是什么，以及他们的区别。

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);              // true

Object.prototype === Object.getPrototypeOf({} );               // true

总结：

个别不应用 prototype 去获取原型对象，除非要扭转构造函数的原型对象；获取对象实例的原型对象，首选用 Object.getPrototypeOf();

在 E5 不反对的状况下，再思考用__proto__获取对象实例的原型；
退出移动版