彻底搞懂js里的proto和prototype到底有什么区别？

honhon 发布于2019-08-26 12:12 / 1076人阅读

摘要：即对象具有属性，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。重点隐式原型指向构造该对象的构造函数的原型。

1.在JS里，万物皆对象。方法（Function）是对象，方法的原型(Function.prototype)是对象。因此，它们都会具有对象共有的特点。即：对象具有属性proto，可称为隐式原型，一个对象的隐式原型指向构造该对象的构造函数的原型，这也保证了实例能够访问在构造函数原型中定义的属性和方法。
2.方法(Function)方法这个特殊的对象，除了和其他对象一样有上述proto属性之外，还有自己特有的属性——原型属性（prototype），这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。
1.1
首先声明一个对象和一个函数，console.log一下对象和函数的proto
var A = function () {};
var B ={};

console.log(A.__proto__)
console.log(B.__proto__)
控制台输出结果如下图所示：

刚才不是说函数是对象吗？它们的proto为啥不一样？往下看，别着急。
var A = function () {};
var B ={};
console.log(A.__proto__.__proto__)
console.log(B.__proto__)
console.log结果如下：

是不是一样了，，确实有点懵逼啊。。重点 隐式原型指向构造该对象的构造函数的原型。因为function是特殊的对象，A.proto就指向了构造该函数的一个函数（随意起个名字 C）,C的proto就指向了和B对象一样的proto。。我自己都懵逼了。
1.2一个对象和一个函数，console.log一下对象和函数的prototype
var A = function () {};
var B ={};
console.log(A.prototype)
console.log(B.prototype)
console.log结果如下：

对象并不具有prototype属性，只有函数才有prototype属性。这就证明声明2的说法是正确的。
总结：
js里所有的对象都有proto属性(对象，函数)，指向构造该对象的构造函数的原型。
只有函数function才具有prototype属性。这个属性是一个指针，指向一个对象，这个对象的用途就是包含所有实例共享的属性和方法（我们把这个对象叫做原型对象）。原型对象也有一个属性，叫做constructor，这个属性包含了一个指针，指回原构造函数。

专线服务服务器托管 __JS 服务器_云区别 js public_ js_存储插件

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

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

浅析JavaScript中原型及constructor、__proto__、prototype的关系

摘要：搞清了构造函数和原型的区别后，就可以继续了。指向构造函数的原型对象，存在于实例与构造函数的原型对象之间。要注意的是当我们使用下面这种将整个重写的情况时，会切断构造函数和原型之间的联系，也就是说不再指向了，而是指向。前言先说一说为什么要搞清楚JavaScript的原型，因为这就是JS的根。JavaScript虽然不是一门传统的面向对象语言，但它有自己的类和继承机制，最重要的就是它采用...

wenzi 2019-08-26 13:54 评论0 收藏0
如何继承Date对象？由一道题彻底弄懂JS继承。

摘要：前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。倘若用的是中文搜索。所以最终的实例对象仍然能进行正常的原型链回溯，回溯到原本的所有原型方法这样通过一个巧妙的欺骗技巧，就实现了完美的继承。前言见解有限，如有描述不当之处，请帮忙及时指出，如有错误，会及时修正。 20180201更新：修改用词描述，如组合寄生式改成寄生组合式，修改多处笔误（感谢@Yao Ding的...

sunnyxd 2019-08-22 13:50 评论0 收藏0
一张图让自己搞懂(mēng)原型&原型链

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

CntChen 2019-08-22 18:15 评论0 收藏0
搞懂 Javascript中this 指向及继承原理

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

why_rookie 2019-08-23 12:10 评论0 收藏0
关于javascript的原型和原型链，看我就够了（二）

摘要：原文链接关于的原型和原型链，看我就够了一参考链接闯关记之原型及原型链之原型与原型链一篇文章带你理解原型和原型链彻底理解原型链一的默认指向图解和的三角关系原型和原型链三张图搞懂的原型对象与原型链温故创建对象的三种方式通过对象直接量通过new创建对象通过Object.create() js中对象分为两种函数对象普通对象仔细观察如下代码 function Foo(na...

eccozhou 2019-08-23 12:44 评论0 收藏0