Skip to content
On this page

继承

es5 的类

javascript
function Person(name) {
  this.name = name;
}
Person.prototype.eat = function () {
  console.log("");
};
var per = new Person("老六");

es6 的类

javascript
class Father {
  constructor(age) {
    this.age = age;
    this.xiao = function () {
      console.log("哈哈哈");
    };
  }
  money() {
    console.log("花钱");
  }
}
var fa = new Father(11);
console.dir(fa); //在实例对象fa的原型__proto__中有money方法
console.dir(Father); //在类Father的prototype中也有money()方法
//总结:
//1.这里说明class类中添加方法,会添加到class类中的原型prototype中的,所以实例对象原型__proto__也会有,但是实例对象没有
//2.在constructor里面添加的属性和方法就如同es5中用this.添加的属性和方法一样,是创建实例对象的时候添加到实例对象中的,其他地方都没有

es5 的继承

1.es5 的继承原理是改变了构造函数原型对象(prototype)的指向

2.es5 完美的实现继承的方式是组合继承:借用构造函数 + 改变原型指向

3.所有用 this.声明的属性,原型对象 proto 和原型对象 prototype 中都是没有的

javascript
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.eat = function () {
    console.log(this.name + "吃饭了");
  };
}
function Student(name, age, grade) {
  //1.借用Person的构造函数(这里借用构造函数,是借用Person构造函数来为stu实例添加Person中存在的属性name、age、eat...,借用的时候也可以不传递参数:如Person.call(this),这样在借用Person构造函数的时候,stu对象中就会声明name和age属性,但是未赋值,也就是值为undefined,eat方法打印出来也是undefined在学习)
  Person.call(this, name, age);
  this.grade = grade;
  this.study = function () {
    console.log(this.name + "在学习");
  };
}
//2.改变原型指向
Student.prototype = new Person();
var stu = new Student("xiaopihong", 18, "三年级");
console.dir(stu);

es6 的继承

1.es6 的继承是使用 class 声明类,extend 实现继承

2.es6 的继承原理也是和 es5 一样,都是改变了原型指向

javascript
class Person {
  //a = 1   //这样声明的属性就类似于是初始化的时候添加到stu的属性,因为Student继承了Person,所以无论是Person的实例对象或者是Student的实例对象中都会有a=1的属性
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.eat = function () {
      console.log(this.name + "吃饭了");
    };
  }
  laugth() {
    //这是Person的原型对象prototype中的方法
    console.log("笑了");
  }
}
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); //调用父类的 constructor(name,age),如果不传参数,stu对象中就会声明name和age属性,但是未赋值,也就是值为undefined,eat方法打印出来也是undefined在学习
    this.grade = grade;
    this.study = function () {
      console.log(this.name + "在学习");
    };
  }
}
var stu = new Student("xiaopihong", 18, "三年级");
console.dir(stu);

es6 继承注意

javascript
class Father {}
class Son extends Father {
  constructor() {
    super(); //必须先super()
  }
}
var son = new Son();
//1. 子类调用自己构造函数前,必须先调用父类的构造函数
//2. 子类中写constructor()构造方法,就必须先super()一下,不然报错(因为子类中写constructor()构造方法就会调用一次自己这个构造方法)