JS中的原型链是什么?

背景介绍

JS中万物皆对象,但是分为两大类,函数对象,普通对象

所有的函数对象都有一个prototype属性,这个属性引用了一个对象,即原型对象,也称原型。 然而普通对象是没有prototype属性,只有_proto_属性

知识剖析

vara = {};console.log(a.prototype);//undefined

console.log(a.__proto__);//Object {}

var b =function(){}

console.log(b.prototype);//b {}

console.log(b.__proto__);//function() {}

/*1、字面量方式*/

 var a = {};

console.log(a.__proto__);  //Object {}

console.log(a.__proto__ === a.constructor.prototype); //true

 /*2、构造器方式*/

var A = function(){};

var a = new A();

 console.log(a.__proto__); //A {}

console.log(a.__proto__ === a.constructor.prototype); //true

 /*3、Object.create()方式*/

var a1 = {a:1}

 var a2 = Object.create(a1);

console.log(a2.__proto__); //Object {a: 1}

console.log(a.__proto__ === a.constructor.prototype); //false


constructor 属性返回对创建此对象的数组函数的引用

_proto_的指向取决于对象创建时的实现方式

大多数情况下,_proto_可以理解为构造器的原型,即:_proto_ === constructor.prototype

但是通过Object.create()创建的对象不使用此等式

functionFoo1(){this.name1 ='1';}

functionFoo2(){this.name2 ='2';}

Foo2.prototype =newFoo1();

functionFoo3(){this.name ='3';}

Foo3.prototype =newFoo2();

varfoo3 =newFoo3();

console.log(foo3);

当我们「读取」 foo3的某个属性得时候,jS 引擎会做下面的事情:

1. 看看 foo3 对象本身有没有这个属性。没有就走到下一步。

2. 看看 foo3.__proto__ 对象有没有这个属性,发现 foo3.__proto__ 有这个属性,于是找到了

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

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

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

常见问题

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

解决办法

1、使用_proto_属性

每个JS对象一定对应一个原型对象,并从原型对象继承属性和方法。

对象__proto__属性的值就是它所对应的原型对象;

使用__proto__是有争议的,而且是不鼓励的。 它从来没有被包括在EcmaScript语言规范中,但是现代浏览器实现了它, 无论如何。__proto__属性已在ECMAScript 6语言规范中标准化,用于确保Web浏览器的兼容性,因此它未来将被支持。它已被不推荐使用, 建议使用Object.getPrototyOf()

参考文献:

参考一: JS重点整理之JS原型链彻底搞清楚

参考二: 三张图搞懂JavaScript的原型对象与原型链

提问:

Q:prototype和_proto_区别

A:所有的函数对象都有一个prototype属性,这个属性引用了一个对象,即原型对象,也称原型。 然而普通对象是没有prototype属性,只有_proto_属性

Q:constructor 代表什么

A:constructor 属性返回对创建此对象的数组函数的引用

Q:_proto_的指向哪里

A:_proto_的指向取决于对象创建时的实现方式

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

推荐阅读更多精彩内容

  • 在JavaScript中,原型链作为一个基础,老生长谈,今天我们就来深入的解读一下原型链。 本章主要讲的是下面几点...
    Devinnn阅读 1,371评论 1 6
  • 一、函数对象(Function)和普通对象(Object) 由function定义或Function实例化的对象为...
    Franchen阅读 771评论 0 4
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 7,621评论 2 17
  • 声明:此文为转载文章,为了自己看起来方便特此重新排版,等日后看懂了再自己整理疏解,查看原文请点击这里。 正文: J...
    辞镜朱颜阅读 514评论 0 1
  • 原型 prototype (原型)属性每个函数都有一个prototype属性,这个属性指向一个对象,这个对象就是原...
    LeoCong阅读 352评论 0 1