面向对象继承：ES5继承和ES6继承：extends、super（）

陌依依

于 2022-11-06 21:21:23 发布

阅读量432

点赞数 1

分类专栏： web前端开发文章标签： javascript 前端开发语言 es6 原型模式

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127714647

版权

本文探讨了JavaScript中的继承概念，旨在避免代码重复并实现属性和方法的共享。详细介绍了ES5的继承方式，包括如何创建继承体、继承属性和原型方法，以及如何增强继承的方法。接着，讲解了ES6的`extends`和`super`关键字用于实现继承的简洁语法，并展示了如何覆盖或扩展父类方法。

摘要由CSDN通过智能技术生成

继承：继承共同的属性和方法，不用重复写相同的属性；
继承后可以再写自己独有的属性和方法；
比如：继承父亲已有的财产，在此基础上再加上自己创造的财产；

1、ES5继承方法

（1）创建继承体

先创建一个继承体（被继承的）：

 <script>
        function Person(){
            this.name =name,
            this.age = age
        }
        Person.prototype.say() = function(){
            console.log("111",this.name)
        }
        var obj  = new Person()
        obj.say()
 </script>

（2）继承属性和原型方法

在创建一个学生构造函数，但是这个构造函数要继承上面的人的属性和原型方法；
先继承属性：

//创建一个Student构造函数
  function Student(name,age,grade){
  //继承Person的name和age属性，call（this）是为了改变this指向，让this指向由Person变为Student
       Person.call(this,name,age)
       this.grade = grade
  }


  var obj2 = new Student('linlin',24,98)
  console.log(obj2)

这个call（this）是为了改变this指向，Person里的this指向的是Person构造函数，既然都继承了，当然是要改变this指向了，指向为Student。。。
然后再继承的基础上,Student构造函数还可以加上自己的属性：this.grade = grade
继承属性的完整代码：

<script>
        function Person(name,age){
            //Person属性
            this.name = name,
            this.age = age
        }
        Person.prototype.say = function(){
            console.log("111",this.name)
        }

        //创建一个Student构造函数
        function Student(name,age,grade){