JavaScript在ES6为什么引入了class关键字？

为什么引入class关键字

在JavaScript中，ES6引入了class关键字，使得JavaScript更加适合企业级开发，并且可以使用面向对象的编程方式。然而，需要明确的是，JavaScript并没有真正的类，它仍然基于原型式的面向对象编程。

在ES6之前，我们使用构造函数、原型对象和实例来创建对象。构造函数定义了对象的属性和方法，原型对象定义了共享的方法和属性，而实例是通过构造函数创建出的具体对象。

ES6中的class其实只是一种语法糖，它的底层仍然是基于构造函数、原型对象和实例的原型链。使用class关键字定义的类，会被转化为一个普通的构造函数。例如，下面的代码:

class Person {
    constructor(name) {
        this.name = name;
    }

    sayHello() {
        return `Hello, I am ${this.name}`;
    }
}

最终会被转化为以下形式：

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    return `Hello, I am ${this.name}`;
};

可以看到，class关键字只是用来声明构造函数和原型对象的语法糖。

class和function的不同点

但class和function还是有不同点在的。 在讲不同点之前，我们先来了解一下Object.keys()和Object.getOwnPropertyNames()这两个方法。

在原型对象上定义的方法，在使用Object.keys()方法时是不可被遍历的，因为它们是定义在原型链上的属性。但是可以使用Object.getOwnPropertyNames()方法获取实例对象自身的属性，包括方法和实例属性。

class和function的不同点就在于对这两个方法的调用结果是不同的

function 的示例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>      
        function Person(name){
            this.name = name
        }
        Person.prototype.sayHello = function(){
            return `hello , i am ${name}`
        }

        Person.prototype.des = 'dddd'
        const a = new Person('aaa');
        console.log(Object.getOwnPropertyNames(a), Object.keys(a));
        console.log(Person.prototype, Object.keys(Person.prototype))
        console.log(Object.getOwnPropertyNames(Person.prototype),Object.keys(Person.prototype));
    </script>
    
</body>
</html>

结果：

class 的示例：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        class Person{
            constructor(name) {
                this.name = name
            }
            sayHello () {
                return `hello , i am ${name}`
            }
        }

        Person.prototype.des = 'dddd'
        cconst a = new Person('aaa');
        console.log(Object.getOwnPropertyNames(a), Object.keys(a));
        console.log(Person.prototype, Object.keys(Person.prototype))
        console.log(Object.getOwnPropertyNames(Person.prototype),Object.keys(Person.prototype));
    </script>
    
</body>
</html>

结果：

结论：

使用class关键字定义的类原型上定义的方法无法被遍历，但使用function定义的构造函数原型上的方法却可以被遍历。

总结

对于ES6中的class关键字，它的意义在于提供了一种更加直观、易读的语法，使JavaScript更接近其他语言的面向对象编程方式。然而，底层的原型式的面向对象编程模型并没有改变。但有一些小细节需要格外注意。