Es5中的类和Es6中的类

最新推荐文章于 2024-08-20 15:30:01 发布

IT行星

最新推荐文章于 2024-08-20 15:30:01 发布

阅读量314

点赞数

文章标签： javascript 原型模式开发语言

本文链接：https://blog.csdn.net/m0_72694993/article/details/126841048

版权

本文对比了ES5中的类与构造函数、原型对象以及继承机制，随后详细介绍ES6中类的定义、继承方式，包括使用`class`关键字和`extends`。重点讲解了如何在类中定义数据和方法，并演示了如何通过`super`实现子类继承父类的属性。

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

一、Es5中的类

1.构造函数

如下为Person类的构造函数（在构造函数中定义数据）

        function Person(name ,age){
            this.name=name;
            this.age=age;

        }

2.prototype 原型对象(在类的原型对象上定义方法)

       Person.prototype.eat=function(){
        console.log("chi//");
       }

3.继承方法：
子类的构造函数通过父类.call继承属性
子类的原型对象等于new 父类继承方法

此时原型对象的constructor是父类的原型对象，正常情况下，一个类的constructor应该指向此类的原型对象，所以我们要把Coder赋值给Coder.prototype.constructor

       function Coder(name ,age ){
        Person.call(this,name,age);
        //继承    在子类的构造函数 通过父类.call继承属性
      }
       Coder.prototype=new Person();
       
       Coder.prototype.constructor=Coder;

二、es6中的类

1.es6中类的定义比es5方便很多，直接就可以在constructor中定义我们的数据，在里边直接定义函数方法

class person{
          constructor(name){
            this.name=name;
          }
          //方法
          eat(){
             console.log("正在吃。。。")
          }
          static say(){
            console.log('hhh');
          }
    }

2. 类的继承，通过extends方法继承父类，constructor中新增我们的数据，利用super继承父类的数据，就继承完毕了

    class Coder extends person{
        constructor(name,xx){
            super(name);
            this.xx=xx;
        }
    }
   var c1=new Coder('list','aa');