简述ES6 的 class 和构造函数的区别 ?
ES6的class
是JavaScript中实现面向对象编程的新语法糖,它的背后仍然是基于原型的继承。class
提供了更清晰、更简单的语法来创建对象和处理继承。而在ES6之前,我们通常使用构造函数来创建对象和实现继承。
以下是关于class
和构造函数的一些主要区别:
- 语法:
class
的语法更简洁、更直观。构造函数的语法相对较复杂,特别是在处理继承时,需要使用prototype
属性和new
关键字。 -
继承:在
class
中,我们使用extends
关键字来实现继承,而在构造函数中,我们需要手动操作prototype
来实现继承。 -
方法定义:在
class
中,我们可以直接在类的内部定义方法,而在构造函数中,我们需要在prototype
对象上添加方法。 -
严格模式:
class
总是在严格模式下运行,而构造函数则不是。 -
可见性:
class
中的所有方法都是可枚举的,而构造函数的方法则不是。
以下是两者的使用示例:
使用构造函数:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log('Hello, I am ' + this.name);
}
var person = new Person('Tom', 20);
person.sayHello(); // 输出:Hello, I am Tom
使用class
:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, I am ${this.name}`);
}
}
let person = new Person('Tom', 20);
person.sayHello(); // 输出:Hello, I am Tom
总的来说,class
相比于构造函数,提供了更简洁、更直观的语法,使得代码更易于理解和维护。