为什么引入class关键字
在JavaScript中,ES6引入了class关键字,使得JavaScript更加适合企业级开发,并且可以使用面向对象的编程方式。然而,需要明确的是,JavaScript并没有真正的类,它仍然基于原型式的面向对象编程。
在ES6之前,我们使用构造函数、原型对象和实例来创建对象。构造函数定义了对象的属性和方法,原型对象定义了共享的方法和属性,而实例是通过构造函数创建出的具体对象。
ES6中的class其实只是一种语法糖,它的底层仍然是基于构造函数、原型对象和实例的原型链。使用class关键字定义的类,会被转化为一个普通的构造函数。例如,下面的代码:
javascript
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return `Hello, I am ${this.name}`;
}
}
最终会被转化为以下形式:
javascript
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 的示例:
代码:
xml
<!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 的示例:
代码:
xml
<!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更接近其他语言的面向对象编程方式。然而,底层的原型式的面向对象编程模型并没有改变。但有一些小细节需要格外注意。