JavaScript 原型和原型链

JavaScript 中除了基础类型外的数据类型,都是对象(引用类型)。但是由于其没有 类(class,ES6 引入了 class,但其只是语法糖)的概念,如何将所有对象联系起来就成立一个问题,于是就有了原型和原型链的概念。


每个实例对象( object )都有一个私有属性(称之为 __proto__ )指向它的构造函数的原型对象(prototype )。该原型对象也有一个自己的原型对象( __proto__ ) ,层层向上直到一个对象的原型对象为 null。根据定义,null 没有原型,并作为这个原型链中的最后一个环节

上面是 MDN里有关原型链知识 的摘录,什么意思?让我们来解释一下

事实上 JavaScript 所有数据都可以以对象的形式表现:由于函数是对象,我们可以用构造函数的方法使得 Number、Boolean、String 变成对象。

下面以 Number 为例 (其他类型也一样)

可以用 var 基本类型 = new 对应基本类型的函数() 的方法创建一个新函数

var n = new Number() 创建一个 Number 函数,其是一个对象

这里的 n 就是 Number 的实例对象,可以看到 n 里面有一个 __proto__ 指向 Number 所指向的原型对象(也是 n 自己本身的原型对象),Number 为 n 的构造函数,它通过 prototype 指向自己的原型对象,而后又可以通过 constructor 指向回 Number 本身;

而 Number 函数也有一个 __proto__ 指向 Object 这个构造函数的原型对象,Object 通过 prototype 指向自己原型对象 ;

Object 函数没有 __proto__,证明其已经到达最后的属性层,他的 __proto__ 指向为 null。

原型链

以上一整个原型与原型层层相链接的过程即为原型链

其可以将公用属性存放在同一原型层中,实现继承、节省内存空间等。

当您访问实例的属性时,JavaScript 首先会检查它们是否直接存在于该对象上,如果不存在,则会 [[Prototype]] 中查找。这意味着你在 prototype 中定义的所有内容都可以由所有实例有效共享,你甚至可以稍后更改部分 prototype,并在所有现有实例中显示更改(如果需要)。


通过以上例子我们可以得到下面两个“公式”

var 对象 = new 函数()

对象.__proto__ === 对象的构造函数.prototype

我们已经知道

var n = new Number()

n.__proto__ === Number.prototype //true

那么 Number.__proto__

Number 的构造函数是 Function,即 Number 是 Function 的实例

即有 Number.__proto__ === Function.prototype

那么同理

var object = new Object()

object.__proto__ === Object.prototype

Object.__proto__ === Function.prototype

再进一步推断

var function = new Function()

function.__proto__ === Function.prototype

Function.__proto__ === Function.prototype


本文主要用于个人学习使用,如有侵权请联系我删除。


参考及推荐:

继承与原型链

Javascript继承机制的设计思想

白话原型和原型链

JavaScript深入之从原型到原型链 #2

饥人谷课件-原型链和继承

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容

  • JavaScript在ES6之前没有类似class,extend的继承机制,JavaScript的继承主要是通过原...
    肆意咯咯咯阅读 405评论 0 2
  • JS中原型链,说简单也简单。 首先明确: 函数(Function)才有prototype属性,对象(除Object...
    前小白阅读 3,926评论 0 9
  • js里,一切皆对象,但有普通对象和函数对象之分,通过new Function()创建的对象就是函数对象。 原型对象...
    前端小菜_蓝草阅读 205评论 0 0
  • 文字是是信息的压缩。 为了信息压缩和表达方便,文字给大脑输入了自动化的程序指令,比如给大脑输入苹果两个字,普通人的...
    愉悦的Gil阅读 381评论 0 1
  • 舍友深夜喝酒,在为失恋痛哭。看着她伤心痛哭的样子,我也好难受。就在半年前,我也曾经抱着啤酒瓶在操场痛苦欲绝,因为他...
    魏魏君阅读 555评论 0 0