前端面向对象编程之ES5语法ES6语法详解

前端面向对象编程是现代Web开发中不可或缺的技术手段之一。其中ES5语法和ES6语法是主流的两种面向对象编程语法。

ES5语法详解

ES5是JavaScript的一个版本，主要添加了许多面向对象编程的语法特性，如定义类、创建对象和实现原型继承等。

定义类

在ES5中，我们可以使用function来定义一个类，以下是一个例子：

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

Person.prototype.getAge = function() {
  return this.age;
};

这个类的名字是Person，它接受两个参数name和age，并通过this关键字将它们做了属性绑定。它还定义了一个名为getAge的方法。

创建对象

我们可以使用new操作符来创建一个类的实例，如下所示：

var person1 = new Person("Tom", 20);

这将创建一个名为person1的对象，它是Person类的一个实例，具有名为name和age的属性，还具有getAge方法。

实现原型继承

在ES5中，我们可以通过原型继承来实现对象间的继承关系，如下所示：

function Student(name, age, grade) {
  Person.call(this, name, age);
  this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);
Student.prototype.getGrade = function() {
  return this.grade;
};

在这个例子中，Student类从Person类继承了name和age属性，并添加了一个名为grade的属性。它还定义了一个名为getGrade的方法。

我们使用Object.create方法将Student类的原型链指向Person类的原型链，从而实现了原型继承。

ES6语法详解

ES6是JavaScript的一个较新版本，添加了许多新的面向对象编程的语法特性，包括更为简洁的类定义和实现，还有更强大的继承功能。

定义类

在ES6中，我们可以使用class来更为简洁地定义一个类，如下所示：

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

  getAge() {
    return this.age;
  }
}

与ES5中的定义类方式相比，ES6使用了更为简洁的语法。我们使用constructor来初始化类的属性，使用getAge来定义一个名为getAge的方法。

创建对象

我们可以使用new操作符来创建一个类的实例，如下所示：

let person1 = new Person("Tom", 20);

这将创建一个名为person1的对象，它是Person类的一个实例， 具有名为name和age的属性，还具有getAge方法。

实现继承

在ES6中，我们可以使用extends关键字来实现一个类对另一个类的继承，如下所示：

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }

  getGrade() {
    return this.grade;
  }
}

在这个例子中，Student类从Person类继承了name和age属性，并添加了一个名为grade的属性。它还定义了一个名为getGrade的方法。

我们使用extends关键字将Student类指向Person类，从而实现了继承。

示例说明

以下是一个简单的示例，展示了如何定义类、创建对象和继承：

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

  speak() {
    console.log(`The ${this.constructor.name} ${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let dog1 = new Dog("Rufus");
dog1.speak();  // "Rufus barks."

在这个示例中，我们首先定义了一个名为Animal的类，它有一个name属性和一个名为speak的方法。

然后，我们又定义了一个名为Dog的类，它从Animal类继承了name属性，并将speak方法进行了覆盖。

最后，我们创建了一个名为dog1的Dog类的实例，并调用了它的speak方法。

另一个示例是实现一个简单的游戏，如下所示：

class Character {
  constructor(name, health, strength) {
    this.name = name;
    this.health = health;
    this.strength = strength;
  }

  attack(target) {
    target.health -= this.strength;
    console.log(`${this.name} attacks ${target.name} and deals ${this.strength} damage.`);

    if (target.health <= 0) {
      console.log(`${target.name} has died.`);
    }
  }
}

class Player extends Character {
  constructor(name, health, strength, gold) {
    super(name, health, strength);
    this.gold = gold;
  }

  pickupGold(gold) {
    this.gold += gold;
    console.log(`${this.name} picked up ${gold} gold.`);
  }
}

class Enemy extends Character {
  constructor(name, health, strength, reward) {
    super(name, health, strength);
    this.reward = reward;
  }

  deathReward() {
    console.log(`${this.name} was killed and dropped ${this.reward} gold.`);
    return this.reward;
  }
}

let player1 = new Player("Bob", 100, 10, 0);
let enemy1 = new Enemy("Goblin", 50, 8, 20);

player1.attack(enemy1);
enemy1.attack(player1);
player1.pickupGold(enemy1.deathReward());

在这个示例中，我们定义了三个类：Character、Player和Enemy。

Character类定义了一个角色，并具有攻击（attack）方法。它被Player和Enemy类继承。

Player类从Character类继承，并添加一个名为pickupGold的方法。

Enemy类从Character类继承，并添加一个名为deathReward的方法。

我们创建了一个名为player1的Player类实例和一个名为enemy1的Enemy类实例，然后进行了一系列交互，测试它们的攻击、拾取金币和死亡奖励等功能。