浅谈JS的原型链

# 一:原型链

## 先说三个js原型链通用规则

1、每个对象都有`__proto__`属性,指向它的构造函数的prototype(不过这个`__proto__`由兼容性问题,在IE11以前用不了)\

2、每个函数都有一个prototype属性\

3、函数也是对象

**先验证第一第二个规则**

**

```

function Person(){}

Person.prototype.age = 12;

let justin = new Person();

console.log(justin.__proto__ === Person.prototype); // true

console.log(justin.age);//12

```

## 原型链

所谓原型链,也就是,查找对象的属性或方法时会从\

`对象本身` => `对象的构造函数.prototype` =>\

`构造函数的(父)构造函数.prototype(如果中间有继承的话)` =>`...`=>\

`Object.prototype` => `null`

在上面的代码中查找age的时候,原型链是清晰且简单的,也就是\

`justin` => `Person.prototype` => `Object.prototype` => `null`

因为justin上,没有age属性,age属性是在Person.prototype上的,

且 `justin.__proto__ === Person.prototype`,所以

从`justin` => `Person.prototype(justin.__proto__)` 这一步是没有问题\

那我们来验证一下,`Person.prototype` => `Object.prototype` 这一步

**

```

function Person(){}

Person.prototype.age = 12;

let justin = new Person();

console.log(justin.__proto__ === Person.prototype); // true

console.log(justin.age);//12

// ---------- 以下是新加的内容-------------

// 我们知道justin.__proto__ === Person.prototype; // 全等号

console.log(jusin.name);// undefined;

Object.prototype.name = 'bob'; // 注意这里我们设置的是Object.prototype.name

console.log(justin.name);// bob

console.log(Person.prototype.__proto__ === Object.prototype);// true

console.log(Object.prototype.__proto__ === null); // 全等号

```

所以justin原型链的大致结构图如下,如果Person中间有继承其他类的话,则会在Object.prototype\

和Person.prototype之间有相应的.prototype对象插入其中,具体不细说了。

**justin原型链图片**\

![](https:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dcb4a71578e74dd49247db0f7b7bc54c~tplv-k3u1fbpfcp-zoom-1.image)

justin原型链图片.png

**`__proto__`兼容性**\

![](https:https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/576edec1c76f45ba97928f7dd2866bf6~tplv-k3u1fbpfcp-zoom-1.image)

__proto__兼容.png

# 二:继承

js如何实现继承?我们修改一下上面的代码

**

```

/**

* 第一种方法

*/

function Person(){}

Person.prototype.age = 1;

Person.prototype.boss = '王多鱼';

Person.prototype.sayHello = function(){

    console.log('hello');

}

function ZuAnRen(){}

ZuAnRen.prototype.sayHello = function(){

    console.log('wdnmd');

}

// 我们造一个祖安人

let za1 = new ZuAnRen();

// 如何让ZuAnRen继承Person呢?

// 目前za1的原型链是这样的:  za1 => ZuAnRen.prototype => Object.prototype => null

// 要让ZuAnRen继承Person,也就是在ZuAnRen.prototype => Object.prototype之间插入一个Person.prototype

// 而 ZuAnRen.prototype 也是个对象,所以也有__proto__属性

// 所以试试这样

ZuAnRen.prototype.__proto__ = Person.prototype;

console.log(za1.boss);// 王多鱼  说明我们成功了!

za1.sayHello(); // wdnmd

/**

* 第二种方法(使用class和extends,不细说)

*/

```

# 三:详细扒拉function中的**proto**

由于function也是一个对象,所以也有一个`__proto__`对象

所以,像上面的`Person.__proto__`等于谁呢?

**答案是 `Function.prototype`**

因为function就是由Function创建的(这里注意,后面的Function首字母大写)

那`Function.__proto__`呢?

**答案还是`Function.prototype`**

**

```

function Person(){


}

console.log(Person.__proto__ === Function.prototype); // true

console.log(Function.__proto__ === Function.prototype); // true

```

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