【JS基础】原型对象的那些事（二）

yanbingyun1990 发布于2019-08-21 16:23 / 3176人阅读

摘要：只是构造函数上的一个属性，它是一个指针，指向原型对象，并不表示就是原型对象。在上一个例子中，就是一个对象，这个对象可以说是原生构造函数的实例，所以也是一个对象，所以它也有属性，不过它的指向也就是原型链的顶端，再往上就没有了。

上一篇讲了
①原型对象是什么；
②__proto__、prototype、constructor的关系；
③原型对象的作用；
④原型对象带来的一些需要注意的问题；

没理解的可以再复习一下。
传送门：JS基础—原型对象的那些事（一）

今天讲一下原型链以及原型链的关系图。

原型链是什么

每个对象都有一个__proto__属性，指向对象的原型。

ps:准确的说，是每一个实例都有一个[[Prototype]]属性，指向原型对象。这是一个隐式属性，存在但是我们的脚本访问不到，不过浏览器厂商大部分都支持一个__proto__属性，用来显示指向原型，虽然能用，但__proto__不是ECMA中的规范。

原型的值可以是一个对象，也可以是null。如果它的值是一个对象，那么这个对象也一定有自己的原型。这样就形成了一条线性的链，我们称之为原型链。

当我们在对象上调用一个属性或者方法时，会先在这个对象上寻找，没有的话就去它的原型对象上找，原型对象上没有就去原型对象的原型对象上找，一直找到原型对象为null为止，没有的话就是undefined。

简而言之，对象寻找一个属性会沿着原型链向上寻找，直到原型链的顶端。

还是以上一篇的Person为例

function Person(name) {
    this.name = name
}
Person.prototype.sayName = function() {
    console.log(this.name)
}
var person = new Person("张三")

我们先来画一个简单的关于原型的关系图

以上是实例、构造函数和原型对象三者的关系图。

PS: prototype只是构造函数上的一个属性，它是一个指针，指向原型对象，并不表示Person.prototype就是原型对象。这里将Person.prototype认为是原型对象，是为了方便理解，需要注意哦。

看不懂的同学去复习上一篇的内容，看懂的我们继续。

注意点一

原型对象也是对象，是对象就有__proto__属性，指向它的原型对象。

在上一个例子中，Person.prototype就是一个对象，这个对象可以说是原生Object构造函数的实例，所以

Person.prototype.__proto__ === Object.prototype

Object.prototype也是一个对象，所以它也有__proto__属性，不过它的__proto__指向null,也就是原型链的顶端，再往上就没有了。

重新补充一下关系图

看懂的我们继续

注意点二

任何函数都可以说是原生Function构造函数的实例。

所以Person构造函数是Function构造函数的实例。

Person.__proto__ === Function.prototype

继续我完善我们的关系图

可能有人疑惑，Person不是函数吗，函数怎么也有__proto__，函数不是只有prototype吗？

因为函数本质也是对象啊，在JS的世界里，万物皆对象，所以函数有__proto__没毛病。

注意点三

Function.prototype也是对象，所以和Person.prototype一样，Function.prototype可以说是原生Object构造函数的实例，所以

Function.prototype.__proto__ === Object.prototype

补充我们的图（红色的线）

注意点四

Function和Object都是构造函数，根据第二点任何函数都可以说是原生Function构造函数的实例，那么

Function.__proto__ === Function.prototype

Object.__proto__ === Function.prototype

完善我们的图（蓝色的线），大功告成。

恩，就是这么神奇，Function是Function的实例。。。

以上就是原型链的关系图，将这个图弄懂，原型对象的知识基本就掌握了。

虽然在真实场景中，这些知识用到的没这么复杂，但是掌握了最基础的知识，将来出现问题时，就能更快的找到问题的原因。

对于新手而言，原型链和作用域链经常搞混，this和静态作用域不知道在场景中怎么使用，确实是很头疼的问题，但这也许就是js的魅力所在吧。有时间的话再写一下作用域的知识~

GPU云服务器云服务器云服务器那些事 js原型链的继承 js原型面试题 js原型属性有什么用

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

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

【JS基础】原型对象的那些事（一）

摘要：通过同一个构造函数实例化的多个实例对象具有同一个原型对象。所以当给原型对象赋值一个新对象时，切记将原型对象的指回原构造函数以上就是本次分享的内容，关于原型对象的其他知识，下一篇基础原型对象的那些事二会讲到。谈起js的基础，绕不过去的坎就是：原型链、作用域链、this（em...好吧，还有闭包），今天总结一下关于原型对象的一些知识，供自己和大家复习。概念理解什么是原型对象呢？有以下...

edgardeng 2019-08-20 18:56 评论0 收藏0
JavaScript面向对象那些事

摘要：委托上面的代码结合了构造函数和原型两种方式去创建对象，首先聊聊构造函数构造函数构造函数本质上还是函数，只不过为了区分将其首字母大写了而已。注意注释掉的代码是自动执行的，但这并不是构造函数独有的，每个函数在声明时都会自动生成。首先看看下面两个1+1=2的问题: 问题一：为什么改变length的值，数组的内容会变化？ var arr = [1]; arr.length = 3; aler...

王伟廷 2019-08-20 18:07 评论0 收藏0
继承的那些事

摘要：借用构造函数继承针对上面的继承方法的缺点，开发人员使用一种叫做借用构造函数的技术，也就是我们平时说的跟继承。继承是 OO 语言中一个最为津津乐道的概念，许多 OO 语言都支持两种继承方式：接口继承和实现继承。接口继承只继承方法签名，而实现继承则继承实际的方法。由于函数没有签名，在 ECMAScript 中无法实现接口继承。ECMAScript 只支持实现继承而且实现继承主要是依靠原型...

CoyPan 2019-08-22 18:15 评论0 收藏0
唠叨一下js对象与哈希表那些事

摘要：的扩展知识对于哈希表来说，最重要的莫过于生成哈希串的哈希算法和处理冲突的策略了。由于链表的查找需要遍历，如果我们将链表换成树或者哈希表结构，那么就能大幅提高冲突元素的查找效率。最近在整理数据结构和算法相关的知识，小茄专门在github上开了个repo https://github.com/qieguo2016...，后续内容也会更新到这里，欢迎围观加星星！ js对象 js中的对象是基...

Nosee 2019-08-22 10:46 评论0 收藏0
js面向对象浅析--继承那些事

摘要：有需要还可以修改指向谦龙寄生组合式继承思路是通过借用构造函数来继承属性，通过原型链的混合形式来继承方法改变执行环境实现继承有需要还可以修改指向谦龙谦龙拷贝继承该方法思路是将另外一个对象的属性和方法拷贝至另一个对象使用递归前言 js中实现继承的方式只支持实现继承，即继承实际的方法，而实现继承主要是依靠原型链来完成的。原型链式继承该方式实现的本质是重写原型对象，代之以一个新类型的实例...

molyzzx 2019-08-21 10:46 评论0 收藏0