原型与原型链以及继承

今天复习下原型与原型链的知识，以及记录新学的继承知识点。

---

知识点纲要

• 原型与原型链
• es5与es6继承

---

什么是原型链

下图就是原型链。全局对象window有三个属性Object,Array,Function。这三个属性都有prototype属性，在三个prototype属性中拥有非常多的方法。方便我们在声明对象，数组以及函数时调用。

注：在js中函数也是对象

image.png

例如我们声明一个空对象a，这个空对象a拥有toString等一系列方法

image.png

image.png

数组与对象就不一一举例了。

其过程是怎样的呢？
我们在创建a对象的时候，a对象会带有__proto__属性，这个__proto__属性指向的是Object的prototype。所以当a调用toString方法时，a对象本身没有这个方法，于是就从__proto__中去寻找，也就是Object的prototype，它里面有，所以a对象就能够调用toString方法。

image.png

如何实现继承？

1

function Person(name, sex){
    this.name = name;
    this.sex = sex;
}

Person.prototype.printName = function(){
    console.log(this.name);
};

function Male(name, sex, age){
    Person.call(this, name, sex);
    this.age = age;
}

Male.prototype = Object.create(Person.prototype);

Male.prototype.printAge = function(){
    console.log(this.age);
};

2

function Person(name,sex){
  this.name = name;
  this.sex = sex;
}

Person.prototype.printName = function(){
  console.log(this.name)
}

function Male(name,sex,age){
  Person.call(this,name,sex)
  this.age = age;
}
Male.prototype = new Person()
Male.prototype.printAge = function(){
  console.log(this.age)
}
Male.prototype.constructor = Male

3

class Human {
  constructor(name) {
    this.name = name
  }
  run() {
    console.log('I can run')
  }
}

class Man extends Human {
  constructor(name) {
    super(name)
    this.gender = '男'
  }
  fight(){
    console.log('I can fight')
  }
}