JavaScript之原型与原型链

前言

❝

JavaScript常被描述为一种「基于原型的语言」——每个对象都拥有一个「原型对象」，对象以其原型为模板、从原型继承属性和放法。原型对象也可能拥有原型，并从中继承属性和方法，一层一层以此类推。这种关系常被称为「原型链」，它解释了为何一个对象会拥有定义在其他对象中的属性和方法。

准确的说，这些属性和方法定义在Object的构造函数的prototype属性上，而非对象实例本身。

❞

四句话道破原型与原型链：

  • 每个函数（类）天生自带一个属性prototype，属性值是一个对象，里面存储了当前类供实例使用的属性和方法 「（显示原型）」
  • 在浏览器默认给原型开辟的堆内存中有一个constructor属性：存储的是当前类本身（⚠️注意：自己开辟的堆内存中默认没有constructor属性，需要自己手动添加）「（构造函数）」
  • 每个对象都有一个__proto__属性，这个属性指向当前实例所属类的原型（不确定所属类，都指向Object.prototype）「（隐式原型）」
  • 当你试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么它会去它的隐式原型__proto__（也就是它的构造函数的显示原型prototype）中查找。「（原型链）」

构造函数，原型与实例的关系：

❝

每个构造函数（constructor）都有一个原型对象（prototype），原型对象（prototype）都包含一个指向构造函数（constructor）的指针，而实例（instance）都包含一个指向原型对象（__proto__)的内部指针

❞

prototype（显式原型）

每个函数都有一个prototype属性

// 构造函数（类）
function Person(name){
    this.name = name
}
// new了一个实例 （对象）
var person = new Person('南玖')
console.log(person) //Person { name: '南玖' }
console.log(Person.prototype)  //构造函数（类）的原型 ----->对象
Person.prototype.age = 18  // 构造函数原型
console.log(person.age)  // 18

上面我们把这个函数Person的原型打印出来了，它指向的是一个对象，并且这个对象正是调用该构造函数而创建的实例的原型

prototype1.png

上面这张图表示的是构造函数与实例原型之间的关系，所以我们知道了构造函数的prototype属性指向的是一个对象。

那实例与实例原型之间的关系又是怎样的呢？这里就要提到__proto__属性了

__proto__（隐式原型）

从上面四句话中我们可以知道这是每一个Javascript对象（除null)都具有的一个属性，这个属性会指向该对象的原型(也就是实例原型)

因为在JavaScript中没有类的概念，为了实现类似继承的方式，通过__proto__将对象和原型联系起来组成原型链，的以让对象访问到不属于自己的属性。

那么我们就能够证明实例与实例原型之间的关系

console.log(person.__proto__)  //实例（对象）的原型--->对象

console.log(person.__proto__ === Person.prototype)  //实例的原型与构造函数的原型相等
prototype2.png

从上图我们可以看出实例对象与构造函数都可以指向原型，那么原型能不能指向构造函数或者是实例呢？

constructor（构造函数）

原型是没有属性指向实例的，因为一个构造函数可以创建多个实例对象;

从前面的四句话中我们知道「在浏览器默认给原型开辟的堆内存中有一个constructor属性」，所以原型也是可以指向构造函数的，这个属性就是「constructor」

于是我们可以证明一下观点：

console.log(Person.prototype.constructor) //实例的显式原型的构造函数ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor)  //实例的隐式原型的构造函数 ƒ Person(name){this.name = name}
console.log(person.__proto__.constructor === Person.prototype.constructor)//true 实例原型的构造函数与类的构造函数相等
console.log(Person === Person.prototype.constructor)  //true
prototype3.png

实例对象的__proto__是如何产生的？

我们知道当我们使用new 操作符时，生成的实例对象就拥有了__proto__属性

function Foo() {}
// 这个函数时Function的实例对象
// function是一个语法糖
// 内部其实调用了new Function()

所以可以说，在new的过程中，新对象被添加了__proto__属性并且链接到了构造函数的原型上。

new的原理

说简单点可以分为以下四步：

  • 新建一个空对象
  • 链接原型
  • 绑定this，执行构造函数
  • 返回新对象
function myNew() {
// 1.新建一个空对象
let obj = {}
// 2.获得构造函数
let con = arguments.__proto__.constructor
// 3.链接原型
obj.__proto__ = con.prototype
// 4.绑定this，执行构造函数
let res = con.apply(obj, arguments)
// 5.返回新对象
return typeof res === 'object' ? res : obj
}

原型链

说完了原型，我们再来看看什么是原型链？先来看一张图：

prototype4.png

这张图中，由__proto__串起来的链式关系，我们就称它为原型链

原型链的作用

原型链决定了JavaScript中继承的实现方式，当我们访问一个属性时，它的查找机制如下：

  • 访问对象实例属性，有的话直接返回，没有则通过__proto__去它的原型对象上查找
  • 原型对象上能找到的话则返回，找不到继续通过原型对象的__proto__查找
  • 一直往下找，直到找到Object.prototype,如果能找到则返回，找不到就返回undefined，不会再往下找了，因为Object.prototype.__proto__是null，说明了Object是所有对象的原型链顶层了。

❝

从图中我们可以发现，所有对象都可以通过原型链最终找到 Object.prototype ，虽然 Object.prototype 也是一个对象，但是这个对象却不是 Object 创造的，而是引擎自己创建了 Object.prototype 。所以可以这样说，所有实例都是对象，但是对象不一定都是实例。

❞

构造函数的__proto__是什么呢？

由上面的原型链的解释，我们应该能够理解构造函数的__proto__的，在JavaScript中所有东西都是对象，那么构造函数肯定也是对象，是对象就有__proto__。

function Person(){}
console.log(Person.__proto__)
console.log(Function.prototype)
console.log(Person.__proto__===Function.prototype) // true

「这也说明了所有函数都是Function的实例」

那这么理解的话，Function.__proto__岂不是等于Function.prototype。。。。我们不妨来打印一下看看

Function.__proto__ === Function.prototype // true

打印出来确实是这样的。难道 Function.prototype 也是通过 new Function() 产生的吗？

❝

答案是否定的，这个函数也是引擎自己创建的。首先引擎创建了 Object.prototype ，然后创建了 Function.prototype ，并且通过 __proto__ 将两者联系了起来。这里也很好的解释了上面的一个问题，为什么 let fun = Function.prototype.bind() 没有 prototype 属性。因为 Function.prototype 是引擎创建出来的对象，引擎认为不需要给这个对象添加 prototype 属性。

❞

总结

  • Object 是所有对象的爸爸，所有对象都可以通过 __proto__ 找到它
  • Function 是所有函数的爸爸，所有函数都可以通过 __proto__ 找到它
  • Function.prototype 和 Object.prototype 是两个特殊的对象，他们由引擎来创建
  • 除了以上两个特殊对象，其他对象都是通过构造器 new 出来的
  • 函数的 prototype 是一个对象，也就是原型
  • 对象的 __proto__ 指向原型， __proto__ 将对象和原型连接起来组成了原型链
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,509评论 6赞 504
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,806评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,875评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,441评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,488评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,365评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,190评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,062评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,500评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,559评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,167评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2赞 354