ES6 Class与ES5面向对象的区别

131 阅读2分钟

ES6 Class与ES5面向对象的区别

ES6引入了Class语法糖,为JavaScript提供了更简洁和易读的面向对象编程(OOP)语法。与ES5中使用原型和构造函数的方式相比,ES6的Class语法糖有以下区别:

1. 语法简洁性

ES6的Class语法更加简洁易读,更接近于传统面向对象编程的语法。使用class关键字定义类,使用constructor方法定义构造函数,而不需要显式地操作原型对象。

ES6 Class 示例:

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

  sayHello() {
    console.log(`Hello, ${this.name}!`);
  }
}

const person = new Person('John');
person.sayHello();

ES5面向对象 示例:

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

Person.prototype.sayHello = function() {
  console.log('Hello, ' + this.name + '!');
};

var person = new Person('John');
person.sayHello();

2. 构造函数定义

在ES5中,通过定义构造函数和原型对象的方法来创建对象。而在ES6中,可以直接在类中使用constructor方法定义构造函数,不需要手动创建原型对象。

3. 类的继承

在ES5中,实现类的继承需要通过原型链和原型继承来实现。而ES6中的Class语法糖提供了更直观的继承方式,通过使用extends关键字来实现类的继承,子类可以继承父类的属性和方法。

ES6 Class 继承 示例:

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

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Buddy');
dog.speak(); // Output: "Buddy barks."

ES5原型继承 示例:

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

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a sound.');
};

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.');
};

var dog = new Dog('Buddy');
dog.speak(); // Output: "Buddy barks."

4. 静态方法和属性

在ES6的Class中,可以使用static关键字定义静态方法和属性。静态方法和属性属于类本身,而不是类的实例。在ES5中实现静态方法和属性需要手动将它们添加到构造函数上。

ES6 Class 静态方法 示例:

class MathUtils {
  static sum(a, b) {
    return a + b;
  }
}

console.log(MathUtils.sum(5, 

3)); // Output: 8

ES5静态方法 示例:

function MathUtils() {}

MathUtils.sum = function(a, b) {
  return a + b;
};

console.log(MathUtils.sum(5, 3)); // Output: 8

5. 更好的封装性

在ES6的Class中,可以使用publicprivateprotected等访问修饰符来控制类的属性和方法的访问级别。这提供了更好的封装性,可以隐藏内部实现细节,只暴露必要的接口。

ES6 Class 封装性 示例:

class Person {
  #name; // Private field

  constructor(name) {
    this.#name = name; // Private field
  }

  getName() {
    return this.#name; // Private field
  }
}

const person = new Person('John');
console.log(person.getName()); // Output: "John"
console.log(person.#name); // Error: Private field '#name' must be declared in an enclosing class

ES6 Class相较于ES5面向对象编程,提供了更简洁和易读的语法,使得面向对象编程在JavaScript中更加直观和方便。然而,无论是使用ES6的Class语法还是ES5的原型和构造函数,它们都可以实现相同的面向对象编程功能。选择使用哪种方式取决于个人或团队的偏好和项目的需求。