前端面试题_10_ES6的class有哪些特性？

最新推荐文章于 2024-04-10 08:29:29 发布

PE7ERJ

最新推荐文章于 2024-04-10 08:29:29 发布

阅读量709

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/weixin_42162265/article/details/110306285

版权

本文探讨了ES6中class的引入，作为构造函数的语法糖，提供了比ES5更清晰的对象定义方式。class本质是function，其特点包括：清晰的写法、没有原型对象的构造函数、方法不可枚举、必须使用new调用以及无法重写类名。通过实例代码对比，展示了ES6 class与ES5构造函数的区别。

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

ES5/ES6的定义对象的区别

class基本概念
在JS里面，它实际上是没有类的概念的，我们如果想要实现一个面向对象的一个编程，那么只能够借助构造函数，但是构造函数有着自身的缺点，首先第一点它的写法不清晰，我们需要继承的话就需要手动去操作prototype；其次它面向对象的思想也不是很强烈，所以在ES6它封装了一层构造函数的语法糖，就叫Class,封装后有了一个更清晰的写法，而且更加像一个面向对象编程语言。

类是对象的抽象，对象是类的实例

class（类）作为对象的模板被引入，可以通过class关键字定义类。
class的本质是function。
它可以看做是一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语言。

区别1：更加清晰的写法

在ES5中：

<script>
    function Position(x,y){
   
        this.x = x;
        this.y = y;
    }
    const position = new Position(1,1);
</script>

在这里插入图片描述
在ES6中：
在ES6中，首先有一个class修饰符，class将告诉我们编辑器声明了一个名叫Position的class。class是构造函数的语法糖，我们怎么来看呢？我们可以看一下这个构造函数它的prototype的constructor是否是本身，如果是本身那就说明class的行为跟构造函数是保持一致的。

<script>
    class Position{
   
        constructor(x,y){
   
            this.x = x;
            this.y = y;
        }
    }
    const position = new Position(1,1);
</script>
<