从小白一步步详解JS中的原型与对象【2】

什么是原型

原型是js中非常特殊一个对象,当一个函数创建之后,会随之就产生一个原型对象,当通过这个函数的构造函数创建了一个具体的对象之后,在这个具体的对象中就会有一个属性指向原型。

原型的详细分析过程

  • 第一步
function Person(){
    }

图形分析:

第一种状态

以上是第一种状态:function Person(){},Person函数中有一个prototype的属性指向Person的原型对象,在原型对象中有一个constructor的属性指向了Person函数,所以可以通过new Person创建对象。

  • 第二步
Person.prototype.name = "Leon";
Person.prototype.age = 23;
Person.prototype.say = function() {
       alert(this.name+","+this.age);
    }

图形分析:

第二种状态

通过Person.prototype.xxx为原型设置值后,这些属性和方法都是设置在Person的原型中的。

  • 第三步:
var p1 = new Person();
p1.say();

图形分析:

第三种状态

当使用Person创建了对象p1之后,会在对象中有一个 prop_属性(这个属性是不能被访问的)指向了原型,当使用对象调用原型的时候,首先会在对象的内部寻找是否存在这个属性,如果没有,就会通过prop去原型中寻找属性,所以当调用p1.say(),在自己的空间中不存在这个方法,就会找到原型中的该方法并调用。

  • 第四步:
var p2 = new Person();
p2.name = "Ada";
p2.say();

图形分析:

图片.png

当创建了一个新的p2后,依然会有一个prop属性指向原型,此时如果通过p2.name设置了属性之后,会在自己的内存空间存储name的值,当调用say方法的时候就在自己的内存空间中找到了name而不会再去原型中找了。(特别注意:原型中的值不会被替换,仅仅只是在查找时被覆盖)

至此,对象的创建和原型的分析完毕!

文章写太长懒得看,明天继续总结

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

推荐阅读更多精彩内容

  • 面向对象不是一门新技术,而是一门解决问题的新思路。 面向对象是相对于面向过程的一种解决问题新思路,在知道面向对象之...
    小妖德八戒阅读 218评论 0 0
  • 面试中被问到很多原型与对象的东西,于是自己总结了这些东西写下,希望有所收获。 JS创建对象方式 方式一: 在js中...
    大小说家RCQ阅读 271评论 0 2
  • ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP)。面向对象的语言有一个标志,那就是...
    lovelydong阅读 652评论 0 2
  • javascript在ES6之前是没有办法定义一个类的,使用构造函数模拟类的概念 ,class ES6已经有类 ...
    碧玉含香阅读 209评论 0 0
  • 原型链理解起来有点绕了,网上资料也是很多,每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看,效果极好。 不...
    晨光2016阅读 1,294评论 8 13