JavaScript中的原型与原型链

 一直对JavaScript的原型与继承不了解,参考《JavaScript权威指南(第六版)》和《JavaScript高级程序设计(第三版)》对这个点的知识做个整理,方便自己记忆。以下内容大部分摘录自这两本书

每一个JavaScript对象都有与之相关的原型对象(prototype)。

原型对象有什么用?

 JavaScript对象会继承原型对象的属性。

原型对象是从哪里来的?

 首先我们先了解下创建对象基本的方式:

//1,对象直接量
var a={},b={m:1}
//2,构造函数
var c=newObject(),d=newDate();
//3,Object.create(param);
varx=Object.create(d);

 1.使用对象直接量创建的对象使用Object.prototype作为它们的原型对象;

 2.通过new创建的对象以构造函数的prototype属性作为原型对象;

 3.通过Object.create()创建的对象使用第一个参数作为它们的原型对象;

说明:任何函数都可以是构造函数,比如有一个函数F,当使用 var f=new F()创建对象时,F就是对象f的构造函数;其他情况下F就是一个普通的函数

 除了通过Object.create()创建的对象的原型是我们自己指定的外,Object.prototype和构造函数的prototype属性又是怎么来的呢?

 1.Object.prototype是JavaScript内置的原型对象,定义了toString,valueOf等方法及一些属性。当我们通过var a={}创建对象a,虽然我们没有为a定义toString方法,但是当我们调用a.toString()的时候会返回"[object Object]",这是因为这个方法已经在Object.prototype定义了。

 2.当我们创建函数的时候,JavaScript就会为该函数创建一个prototype属性。请看代码:

functionF(){}

console.info(F.prototype);//{constructor: ƒ}
console.info(F.prototype.constructor===F);//true

原型链是什么?

 先了解一下JavaScript对象原型的例外,在JavaScript中有少数对象是没有原型对象的。

 1.Object.prototype

 2.null

 3.通过Object.create(null)创建的对象;

 除上述对象外,所有的JavaScript对象默认都有一个原型对象。原型对象也是一个对象实例,如果它不属于上述3类对象,那么它也有自己的原型对象。比如a的原型对象是b,b的原型对象是c,c的原型对象是d……直到遇到上述3类没有原型对象的对象,从而在a,b,c,d……之间构成了一个链,a-->b-->c-->d……,这就是原型链。

原型链有什么用?

 当在a中寻找一个属性,如果有返回属性值;如果没有就去b中找,有就返回属性值;如果没有就去c中找……,如果找到链的末端,还没找到就返回undefined。即通过原型链,实现了对象对原型链上的对象的继承。

 说明:处在原型链前端的属性会隐藏后面对象的同名属性。比如:查找属性x,b和c中都有属性x,a.x的值等于b.x,而c中的x被隐藏了。

扩展原型链

 构造函数有默认的原型对象,这个原型对象的原型对象是Object.prototype。那么,通过new加构造函数创建对象,原型链上只会有三个对象,如何扩展这个原型链呢?请看代码:

//本段代码来自于《JavaScript高级程序设计(第三版)》163页

function SuperType(){
  this.property =true;
}

SuperType.prototype.getSuperValue=function(){
  returnthis.property;
};
function SubType(){
  this.subproperty =false;
}//继承了 SuperTypeSubType.prototype = newSuperType();

SubType.prototype.getSubValue=function(){
  return this.subproperty;
};
var instance =newSubType();

alert(instance.getSuperValue());//true

 我们修改了SubType函数的prototype属性的指向,使它指向了SuperType的一个对象实例。这个当我们通过new SubType()创建对象instance时,instance的原型对象是SuperType实例,而SuperType实例的原型对象是SuperType.prototype,SuperType.prototype的原型对象是Object.prototype。这样我们就扩展了对象instance的原型链。进而,我们也可以把SuperType.prototype设置为别的对象实例而再次扩展原型链。以此类推,我们可以无限扩展原型链。

 可以看到通过原型链,可以在JavaScript中实现简单的继承:对象会继承自己原型链上的对象的属性。关于继承更进一步的知识请看《JavaScript高级程序设计(第三版)》6.3继承一节,讲的很详细。

以上就是对JavaScript原型最简单的总结。请各路大侠批评指正!

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

推荐阅读更多精彩内容