一次性搞懂js中的原型与原型链

Freeman 发布于2019-08-23 13:46 / 402人阅读

摘要：每个原型都有一个属性指向关联的构造函数由于实例对象可以继承原型对象的属性，所以实例对象也拥有属性，同样指向原型对象对应的构造函数。

构造函数：function Foo ( ) { };

实例对象：let f1=new Foo;

谈到继承时，JavaScript 只有一种结构：对象

每个函数都有 prototype 属性，除了 Function.prototype.bind()，该属性指向原型。

prototype

每一个JavaScript对象(null除外)在创建的时候就会与之关联另一个对象，这个对象就是我们所说的原型，每一个对象都会从原型"继承"属性。

函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，也就是这个例子中的 f1 的原型。prototype带有__proto__和constructor

proto

每一个JavaScript对象(除了 null )都具有的一个属性，叫__proto__，这个属性会指向了创建该对象的构造函数的原型。

console.log(f1._proto_ === Foo.prototype) // true

constructor

每个原型都有一个 constructor 属性指向关联的构造函数

由于实例对象可以继承原型对象的属性，所以实例对象也拥有constructor属性，同样指向原型对象对应的构造函数。

console.log(Foo.prototype.constructor === Foo);//true
console.log(f1.constructor === Foo);//true
console.log(f1.hasOwnProperty("constructor"));//false

原型链

JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做__proto__的内置属性，用于指向创建它的函数对象的原型对象prototype。以上面的例子为例：

console.log(fo.__proto__  === Foo.prototype)  //true

同样Foo.prototype也有proto属性

console.log(Foo.prototype.__proto__ === Object.prototype)  //true

Object.prototype对象也有proto属性，但它比较特殊，为null

console.log(Object.prototype.__proto__ === null)

我们把这个有proto串起来的直到Object.prototype.proto为null的链叫做原型链。原型链的形成是真正是靠proto 而非prototype

总结

每个构造函数都有一个原型对象

Foo.prototype

原型对象都包含一个指向构造函数的指针

Foo.prototype.constructor === Foo

实例都包含一个指向原型对象的内部指针

fo.__proto__  === Foo.prototype

更多文章请前往语雀

GPU云服务器云服务器 js原型链的继承原型原型链原型链原型链继承

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99520.html

一张图让自己搞懂(mēng)原型&原型链

摘要：要搞清这三种关系指向之间的关系拗口，其实也就是要搞懂，构造函数由构造函数操作创造出的实例对象和构造函数的原型对象之间的关系。写在前面这篇博客来源于，有天mentor突然传给我了这张祖传的图片，并且发誓一定要给我讲清楚，然鹅在他的一番激情讲解之后，他自己也被绕懵了...于是后来我决定整理一下似乎还有点清晰的思路，记录一下我对这张图的理解。作为一个小白，对于js中这些比较复杂的概念的理...

CntChen 2019-08-22 18:15 评论0 收藏0
彻底搞懂JavaScript中的继承

摘要：这正是我们想要的太棒了毫不意外的，这种继承的方式被称为构造函数继承，在中是一种关键的实现的继承方法，相信你已经很好的掌握了。你应该知道，JavaScript是一门基于原型链的语言，而我们今天的主题 -- 继承就和原型链这一概念息息相关。甚至可以说，所谓的原型链就是一条继承链。有些困惑了吗？接着看下去吧。一、构造函数，原型属性与实例对象要搞清楚如何在JavaScript中实现继承，...

_ivan 2019-08-21 17:48 评论0 收藏0
搞懂 Javascript中this 指向及继承原理

摘要：共享原型链现在我们还有另一个对象如图那么和其实是同一东西，也就是。改进通过第一节可以知道，我们可以通过原型链来解决重复创建的问题我们先创建一个士兵原型，然后让士兵的指向士兵原型。所以这个是原型链继承的缺点，原因是和指向同一个地址即父类的。在理解继承之前，需要知道 js 的三个东西：什么是 JS 原型链 this 的值到底是什么 JS 的new 到底是干什么的想阅读更多优质文章...

why_rookie 2019-08-23 12:10 评论0 收藏0
关于JS的原型链的理解。

摘要：的原型链，需要深刻的研究才能搞懂。对象都是通过函数即构造函数创建的。即这里的成为隐式原型。而构造函数的属性指向自身。这个对象的构造函数的是一个对象。走到原型链的终结。 - JS是一个非常有魅力的语言也是一个比较烦人的语言，主要就是因为他的特殊性灵活性。 JS的原型链，需要深刻的研究才能搞懂。不要纠结细节吧。实在不行就按这个死背住，慢慢就理解了。总之吧就是一句话万物皆对象。结合这个图示...

vvpvvp 2019-08-26 13:41 评论0 收藏0