继承
构造函数 原型对象 对象实例 三者之间的关系
- 每个构造函数都拥有一个原型对象，
构造函数.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
