天气太热了，懒得出去了，在家梳理一下js中的继承，其实js的继承主要是依靠原型链来实现的
1. 原型继承
1.代码实现
function People(name, age) {
this.name = name;
this.age = age;
this.books=['格林童话']
}
People.prototype = {
constructor: People,
sayHello: function () {
console.log(
"hello,my name is " + this.name + ",I am " + this.age + " years old"
);
},
};
function Student(stuNo) {
this.stuNo = stuNo;
}
Student.prototype = new People();
Student.prototype.constructor = Student;
Student.prototype.sayStudentNo = function () {
console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
};
const s1 = new Student("202000001");
s1.name = "小明";
s1.age=18
s1.sayHello();//父类的方法
s1.sayStudentNo() //子类自己的方法
s2.books.push('小王子')
s1.books.push("哈利波特")
console.log(s1.books,s2.books)
2. 原理
借用实例对象的proto指向构造函数的prototype，让子类的原型对象等于父类的实例，从而子类不仅可以访问到父类构造函数中的属性而且还可以访问到父类原型上的属性和方法。
3.存在的问题
- 引用类型的值会造成共享，由于子类的原型等于父类的实例，那么实际上如果父类中含有引用类型的属性，在子类的实例中都是共享的。
- 在创建子类的实例的时候无法向父类构造中传递值
2. 借用构造函数继承
1.代码实现
function People(name, age) {
this.name = name;
this.age = age;
this.books=['格林童话'],
this.sayHello=function() {
console.log(
"hello,my name is " + this.name + ",I am " + this.age + " years old"
);
}
}
People.prototype = {
constructor: People,
};
function Student(stuNo,...rets) {
this.stuNo = stuNo;
People.apply(this,rets)
}
Student.prototype={
constructor:Student,
sayStudentNo:function(){
console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
}
}
const s1 = new Student("202000001",'小明',18);
s1.sayHello(); //父类的方法
s1.sayStudentNo() //子类自己的方法
const s2=new Student("202000002");
s2.books.push('小王子')
s1.books.push("哈利波特")
console.log(s1.books,s2.books)
1. 原理
在子类的构造函数中调用父类的构造函数，并绑定当前子类的this。这就会把父类构造函数中的所有属性和方法添加到子类的构造函数中，使得子类可以拥有父类中的属性和方法。
2. 存在的问题
子类不能访问到父类原型中的方法和属性，导致只能把父类的所有属性和方法都写在子类的构造函数中，从而函数的复用也就无从谈起了。
3. 组合继承
function People(name, age) {
this.name = name;
this.age = age;
this.books=['格林童话']
}
People.prototype = {
constructor: People,
sayHello:function() {
console.log(
"hello,my name is " + this.name + ",I am " + this.age + " years old"
);
}
};
function Student(stuNo,...rets) {
this.stuNo = stuNo;
People.apply(this,rets)
}
Student.prototype=new People()
Student.constructor=Student
Student.prototype.sayStudentNo=function(){
console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
}
const s1 = new Student("202000001",'小明',18);
s1.sayHello();
s1.sayStudentNo()
const s2=new Student("202000002",'飞飞',19);
s2.sayHello();
s2.sayStudentNo()
s2.books.push('小王子')
s1.books.push("哈利波特")
console.log(s1.books,s2.books)
- 原理：利用借用构造函数，去继承父类构造函数中的属性，在利用原型继承去继承父类原型中的方法，相对而言较完美的实现了继承。
- 存在的问题：子类的原型对象等于父类的实例，实际上会造成子类原型上属性的冗余。
4 寄生组合式继承
实际上，我们在组合使用原型和借用构造函数继承的时候，子类去继承父类的原型中的方法时，没有必要让子类的原型对象等于父类的实例（会造成属性的冗余），我们需要的是一个对象，他的proto指向父类的prototype即可，这样我们就可以通过原型链去访问到父类原型中的方法，又不会造成属性的冗余。可以使用Object.create()来创建这个对象。
1.代码实现
function inherit(Sup, Sub) {
let obj = Object.create(Sup.prototype);
obj.constructor = Sub;
return obj;
}
function People(name, age) {
this.name = name;
this.age = age;
this.books = ["格林童话"];
}
People.prototype = {
constructor: People,
sayHello: function () {
console.log(
"hello,my name is " + this.name + ",I am " + this.age + " years old"
);
},
};
function Student(stuNo, ...rets) {
this.stuNo = stuNo;
People.apply(this, rets);
}
Student.prototype=inherit(People,Student)
Student.prototype.sayStudentNo = function () {
console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
};
const s1 = new Student("202000001", "小明", 18);
s1.sayHello();
s1.sayStudentNo();
const s2 = new Student("202000002", "飞飞", 19);
s2.sayHello();
s2.sayStudentNo();
s2.books.push("小王子");
s1.books.push("哈利波特");
console.log(s1.books, s2.books);
5 Class的继承
在ES6中可以通过class来创建类，class可以使用extends关键字来实现继承.
class People {
constructor(name, age) {
this.name = name;
this.age = age;
this.books = ["格林童话"];
}
sayHello() {
console.log(
"hello,my name is " + this.name + ",I am " + this.age + " years old"
);
}
}
class Student extends People {
constructor(name, age, stuNo) {
super(name, age);
this.stuNo = stuNo;
}
sayStudentNo() {
console.log(`大家好，我是${this.name},我的学号是${this.stuNo}`);
}
}
const s1 = new Student( "小明", 18,"202000001");
s1.sayHello();
s1.sayStudentNo();
const s2 = new Student( "飞飞", 19,"202000002");
s2.sayHello();
s2.sayStudentNo();
s2.books.push("小王子");
s1.books.push("哈利波特");
console.log(s1.books, s2.books);