likes
comments
collection
share

JS深挖:prototype、__proto__ 和 Object.getPrototypeOf的区

作者站长头像
站长
· 阅读数 30
目录:
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的介绍中也可以看到,该方法随时可能被废弃,所以尽量不要使用。

JS深挖:prototype、__proto__ 和 Object.getPrototypeOf的区


4、getPrototypeOf()

本质:是ES5 提供的用于获取对象原型的标准方法。

MDN中对其定义为:JS深挖:prototype、__proto__ 和 Object.getPrototypeOf的区

关键点是指定对象,如果不是对象,则会报错。

另外,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__获取对象实例的原型;
转载自:https://segmentfault.com/a/1190000041366352
评论
请登录