前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >理解prototype、getPrototypeOf和_proto_之间的不同

理解prototype、getPrototypeOf和_proto_之间的不同

作者头像
Originalee
发布2018-12-14 15:14:29
7510
发布2018-12-14 15:14:29
举报
文章被收录于专栏:编程之旅编程之旅

在学习JavaScript的过程中,原型是如何也绕不过去的一个知识点。虽然在现在ES6已经非常普及的现在,许多js的程序员都已经不再用原型的知识点来编写代码了,但是充分的理解原型也是很有必要的,尤其是在阅读他人优秀的js代码时,理解原型能帮助我们更好的理解早期代码。而原型包括三个访问器,这三个访问器有时功能重叠,所以准确的理解并区分他们还是很有必要的。

这三个访问器就是prototypegetPrototypeOf__proto__,从名字上可见这三个访问器都是对prototype这个单词做了一些变化,生成这样的属性方法名。为了测试这三个方法的输出,我们先来模拟创建一个存储用户数据User的类。

代码语言:javascript
复制
function User(name, passwordHash) {
  this.name = name;
  this.passwordHash = passwordHash;
}

User.prototype.toString = function() {
  return '[User ' + this.name + ']';
}

User.prototype.checkPassword = function(password) {
  return hash(password) === this.passwordHash;
}

这里我们创建的这个User类的构造函数,接收两个参数,一个是用户名name,一个是密码的hash值,并且类中有两个方法toString以及checkPassword用来输出用户信息和检查密码。

如果这个时候我们打印这三个原型方法的日志会得到一样的结果

代码语言:javascript
复制
var u = new User('Lix', '123456');

console.log(Object.getPrototypeOf(u)); // User { toString: [Function], checkPassword: [Function] }

console.log(u.__proto__); // User { toString: [Function], checkPassword: [Function] }

console.log(User.prototype); // User { toString: [Function], checkPassword: [Function] }

既然他们的输出都一样,那么他们是否作用一样呢,我们可以来比较测试一下。

代码语言:javascript
复制
Object.getPrototypeOf(u) === User.prototype; // true
代码语言:javascript
复制
u.__proto__ === User.prototype; // true

既然这两个方法都跟我们User对象的原型相等,那么这三个属性的区别究竟是什么呢?别急,接下来就把结论告诉大家。

  • C.prototype用于建立由 new C() 创建的对象的原型。
  • Object.getPrototype(obj)是ES5中用来获取obj对象的原型对象的标准方法。
  • obj.__proto__是获取obj对象的原型对象的非标准方法。

所以一般我们是不会直接访问C.prototype去获取原型对象的,在ES5的环境中,我们使用Object.getPrototype(obj)来获取原型对象,而在不支持ES5的环境中,我们可以考虑用__proto__这样的非标准方法来当做权宜之计,希望各位不明白的同学能牢记这些区别。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.21 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档