专栏首页前端迷JavaScript继承背后的场景-prototype,__proto__, [[prototype]]

JavaScript继承背后的场景-prototype,__proto__, [[prototype]]

继承是面向对象编程语言的一大核心功能点,虽然JavaScript并不是一门真正意义上的面向对象的编程语言,但也通过某种手段实现了继承这一功能,最常见的JavaScript继承是通过原型链去实现,这就涉及到了prototype、__proto__、[[prototype]]三者之间的关系了。

如上图所示,理解JavaScript中的继承的关键是要理解母鸡如何产蛋的过程。

[[prototype]]、__proto__、prototype三者之间的联系

每个对象都可以有另一个对象作为其原型。然后前一个对象继承了它的所有原型属性。对象通过内部属性[[Prototype]]指定其原型。由[[Prototype]]属性连接的对象链称为原型链。

为了理解基于原型的继承是怎么样的,我们先来看一个例子。

var proto = {
    describe: function () {
        return 'name: '+this.name;
    }
};
var obj = {
    [[Prototype]]: proto,
    name: 'obj'
};

> obj.describe
[Function]

> obj.describe()
'name: obj'

__proto__是Object.prototype对象的访问者属性。它暴露了访问它的对象的内部原型([[Prototype]])

function Foo(name) {
    this.name = name
    this.whoAmI = function () {
        return this.name
    }
}
var b = new Foo('b')
var a = new Foo('a')
b.say = function () {
    console.log(`Hi from ${this.whoAmI()}`)
}
console.log(a.__proto__ === Foo.prototype); // true
console.log(a.__proto__ === b.__proto__); // true

JavaScript引擎在对象b上添加了一个say方法,而不是在Foo原型对象(Foo.prototype)上

正如上图中看到的那样,a.__ proto__暴露了指向Foo.prototype对象的[[Prototype]]。同样,b.__ proto__也指向与a.__ proto__相同的对象。

通过构造函数来创建对象

除了通过指定模式创建对象之外,构造函数还可以执行另一个有用的操作 - 它会自动为新创建的对象设置原型对象。此原型对象存储在构造函数的原型对象属性中。

我们可以使用构造函数用b对象重写前面的例子。因此,对象a(原型)Foo.prototype的作用:

创建拥有原型对象属性x及方法calculate()的一个Foo对象。

function Foo(y) {
  this.y = y;
}
Foo.prototype.x = 10;
Foo.prototype.calculate = function (z) {
  return this.x + this.y + z;
};

使用对象Foo创建一个b对象实例。

var b = new Foo(20);
b.calculate(30); // 60
console.log(
  b.__proto__ === Foo.prototype, // true
  b.__proto__.calculate === Foo.prototype.calculate // true
  b.__proto__.calculate === b.calculate, // true
  Foo === b.constructor, // true
  Foo === Foo.prototype.constructor, // true
);

正如上面打印出来的信息,对象b从Foo()继承了方法calculate。“Foo.prototype”自动创建一个特殊属性“constructor”,它是对构造函数本身的引用。实例b可以通过代理来找到它,并用来检测其构造函数。

JavaScript经典继承图

这也是通过构造函数来创建对象,但是在这一系列的对象和实例之间我们的焦点是放在原型链上。原型对象其实也是普通的对象,也有属于它们自己的属性。如果原型具有对其原型的非空引用,依此类推,则称为原型链。

以下是JavaScript经典继承的图表。构造函数Foo只是虚构类的类名。foo对象是Foo的一个实例。

现在我们可以从图中看到为什么当我们从Dog类继承Animal 时,我们会这样做:

function Dog() {} // the usual constructor function
Dog.prototype = new Animal();
Dog.prototype.constructor = Dog;

当通过new操作符创建一个实例的时候,都发生了些什么:

注意Foo.prototype的原型(prototype)并不是来自原型链。Foo.prototype指向原型链中的某些位置,但Foo的这个原型属性不是来自原型链。构成原型链的是proto指向链,以及proto指向的对象。比如从foo .__ proto__,链接到到foo .__ proto .proto__,等等,直到达到null(也就是咱们常说的原型链的顶部是null)。

proto and prototype的关系:

JavaScript的经典继承就像这样:我是一个构造函数,我只是一个函数,我持有一个原型引用,每当调用foo = new Foo()时,我会让foo .__ proto__指向我的原型对象。所以,Foo.prototype 与 obj.__proto__是两个不同的概念。Foo.prototype指示,当创建Foo的对象时,这是新对象的原型链应该指向的点 - 也就是说,foo .__ proto__应该指向Foo.prototype指向的位置。

如果需要添加一个方法怎么办?

如果woofie这个对象没有movie方法,它将通过原型链去寻找,就像任何原型继承场景一样,首先这个对象通过woofie.__proto__,它与Dog.prototype所指的对象相同。如果move方法不是这个对象的一个属性(意味着Dog这个类并没有move这个方法),则在原型链中上升一级(去原型链上寻找),即woofie .__ proto . proto__,或者与Animal.prototype相同。

Animal.prototype.move = function() { ... };

*尽管foo.constructor === Foo,但构造函数的属性并不是foo对象自己的属性,它实际上是通过寻找原型链获得的,即foo .__ proto__所指向的地方。对Function.constructor也是一样。

当我们看到Constructor.prototype,foo .__ proto__,Foo.prototype.constructor时,该图可能很复杂,有时会令人困惑。

要验证图表,请注意,即使foo.constructor将显示一个值,foo.constructor也不是foo自己的属性,而是通过跟踪原型链获得的,因为可以沟通过foo.hasOwnProperty(“constructor”)来进行验证。 *

总结

  1. [[Prototype]]:对象通过其内部属性指定的原型对象
  2. proto :创建的对象实例所拥有的内部属性,在语言层面可以直接访问[[Prototype]]
  3. prototype:prototype是在使用new操作符创建对象时用于构建__proto__的对象,在实例化的对象上(或其他对象)不可使用,仅在构造函数上使用,因为它是从Funtion和Object上复制的。而__proto__随处可用
    ( new Foo ).__proto__ === Foo.prototype  //true
    ( new Foo ).prototype === undefined      //true

本文分享自微信公众号 - 前端迷(love_frontend)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress配置腾讯云CDN并实现发布/更新文章、提交/审核评论自动清理腾讯云CDN缓存

    博客在CDN是加了又下,下了又加。昨天访问张戈博客学习的时候,感叹大牛的站优化的就是好!惊叹速度快之余发现张戈博客的服务器在国外,而且配置也不是很高。(优化出奇...

    AlexTao
  • Vue状态管理vuex

    在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex....

    羊羽shine
  • Spring@Enable模块装配

    首先要说一下版本相关,Spring Framework3.1开始引入了@Enable注解。

    用户4143945
  • 我敢打赌绝大多数程序员没有这么深入研究过 System.out.println()!

    System.out.println 是一个 Java 语句,一般情况下是将传递的参数,打印到控制台。

    良月柒
  • 这次又坑多少人? 深度解析 Dash 钱包"关键"漏洞!

    4月13日,Electrum 钱包遭受黑客攻击,黑客利用其钱包漏洞,窃取用户密钥,导致资金被盗。

    区块链大本营
  • 深/浅拷贝

    在MyBaby类中有一个私有变量list,类似为List,然后咱们使用setValue对其进行设值,使用getValue进行取值。接下来咱们来看看他是如何拷贝的...

    用户4143945
  • ionic4底部Tab居中圆形凸出按钮

    IT晴天
  • 【一起来烧脑】读懂JQuery知识体系

    在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库...

    达达前端
  • 讲真,别再使用JWT了!

    根据维基百科中定义,JSON WEB Token(JWT)是一种基于JSON的、用于在网络上声明某种主张的令牌(token)。

    物流IT圈
  • 技术成长是自学还是听课呢

    技术成长是需要自学,还是听课呢?我想很多成长中的软件技术人员都会有这样的困惑。软件技术变化太快,我们家族多数是在电厂工作的,我的哥哥姐姐学习的电厂的知识,基本上...

    用户5829239

扫码关注云+社区

领取腾讯云代金券