JavaScript高级（JS高级）03:ES6中类的实现

最新推荐文章于 2023-01-15 17:01:26 发布

he1ll

最新推荐文章于 2023-01-15 17:01:26 发布

阅读量365

点赞数

分类专栏：前端文章标签： javascript css html5 es6 类

你要不要吧！你要不要

本文链接：https://blog.csdn.net/c_general/article/details/120463334

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在学习JS高级的部分，所以在这里做一个学习笔记~！

1、ES6中类的实现

（1）使用class关键字定义Father类

ES6中为我们提供了class关键字专门用来定义一个类，下面我们就使用这种方法来定义一个简单的类：Father：

class Father{

  }

注意：Father后面没有()！

（2）声明Father类实例

和ES5相同，我们使用new关键字声明一个实例，这点没有变噢！

var fa1 = new Father();

（3）为Father类定义属性

在类定义的大括号里面，默认会有一个constroctor方法，当我们声明一个实例时，会自动调用该方法，该方法里面的this也指向实例，所以我们可以在该方法内部定义属性，如下所示:：

 constructor(name) {
        this.name = name
      }

这样就为Father类定义了一个name属性；

（4）为Father类添加方法

只需要在定义类时按照下面的方法定义方法即可：

  class Father{
      constructor(name) {
        this.name = name
      }
      getName(){
        console.log(this.name);
      }
  }

方法定义好后，我们来调用一下：

var fa1 = new Father('泰温');
fa1.getName();

打印结果：

（5）验证方法是否相同

在ES5中我们通过原型链的方式让不同实例中的方法相同，现在我们还需要这样做吗？来验证一下：

var fa1 = new Father('泰温');
var fa2 = new Father('奈德');
console.log(fa1.getName == fa2.getName);

打印结果：

可以得出结论：class方法定义的类声明的实例中方法是存在相同位置的！也就不需要我们使用原型链的方法去调整了。

2、ES6中类的继承

（1）使用extends关键字实现子类Son继承父类Father

class Son extends Father{
      
  }

如上面的代码所示，我们可以在定义类时使用extends关键字实现类的继承，Son类就继承了Father类。

（2）使用super关键字实现属性的继承

在子类中也包含constroctor方法，在定义子类自身的属性之前（这个之前很重要噢），我们只需要使用super方法就能继承父类的属性！

class Son extends Father{
      constructor(name,age) {
          super(name);
          this.age = age;
      }
  }

如上面的代码所示，在子类的constroctor方法内部，我们先调用super函数：含义就是先调用父类的constroctor函数，然后再定义子类自己特有的属性name，我们来试试看有没有继承成功！

var son = new Son('提里昂',19);
son.getName();

打印结果：

这就说明子类成功继承了父类的name属性和getName方法！

3、结语

本次和大家分享了如何使用ES6的class关键字定义类以及如何实现类的继承！本次博客源码如下，觉得有用的请点个赞再走噢👍蟹蟹！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
  class Father{
      constructor(name) {
        this.name = name
      }
      getName(){
        console.log(this.name);
      }
  }
  var fa1 = new Father('泰温');
  var fa2 = new Father('奈德');
  console.log(fa1.getName == fa2.getName);

  class Son extends Father{
      constructor(name,age) {
          super(name);
          this.age = age;
      }
  }
  var son = new Son('提里昂',19);
  son.getName();

</script>
</body>
</html>

he1ll

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript高级（JS高级）03:ES6中类的实现

1、ES6中类的实现（1）使用class关键字定义Father类 ES6中为我们提供了class关键字专门用来定义一个类，下面我们就使用这种方法来定义一个简单的类：Father：class Father{ } 注意：Father后面没有()！（2）声明Father类实例和ES5相同，我们使用new关键字声明一个实例，这点没有变噢！var fa1 = new Father();（3）为Father类定义属性 ...
复制链接

扫一扫