说说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原型链图片

justin原型链图片.png

__proto__兼容性

__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

最后补全原型链一张图

原型链整体.png