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关键字

参考文章：
https://segmentfault.com/a/1190000016708006?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader11