原型、 __proto__和prototype、原型链

new这个操作做了什么?

var p = new Person()
1.创建一个空对象(var obj = new Object())

2.将空对象的原型赋值给构造函数的原型(Person.prototype = obj.proto)

3.执行构造函数的代码,为空对象添加属性(Person.call(obj)),也可以理解为将构造函数内部的this指向新建的空对象

4.new调用的函数会自动的返回一个创建好的新对象

1.原型

var obj = new Object();

每创建一个对象的的时候,都会给它关联另一个对象(原型),都会从原型中“继承”属性

2.prototype(函数属性)

所有函数都会有一个prototype属性,这个属性指向函数的原型(通过bind()绑定的没有)

函数也是对象

基于原型链的继承:A.prototype=new B();A继承B

cat1和cat2继承了原型Animal.prototype中的height属性


3.__proto__(浏览器属性)

是所有对象(除null外)都有的属性,这个属性指向该对象的原型,

cat1.__proto__ === Animal.prototype为 true


4.  __proto__和prototype的区别:

__proto__是实例指向原型的属性  

prototype是对象或者构造函数指向原型的属性

 __proto__和prototype的区别在于实例cat1


5.constructor

每个原型都有一个constructor属性,指向该关联的构造函数

Animal===Animal.prototype.constructor 为true                                                 Object.getPrototypeOf(cat1) === Animal.prototype为true
Animal===Animal.prototype.constructor


cat1.constructor === Animal

每一个对象都会从原型中“继承”属性,cat1中并没有属性constructor ,但是它的原型cat1.__proto__ 指向的是Animal.prototype,然而Animal.prototype原型中是有属性constructor的,于是cat1的constructor属性继承与原型中的constructor属性。这里便能看出一点点原型链的影子了

6.原型的原型

Object.prototype.__proto__===null

即 Object.prototype 没有原型,在原型链中,当属性找到顶层原型都没有属性那就是没有这个属性


最顶层原型的原型


7.原型链

申明一个对象,var obj = { name: 'obj' } ,通过console.dir()打印一个对象的所有属性和方法的时候发现已经有valueOf / toString / constructor的属性/方法了,但是我们并没赋值啊,console.dir(obj) 打出来的结果是:

1. obj 本身有一个属性 name(这是我们给它加的)

2. obj 还有一个属性叫做 __proto__(它是一个对象),这个对象有很多属性,包括 valueOf、toString、constructor 等

3. obj.__proto__ 其实也有一个叫做 __proto__ 的属性(console.log 没有显示),值为 null

当我们「读取」 obj.toString 时,JS 引擎会做下面的事情:

1. 看看 obj 对象本身有没有 toString 属性。没有就走到下一步。

2. 看看 obj.__proto__ 对象有没有 toString 属性,发现 obj.__proto__ 有 toString 属性,于是找到了

所以 obj.toString 实际上就是第 2 步中找到的 obj.__proto__.toString。

可以想象,

3. 如果 obj.__proto__ 没有,那么浏览器会继续查看 obj.__proto__.__proto__

4. 如果 obj.__proto__.__proto__ 也没有,那么浏览器会继续查看 obj.__proto__.__proto__.proto__

5. 直到找到 toString 或者 __proto__ 为 null。

上面的过程,就是「读」属性的「搜索过程」,而这个「搜索过程」,是连着由 __proto__ 组成的链子一直走的,这个链子,就叫做「原型链」,当读取实例的属性时,如果找不到,就会查找与对象关联的原型中的属性,如果还查不到,就去找原型的原型,一直找到最顶层为止。这样就形成了原型链

注意:

故意创建不具有典型原型链继承的对象(通过Object.create(null)创建的对象)

改变原型链(通过Object.setPrototypeOf

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