javascript的继承方式

àì夳堔傛蜴生んèń 2022-11-14 11:54 192阅读 0赞

面向对象编程，很重要的一点，就是对象的继承，一个对象继承另一个对象的方法。在实际中，对于减少重复代码的使用，了解对象的继承是有用的。

下面介绍几种对象的继承方式：（下面的案例描述中，子类student要继承父类persion的方法）

### 1. 原型链继承 ###

子类的原型是通过父类构造函数创建出来的,如下代码：

//1.原型链继承
            //父类
            function Persion(name,age){
                this.name = name;
                this.age = age;
                this.play = [1,2,3]
                this.setName= function(){}
            }
            Persion.prototype.setAge = function(){
                console.log('doWork...')
            }
            //子类
            function Student(price){
                this.price = price;
                this.setScore = function(){
                
                }
            }
            Student.prototype.setPrice = function(){}
            Student.prototype = new Persion();
            let s1 = new Student(10)
            console.log(s1.setPrice) //undefined

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70][]

优点：实例s1继承了 Persion上的属性和方法，以及Persion原型上的方法

缺点：s1自己原来原型上的方法没有了，可以在改变原型之后，给子类原型上再添加方法，就不会被覆盖

### 2. 借用构造函数继承 ###

子类构造函数内，改变指向，让子类构造函数内部指向父类构造函数

//2.借用构造函数继承
            //父类
            function Persion(name,age){
                this.name = name;
                this.age = age;
                this.play = [1,2,3]
                this.setName= function(){}
            }
            Persion.prototype.setAge = function(){
                console.log('doWork...')
            }
            //子类
            function Student(name,age,price){
                Persion.call(this,name,age)
                this.price = price;
                this.setScore = function(){
                
                }
            }
            Student.prototype.setPrice = function(){}
            let s1 = new Student("Lily",12,200)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1][]

该方式可以实现继承父类构造函数的属性和方法，父类原型上的方法无法继承

### 3. 原型链继承 + 借用构造函数的组合继承 ###

通过借用父类构造实现，继承父类的属性和方法，然后通过改变子类的原型是父类实例，来实现继承父类原型上的属性和方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2][]

优点：既继承了父类构造函数内部的属性、方法、以及父类原型上的方法，也保留了子类构造函数内部和原型上的属性方法

缺点：调用两次构造函数，生成两份实例

### 4. 原型链继承 + 借用构造函数的组合继承优化1 ###

子类继承父类构造函数的私有的属性和方法，也继承父类原型上的方法。实例不会被创建两次

//4.原型链+借用构造函数的组合继承优化1
            //父类
            function Persion(name,age){
                this.name = name;
                this.age = age;
                this.setName= function(){}
            }
            Persion.prototype.setAge = function(){
                console.log('doWork...')
            }
            //子类
            function Student(name,age,price){
                Persion.call(this,name,age)
                this.price = price;
                this.setScore = function(){
                
                }
            }
            Student.prototype = Persion.prototype;
            Student.prototype.sayHello = function(){
                console.log('Hello !')
            }
            let s1 = new Student("Lily",12,200)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3][]

### 5. 原型链继承 + 借用构造函数的组合继承优化2 ###

应用Object.create，使得子类的原型的\_proto\_指向父类的原型，见如下代码：

//5.原型链+借用构造函数的组合继承优化2
            //父类
            function Persion(name,age){
                this.name = name;
                this.age = age;
                this.setName= function(){}
            }
            Persion.prototype.setAge = function(){
                console.log('doWork...')
            }
            //子类
            function Student(name,age,price){
                Persion.call(this,name,age)
                this.price = price;
                this.setScore = function(){
                
                }
            }
            Student.prototype = Object.create(Persion.prototype);
            Student.prototype.constructor = Student;
            Student.prototype.sayHello = function(){
                console.log('Hello !')
            }
            let s1 = new Student("Lily",12,200)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4][]

这种方法是完美的解决办法。

### 6. 使用ES6中的class、extends实现继承 ###

//6. 使用ES6中的class、extends实现继承
            //父类
            class Persion{
                constructor(name,age){
                    this.name = name;
                    this.age = age;
                }
                showName(){
                    console.log('showName')
                }
            }
            let p1 = new Persion('Tom',19);
            //子类
            class Student extends Persion {
                constructor(name,age,salary){
                    super(name,age);
                    this.salary = salary;
                }
                showAge(){
    
                }
            }
            let s1 = new Student("Lily",12,200)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70]: /images/20221022/abb0b48af4b44bde834c63ccb60820e3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/2843be8a10214dcb9b26ef37fa701b10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/96315c5c253a400dadfcbefe722f4070.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/f5a3361c7c0e41d8bcf3c46e6b470a03.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/cb3a3c492bdc444ca2fa1778c0b62c68.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NvbmdsZjUyMQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/805692fe0afc4c5db8332659f3882c2c.png