前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JavaScript——对象的原型

JavaScript——对象的原型

作者头像
Html5知典
发布2019-11-26 17:04:07
5660
发布2019-11-26 17:04:07
举报
文章被收录于专栏:Html5知典Html5知典

如机制和原理(对象基于原型)里所记述的那样,JavaScript是一个基于原型的面向对象的语言。本文着重于对原型的实现机制进行剖析和说明。

原型链的实现

JavaScript里所有的对象都有一个名为__proto__的属性,这个属性里面存放的就是对象所参照的原型对象的引用。

__proto__中的对象连在一起就构成了一个原型链,链的顶端就是Object.prototype对象,Object.prototype的__proto__属性值则是null

__proto__属性被包含在ECMAScript6之中,但之前基本上已被大多数浏览器厂商所支持。 通过Object.getPrototypeOf()可以获得指定对象的原型对象,这也是被推荐的使用方法。但__proto__属性是可读写的,这也意味着程序可以通过该属性动态的改变对象的原型对象。

原型的自动设置

当通过构造函数创建新对象时,JavaScript会自动将构造函数的prototype属性值设置到新对象的__proto__属性里。

作为示例,我们首先声明一个类(构造函数)Person

代码语言:javascript
复制
var Person = function(name) {
  this.name = name;
};
Person.prototype.getName = function() {
  return this.name;
};

然后我们创建一个Person的对象。

代码语言:javascript
复制
var tom = new Person("Tom");

上面创建Person对象的代码与下面的程序逻辑是等价的,事实上JavaScript也是这样执行的。

代码语言:javascript
复制
var tom = new Object();
tom.__proto__ = Person.prototype;
tom = Person.call(tom,"Tom");

属性的继承

当访问对象的属性时,JavaScript会通过遍历原型链进行查找,直到找到给定名称的属性为止。

如果查找进行到原型链的顶部-Object.prototype仍然没有找到指定名称的属性时,就会返回undefined。

由于这个查值过程是一个遍历过程,所以当属性的值越靠近顶层,查找性能就会越低,而当值靠近底层时,查找性能就会高很多,所以在编写复杂的应用时,一定要提防原型链过长而带来的性能问题。

而设值对象属性则不会遍历原型链,而是直接将属性添加到该对象自身,并不影响到原型链中的对象。

代码语言:javascript
复制
//接上面的例子

//下面这条语句直接取的是tom对象的属性值
console.log(tom.name); // 输出:Tom

//下面这条语句执行的是tom.__proto__(引用的是Person.prototype)的getName方法
tom.getName(); // 输出:Tom
本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2019-07-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Html5知典 微信公众号,前往查看

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 原型链的实现
  • 原型的自动设置
  • 属性的继承
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档