前端经典面试题合集, ES5 中的类和 ES6 中的 class 有什么区别?
前端经典面试题合集, ES5 中的类和 ES6 中的 class 有什么区别?
QA
Step 1
Q:: ES5 中的类和 ES6 中的 class 有什么区别？
A:: ES5 中没有 class 关键字，类是通过函数构造器来实现的，通过原型链来实现继承。而在 ES6 中，引入了 class 关键字，提供了更清晰和简洁的语法来定义类。ES6 中的类是基于原型的语法糖，并没有引入新的面向对象继承模型。
Step 2
Q:: 如何在 ES5 中创建一个类？
A:: 在 ES5 中，类是通过函数构造器和原型链来创建的。例如：
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
console.log('Hello, ' + this.name);
};
Step 3
Q:: 如何在 ES6 中创建一个类？
A:: 在 ES6 中，可以使用 class 关键字来创建类。例如：
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log('Hello, ' + this.name);
}
}
Step 4
Q:: ES6 中的类和传统的构造函数有什么关系？
A:: ES6 中的类实际上是构造函数的语法糖。class 关键字在背后仍然使用原型机制来创建对象，因此与传统的构造函数和原型链并没有本质上的区别。
Step 5
Q:: ES6 中如何实现类的继承？
A:: 在 ES6 中，可以使用 extends 关键字来实现类的继承。例如：
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}
Step 6
Q:: 如何在 ES5 中实现类的继承？
A:: 在 ES5 中，可以通过构造函数和原型链来实现继承。例如：
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(this.name + ' makes a noise.');
};
function Dog(name) {
Animal.call(this, name);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
console.log(this.name + ' barks.');
};