原型链是什么?有什么功能?若想访问一个对象的原型,应该使用什么方法?

        大家好,我是IT修真院北京总院第29期的学员禚洪宇,一枚正直、纯洁、善良的前端程序员今天给大家分享一下,修真院官网JS任务5深度思考中的知识点——原型链是什么?有什么功能?若想访问一个对象的原型,应该使用什么方法?

1 背景介绍

1.1什么是原型

学习原型链之前我们首先要明白什么是原型;那么什么是原型呢?我们来简单学习一下:

只要我们像这样简单的定义一个函数foo(),就可以访问像访问其他对象一样访问该函数的属性:

>>>function foo(a,b){return a*b;}

>>>foo.length

2

>>>foo.constructor

Function()

其实我们在创建一个函数的时候,这个函数就包括了prototype属性,它的初始值是一个空对象(object),

>>>typeof foo.prototype

"object"

所以我们可以自己在这个空对象中添加属性,像这样:

>>>foo.prototype = {}

1.2 原型有什么作用

        简述一下prototype属性的出现:

        第一版浏览器无用户交互—》需要脚本语言—》借鉴C++和Java语言,又想节省服务器资源和时间—》prototype。

         由于所有的实例对象共享同一个prototype对象,那么从外界看起来,prototype对象就好像是实例对象的原型,而实例对象则好像"继承"了prototype对象一样。

          这个属性包含一个对象(以下简称"prototype对象"),所有实例对象需要共享的属性和方法,都放在这个对象里面;那些不需要共享的属性和方法,就放在构造函数里面。

        而实例对象一旦创建,将自动引用prototype对象的属性和方法。也就是说,实例对象的属性和方法,分成两种,一种是本地的,另一种是引用的。

2 知识剖析

2.1 原型链是什么

        我们上面说到,每个构造函数在创建时都包含一个属性prototype,其初始值是一个空对象;


原型链(图片来源与网络)

原型对象结构:

Function.prototype={ 

 constructor :Function,

__proto__:parentprototype,

someprototypeproperties: ... 

 };

       函数的原型对象constructor默认指向函数本身,原型对象除了有原型属性外,为了实现继承,还有一个原型链指针__proto__,该指针指向上一层的原型对象,而上一层的原型对象的结构依然类似,这样利用__proto__一直指向Object的原型对象上,而Object的原型对象用Object.prototype.__proto__ = null表示原型链的最顶端,如此变形成了javascript的原型链继承,同时也解释了为什么所有的javascript对象都具有Object的基本方法。




2.2 若想访问一个对象的原型,应该使用什么方法?

获取实例对象obj的原型对象,有三种方法

1. obj.__proto__

2. obj.constructor.prototype

3. Object.getPrototypeOf(obj)

上面三种方法之中,前两种都不是很可靠。最新的ES6标准规定,__proto__属性只有浏览器才需要部署,其他环境可以不部署。而obj.constructor.prototype在手动改变原型对象时,可能会失效。

3 常见问题

Array.isArray(Array.prototype)输出什么?

4 解决方案

Array.prototype是Array构造函数实例的原型,构造函数实例化后仍为数组,所以输出true。

5 扩展思考

Q1:  prototype与_proto_是什么关系

__proto__(隐式原型)、prototype(显式原型)

A1:   显式原型 explicit prototype property:每一个函数在创建之后都会拥有一个名为prototype的属性,这个属性指向函数的原型对象。

隐式原型 implicit prototype link:JavaScript中任意对象都有一个内置属性[[prototype]],在ES5之前没有标准的方法访问这个内置属性,但是大多数浏览器都支持通过__proto__来访问。ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf().

二者的关系:

隐式原型指向创建这个对象的函数(constructor)的prototype

Q2:在IE中可以使用_proto_属性吗?

A:_proto_将在ES6中进行标准化,目前在ES6的草案附录B中。

Q3:_proto_的兼容性怎么样?

A:_proto_目前是浏览器的内置属性,不同的浏览器有不同的情况。

参考文献

参考一:阮一峰:Javascript继承机制的设计思想

参考二:一个例子让你彻底明白原型对象和原型链

参考三:谈谈对原型链的理解

参考四:《JavaScript面向对象编程指南》



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

推荐阅读更多精彩内容