js原型与常见的继承方式

本文主要是以图文的方式去理解js原型的指向关系以及js的常见继承方式。

---

目录

前言

一、js的六种继承方式

二、ES6-Class

三、js构造函数、原型、实例对象的指向关系及类的继承关系图

四、Function、Object与常见内置类及普通函数的关系图

---

前言

• 任何函数在被创建时，都会被附带一个新创建的原型对象。
• 原型和实例的关系：每个构造函数附带一个原型对象prototype，原型有一个constructor指向构造函数，实例对象有一个__proto__属性指向原型prototype。
• 函数的原型具有两面性，当作为实例对象时，它的原型(__proto__)指向Function构造函数的原型对象，当作为构造函数时，它的原型(prototype)指向自身创建的原型对象。

---

一、js的六种继承方式

1.原型链继承：简而言之即为让子类的原型对象指向父类的一个实例对象。    

function Father() {
  this.sex = 'male'
  this.colors = ['red','green','yellow']
};
Father.prototype.eat = function(){
  console.log('恰饭')
};

function Son() {}

// 继承
Son.prototype = new Father

const son1 = new Son
const son2 = new Son
son1.colors.push('blue') 
son2.colors // ['red','green','yellow','blue']

2.构造函数继承：在子类中调用父类的构造函数，利用父类构造函数生成自身属性。

function Father() {
 this.sex = 'male'
}
function Son() {
 // 将子类实例对象注入到父类的执行上下文中。
  Father.call(this)
}

const son = new Son;
son.sex // 'male