js继承

继承

构造函数 原型对象 对象实例 三者之间的关系

• 每个构造函数都拥有一个原型对象，
  构造函数.prototype --- 原型对象
• 原型对象都有一个指向构造函数的指针，
  原型对象.constructor --- 构造函数
• 实例都包含一个指向原型对象的内部指针
  实例.proto --- 原型对象
• 每个实例是构造函数 new 出来
  new 构造函数 --- 实例 // 构造函数 new 创建

原型链.png

1. 原型继承

将父类的实例直接赋值给子类的原型对象 prototype
子类的原型对象被重写，父级的所有属性和方法也存在于子类的原型对象prototype

代码演示

 // 父类
function Person() {
  this.name = 'zs';
  this.age = 13;
}
// 子类
function Student() {
  this.gender = '男';
}
//父类的实例赋值给子类的原型对象
Student.prototype = new Person();  // 这里改constructor 指向 Person
// 改变constructor  
Student.prototype.constructor = Student;   // constructo指向Student
let s1 = new Student();
console.log(s1.name,s1.age,s1.gender)  // zs 13 男
console.dir(Student)

原型继承bug

• 原型继承时将父类的实例赋值给子类，子类的原型会变成父类的实例，要通过
  Student.prototype.constructor = Student来将Person的constructor改为Student的constructor
• 不可以向父类的构造函数传参

2. 借用构造函数(解决传参问题)

使用 call() 方法改变 this 的指向，实现属性继承
在子类中调用父类并用call()方法将 this 指向子类

代码演示

// 父类
function Person(name,age) {
  this.name = name;
  this.age = age;
  this.sayHi = function(){
    console.log('大家好，我+this.name)
  }
}
Person.prototype.test = function(){
  console.log('今年'+this.age)
}
// 子类
function Student(name,age,gender) {
  // 通过call()方法将 this 指向由 Person 改为 Student
  // Student 继承 Person 的属性和定义在函数内部的方法
  Person.call(this,name,age);   
  this.gender = gender;
}
let s1 = new Student('zs',14,'男');
console.log(s1)   // Student {name: "zs", age: 14, sayHi: ƒ, gender: "男"}
s1.sayHi();   // 大家好，我是zs
// Person 原型对象上的方法不能被 Student 访问
s1.test();   // 1.html:130 Uncaught TypeError: s1.test is not a function  

借用构造函数bug

• 子类只能继承函数内部的属性和方法，原型对象上的方法不能被继承
• 为了避免方法的重复定义，将方法定义在原型上；但这样不能继承，要想继承，就定义在构造函数内部

3. 复合继承(实现属性和方法的继承)

• 复合继承 : 原型继承(继承方法) + 借用构造函数继承(继承属性)
• 将父级的方法定义在原型对象上，通过原型继承，让子类拥有父类的方法
• 将父级的属性定义在构造函数内部，通过call()方法，让子类拥有父类的属性

代码演示

// 父类
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function () {
    console.log('大家好，我是' + this.name)
  }
}
Person.prototype.test = function () {
  console.log('今年' + this.age)
}
// 子类
function Student(name, age, gender) {
  Person.call(this, name, age);   // 继承属性
  this.gender = gender;
}

// 父类的实例赋值给子类的原型对象
Student.prototype = new Person();  // 继承方法
Student.prototype.constructor = Student;

let s1 = new Student('Tom', 18, 100)
console.log(s1)  // Student {name: "Tom", age: 18, sayHi: ƒ, gender: 100}
s1.sayHi()  // 大家好，我是Tom
s1.test()   // 今年18