# 一:原型链
## 先说三个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
```