js中的继承
方式一、原型链继承
function Person(name,age){
this.name = name;
this.age = age;
this.num = [1,2,3,4]
}//父类
Person.prototype.test = function(){
this.mm = 'jsksjk';
}
function Student(price){
this.price = price;
this.play = function(){
}
}//子类
Student.prototype = new Person(); // 子类型的原型为父类型的一个实例对象！！！！！
var s1 = new Student(1000);
s1.num.push(88);
var s2 = new Student(1999);
console.log(s1);
console.log(s2);
image.png
分析：
这种方式实现的本质是通过将子类的原型指向了父类的实例，子类的实例就可以通过proto访问到 Student.prototype 也就是Person的实例，这样就可以访问到父类的私有方法，然后再通过proto指向父类的prototype就可以获得到父类原型上的方法。于是做到了将父类的私有、公有方法和属性都当做子类的公有属性。
但是，如果说父类的私有属性中有引用类型的属性，那它被子类继承的时候会作为公有属性，这样子类1操作这个属性的时候，就会影响到子类2。
例如我们上面Person里面的num作为数组，是引用类型，s1,s2的这个属性是在相同的，所以通过s1去更改num的时候，s2的num也是会改变的。
特点：
- 父类新增原型方法/原型属性，子类都能访问到
- 简单，易于实现
缺点： - 无法实现多继承
- 来自原型对象的所有属性被所有实例共享
- 创建子类实例时，无法向父类构造函数传参
- 要想为子类新增属性和方法，必须要在Student.prototype = new Person() 之后执行，不能放到构造器中
方式二：
这种方式关键在于:在子类型构造函数中通用call()调用父类型构造函数
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.test = function(){
this.mm = '范冰冰'
}
function Student(name,age,price){
Person.call(this,name,age); //相当于: this.Person(name, age)
this.price = price;
}
var s3 = new Student('小军',22,999);
console.log(s3)
image.png
发现问题了吗？？子类是拿不到父类的原型还有方法和属性
console.log(s3.test())//Uncaught TypeError: s3.test is not a function
特点：
- 解决了原型链继承中子类实例共享父类引用属性的问题
- 创建子类实例时，可以向父类传递参数
- 可以实现多继承(call多个父类对象)
缺点： - 实例并不是父类的实例，只是子类的实例
- 只能继承父类的实例属性和方法，不能继承原型属性和方法
- 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
方法三： 原型链+借用构造函数的组合继承
function Person(name,age){
this.name = name;
this.age = age;
this.num = [2,4,1]
}
Person.prototype.test = function(){
console.log('111');
}
function Student(name,age,price){
Person.call(this,name,age);
this.price = price;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var s5 = new Student('小工',23,9102);
console.log(s5)
s5.num.push(22);
var s6 = new Student('小生',22,901);
console.log(s6)
image.png
为什么要加上Student.prototype.constructor = Student
image.png
student原型上面的constuctor应该是Student。
image.png
分析：
这种方式融合原型链继承和构造函数的优点，是 JavaScript 中最常用的继承模式。不过也存在缺点就是无论在什么情况下，都会调用两次构造函数：一次是在创建子类型原型的时候，另一次是在子类型构造函数的内部，子类型最终会包含父类型对象的全部实例属性，但我们不得不在调用子类构造函数时重写这些属性
优点：
- 可以继承实例属性/方法，也可以继承原型属性/方法
- 不存在引用属性共享问题
- 可传参
- 函数可复用
缺点： - 调用了两次父类构造函数，生成了两份实例
方式四: 组合继承优化1
function Person(name,age){
this.name = name;
this.age = age;
this.num = [1,2,3]
}
Person.prototype.test = function(){
console.log('222')
}
function Student(name,age,price){
Person.call(this,name,age);
this.price = price;
}
Student.prototype = Person.prototype;
var s7 = new Student('小腾',44,2301);
s7.num.push(321)
var s8 = new Student('小飞',99,1099)
console.log(s7)
console.log(s8)
分析：
为了是父类构造函数不要两次调用，这种方式通过父类原型和子类原型指向同一对象，子类可以继承到父类的公有方法当做自己的公有方法，而且不会初始化两次实例方法/属性，避免的组合继承的缺点。
但这种方式没办法辨别是对象是子类还是父类实例化
console.log(s7 instanceof Person) //true
console.log(s7 instanceof Student) //true
console.log(s7.constructor) //Person
优点：
- 不会初始化两次实例方法/属性，避免的组合继承的缺点
缺点： - 没办法辨别是实例是子类还是父类创造的，子类和父类的构造函数指向是同一个。
方式五: 组合继承优化2（可能是目前最好的方法了）
function Person(name,age){
this.name = name;
this.age = age;
this.num = [1,2,3]
}
Person.prototype.test = function(){
console.log('222')
}
function Student(name,age,price){
Person.call(this,name,age);
this.price = price;
}
Student.prototype = Object.create(Person.prototype) //核心代码
Student.prototype.constructor = Student; //核心代码
var s9 = new Student('小亨',19,1099);
console.log(s9);
console.log(s9 instanceof Person );//true
console.log(s9 instanceof Student);//true
console.log(s9.constructor) //Student
image.png
分析：
借助原型可以基于已有的对象来创建对象，var B = Object.create(A)以A对象为原型，生成了B对象。B继承了A的所有属性和方法。然后再修正Student.prototype.constructor就可以了。Student继承了所有的Person原型对象的属性和方法。目前来说是最完美的方法了
方式六：ES6中class 的继承
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
//定义一般的方法
showName() {
console.log("调用父类的方法")
console.log(this.name, this.age);
}
}
class Student extends Person{
constructor(age,name,price){
super(age,name);
this.price = price;
}
showName(){
console.log('调用子类的方法')
console.log(this.name,this.age)
}
}
let s10 = new Student('小米',999,10922);
console.log(s10)
image.png
分析：
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。
需要注意的是，class关键字只是原型的语法糖，JavaScript继承仍然是基于原型实现的。
优点：
- 语法简单易懂,操作更方便
缺点： - 并不是所有的浏览器都支持class关键字
