原型&原型链深度解读

基本概念

原型链

首先我们看上面的示意图,我们可以看到每一个构造函数都会有一个prototype属性(js引擎自动帮我们加上的),这个属性会指向一个原型对象,这个构造函数通过new 会生成一个新的实例对象,这个实例拥有一个__prto__属性,而这个属性也会指向原型对象。

function A () {} // 构造函数
const a = new A(); // 实例

A.prototye === a.__proro__  // true

也就是说通常情况下(没有手动给A.prototye重新赋值)构造函数的prototype和实例的__proto__指向同一地址。而原型对象会有constructor属性指向这个构造函数。同样原型对象也是一个对象,这个对象也会有他的__proto__属性,这个属性又会指向另一个原型对象,这样一层层链接下去就构成了我们通常所说的原型链。

我们通常会通过instanceof这个操作符来判断某个对象是不是某个构造函数的实例(一般我们认为一个对象的__proto__属性和某个构造函数的prototype属性指向同一地址instanceof就会返回true),a instanceof A返回true,这样看来似乎并没与什么不妥,但是我们发现a isntanceof Object返回的也是true,a 是由Object构造函数的直接实例对象吗?a的__proto__和Object的prototype指向同一地址吗?显然不是,那为什么会返回true。其实instanceof表明的是在a这个对象的原型链上存在一个对象的__proto__属性和某个构造函数的prototype属性指向的是同一地址(翻译过来就是:a的整条[[prototype]]链中是否出现过Object.prototype)。a.__proto__.__proto__ === Object.prototype这里会返回true。其实要知道这样的关系,我们还可以使用isPrototypeOf
Object.prototype.isPrototypeOf(a),当然也可以是b.isPrototypeOf(a)

在ES5中获取对象的原型链标准方法是Object.getPrototypeOf,非标准方式是a.__proto__(大多数现代浏览器都会支持)

但是如果这样我们就不能判断一个对象是不是某个构造函数的直接实例了,这时我们就可以使用constructor这个属性

a.constructor === A //true
a.constructor === Object // false

下面再来看看这张图


image

我们从左上角说起,f2和f1是Foo构造函数的两个实例,他们的__proto__属性指向Foo.prototype所指向的地址(换句话说在这里f2.__proto__Foo.prototype同一个东西)。而Foo.prototype也是一个对象,也拥有__proto__属性,这个属性和Object.prototype指向同一个地址,而Object.prototype.__porto__指向null(也就是说并不是每个对象都有__proto__这个属性)因为这已经是原型链的顶端了。我们再看构造函数Foo其实也是一个对象(函数也是一个对象)它也拥有__proto__,它的__proto__属性指向Function.prototype所指向的地址(即Foo.__proto__ === Function.prototype),这是因为函数对象都是有Function这个构造函数构造的。
Function.prototype(或者Foo.__proto__.__proto__)指向Object.prototype。这里还有中间的Object这个特殊的构造函数,他是一个函数那么他拥有prototype属性,同时他又是一个函数对象,那么他就是由Function构造出来,所以Object.__proto__ === Function.prototypeFunction构造函数䦹如此。解释起来有点麻烦,大家多看这个图就好。所以就会出现下面这些题目了

Function instanceof Object // true 
Object instanceof Function // true 
Function instanceof Function //true
Object instanceof Object // true
Number instanceof Number //false

上面说一个对象的__proto__属性指向对应构造函数的prototype属性所指向的地址,但是这里如果我们新建的对象是通过Object.create函数创建,那么新创建的这个对象的__proto__会指向crate的参数

const p = {name: 'djlxs'};
const o = Object(p);

o.__proto__ === p

属性屏蔽

当我们读取某个对象的某个属性时,实际上是通过[[Get]]这个操作,在对象本身没有找到时,就会在其原型链上寻找直到找到或者返回undefined,当一个属性既出现在对象本身上,又出现在原型链上,那么就会优先返回对象本身相应的属性值,因此这里就发生了属性屏蔽

当我们向一个对象,添加某个属性时,如果这个属性存在于原型链上,且没有设置成只读,那么会在这个对象本身新建这个属性,从而屏蔽原型链上的相应属性,但是如果原型链上的这个属性设置成了只读,那么在严格模式下,会抛出相应错误,非严格模式下,则会忽略。如果在这种情况下,想要设置这个属性,那么我们就不能直接使用=这个赋值操作符,而是要使用Object.defineProperty()

在我们使用的要注意属性屏蔽,这里还有一种隐式的属性屏蔽尤其要注意

var anotherObject = {
    a: 2
}

var myObject = Object.create(anotherObject);

myObject++;

console.log(anotherObject)  // 2
console.log(myObject) // 3

因为这里myObject++相当于myObject = myObject + 1;

注 以上参考自 《你不知道的JavaScript上卷》(144-146)

最后(欢迎大家关注我)

DJL箫氏个人博客
博客GitHub地址
简书
掘金

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

推荐阅读更多精彩内容