原型链的理解

看一个实例

var animal = function() {};
var dog = function() {};

animal.prototype.price = 20;
animal.price = 1000;

dog.prototype = animal;

var cat = new animal();
var tidy = new dog();
// 下面两行分别输出什么?
console.log(cat.price);
console.log(tidy.price);

需要知道

要理解原型和原型链首先要知道几个概念:

  1. 在js里,继承机制是原型继承。继承的起点是 对象的原型(Object prototype)
  2. 一切皆为对象,只要是对象,就会有 proto 属性,该属性存储了指向其构造的指针。
    • Object prototype也是对象,其 proto 指向null。
  3. 对象分为两种:函数对象普通对象,只有函数对象拥有『原型』对象(prototype)。
    • prototype的本质是普通对象。
    • Function prototype比较特殊,是没有prototype的函数对象。
    • new操作得到的对象是普通对象。
  4. 当调取一个对象的属性时,会先在本身查找,若无,就根据 proto 找到构造原型,若无,继续往上找。最后会到达顶层Object prototype,它的 proto 指向null,均无结果则返回undefined,结束。
  5. proto 串起的路径就是『原型链』。

看图

将开篇的一段代码对象关系做了个关系图如下:

  • image

    表示函数对象

  • image

    表示普通对象

image

说话

  • cat调用price

    ① 查看本身,没有price,根据 proto 找到 animal prototype对象

    ② 在animal prototype对象中找到了price,所以 cat.price 结果为20

    ③ 如果无 animal.prototype=20,则会根据animal prototype对象proto 找到Object prototypeObject prototype中的 proto 指向null,若仍没有找到price结果则为undefined

  • tidy调用price

    ① 查看本身,没有price,根据 proto 找到dog prototype

    dog prototype = animal,这里可以这样理解: prototype本质也是一个对象,因此可以重新赋一个对象,无论是函数对象还是普通对象。事实上,每个 prototype 会有一个预定义的constructor属性用来引用它的函数对象。

    ③ 在animal中找到了price, 所以 tidy.price 结果为1000

    ④ 如果无 animal.price = 1000,则会根据animalproto 找到下一个对象,最终都没有找到 price结果就为undefined

深入

  1. 创建一个对象的方式

    • {}、new Object()
    • 构造函数
    • Object.create()
      此方法将新对象的proto更改并指向create的入参对象。
  2. instance of VS constructor
    instance of 原理:检查左边对象与右边对象是否在同一条原型链上。
    constructor原理:取对象的proto属性指向的prototype对象上的constructor字段。

cat instanceof animal === true
cat.__proto__ === animal.prototype

animal.prototype instanceof Object === true
animal.prototype.__proto__ === Object.prototype

cat instanceof Object === true
// but,
cat.constructor === animal // true
cat.constructor === Object // false
  1. new运算符的原理

    • 创建一个空对象,它的proto等于构造函数的原型对象(可以用Object.create()完成)
    • 构造函数以第1步创建的对象做为上下文,是否会返回一个对象
    • 若第2步返回了对象,则使用该对象作为新实例,否则用第1步创建的对象作为新实例
var myNew = function (func) {
var o = Object.create(func.prototype)
var i = func.call(o)
return typeof i === 'object' ? i : o
}

继承

类的声明:

  • function
  • class

生成实例:new

继承的几种方式:

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

推荐阅读更多精彩内容