JavaScript 游戏中的面向对象的设计


		简介： 从程序角度考虑，许多 JavaScript 都基于循环和大量的 if/else 语句。在本文中，我们可了解一种更聪明的做法 — 在 JavaScript 游戏中使用面向对象来设计。本文将概述原型继承和使用 JavaScript 实现基本的面向对象的编程 (OOP)。学习如何在 JavaScript 中使用基于经典继承的库从 OOP 中获得更多的好处。本文还将介绍架构式设计模式，来展示了如何使用游戏循环、状态机和事件冒泡 (event bubbling) 示例来编写更整洁的代码。
在本文中，您将了解 JavaScript 中的 OOP，来探索原型继承模型和经典继承模型。举例说明游戏中能够从 OOP 设计的结构和可维护性中获得极大利益的模式。我们的最终目标是让每一块代码都成为人类可读的代码，并代表一种想法和一个目的，这些代码的结合超越了指令和算法的集合，成为一个精致的艺术品。
 
JavaScript 中的 OPP 的概述
OOP 的目标就是提供数据抽象、模块化、封装、多态性和继承。通过 OOP，您可以在代码编写中抽象化代码的理念，从而提供优雅、可重用和可读的代码，但这会消耗文件计数、行计数和性能（如果管理不善）。
过去，游戏开发人员往往会避开纯 OOP 方式，以便充分利用 CPU 周期的性能。很多 JavaScript 游戏教程采用的都是非 OOP 方式，希望能够提供一个快速演示，而不是提供一种坚实的基础。与其他游戏的开发人员相比，JavaScript 开发人员面临不同的问题：内存是非手动管理的，且 JavaScript 文件在全局的上下文环境中执行，这样一来，无头绪的代码、命名空间的冲突和迷宫式的 if/else 语句可能会导致可维护性的噩梦。为了从 JavaScript 游戏的开发中获得最大的益处，请遵循 OOP 的最佳实践，显著提高未来的可维护性、开发进度和游戏的表现能力。
原型继承
与使用经典继承的语言不同，在 JavaScript 中，没有内置的类结构。函数是 JavaScript 世界的一级公民，并且，与所有用户定义的对象类似，它们也有原型。用 new 关键字调用函数实际上会创建该函数的一个原型对象副本，并使用该对象作为该函数中的关键字 this的上下文。清单 1 给出了一个例子。
清单 1. 用原型构建一个对象
 
// constructor function
function MyExample() {
  // property of an instance when used with the 'new' keyword
  this.isTrue = true;
};
 
MyExample.prototype.getTrue = function() {
  return this.isTrue;
}
 
MyExample();
// here, MyExample was called in the global context, 
// so the window object now has an isTrue property—this is NOT a good practice
 
MyExample.getTrue;
// this is undefined—the getTrue method is a part of the MyExample prototype, 
// not the function itself
 
var example = new MyExample();
// example is now an object whose prototype is MyExample.prototype
 
example.getTrue; // evaluates to a function
example.getTrue(); // evaluates to true because isTrue is a property of the 
                   // example instance
依照惯例，代表某个类的函数应该以大写字母开头，这表示它是一个构造函数。该名称应该能够代表它所创建的数据结构。
创建类实例的秘诀在于综合新的关键字和原型对象。原型对象可以同时拥有方法和属性，如 清单 2 所示。
清单 2. 通过原型化的简单继承
 
// Base class
function Character() {};
 
Character.prototype.health = 100;
 
Character.prototype.getHealth = function() {
  return this.health;
}
 
// Inherited classes
 
function Player() {
  this.health = 200;
}
 
Player.prototype = new Character;
 
function Monster() {}
 
Monster.prototype = new Character;
 
var player1 = new Player();
 
var monster1 = new Monster();
 
player1.getHealth(); // 200- assigned in constructor
 
monster1.getHealth(); // 100- inherited from the prototype object
为一个子类分配一个父类需要调用 new 并将结果分配给子类的 prototype 属性，如 清单 3 所示。因此，明智的做法是保持构造函数尽可能的简洁和无副作用，除非您想要传递类定义中的默认值。
如果您已经开始尝试在 JavaScript 中定义类和继承，那么您可能已经意识到该语言与经典 OOP 语言的一个重要区别：如果已经覆盖这些方法，那么没有 super 或 parent 属性可用来访问父对象的方法。对此有一个简单的解决方案，但该解决方案违背了 “不要重复自己 (DRY)” 原则，而且很有可能是如今有很多库试图模仿经典继承的最重要的原因。
清单 3. 从子类调用父方法
 
function ParentClass() {
  this.color = 'red';
  this.shape = 'square';
}
 
function ChildClass() {
  ParentClass.call(this);  // use 'call' or 'apply' and pass in the child 
                           // class's context
  this.shape = 'circle';
}
 
ChildClass.prototype = new ParentClass(); // ChildClass inherits from ParentClass
 
ChildClass.prototype.getColor = function() {
  return this.color; // returns "red" from the inherited property
};
在 清单 3 中， color 和 shape 属性值都不在原型中，它们在 ParentClass 构造函数中赋值。ChildClass 的新实例将会为其形状属性赋值两次：一次作为 ParentClass 构造函数中的 “squre”，一次作为 ChildClass 构造函数中的 “circle”。将类似这些赋值的逻辑移动到原型将会减少副作用，让代码变得更容易维护。
在原型继承模型中，可以使用 JavaScript 的 call 或 apply 方法来运行具有不同上下文的函数。虽然这种做法十分有效，可以替代其他语言的 super 或 parent，但它带来了新的问题。如果需要通过更改某个类的名称、它的父类或父类的名称来重构这个类，那么现在您的文本文件中的很多地方都有了这个 ParentClass 。随着您的类越来越复杂，这类问题也会不断增长。更好的一个解决方案是让您的类扩展一个基类，使代码减少重复，尤其在重新创建经典继承时。
经典继承
虽然原型继承对于 OOP 是完全可行的，但它无法满足优秀编程的某些目标。比如如下这些问题：
● 它不是 DRY 的。类名称和原型随处重复，让读和重构变得更为困难。
● 构造函数在原型化期间调用。一旦开始子类化，就将不能使用构造函数中的一些逻辑。
● 没有为强封装提供真正的支持。
● 没有为静态类成员提供真正的支持。
很多 JavaScript 库试图实现更经典的 OOP 语法来解决上述问题。其中一个更容易使用的库是 Dean Edward 的 Base.js（请参阅 参考资料），它提供了下列有用特性：
● 所有原型化都是用对象组合（可以在一条语句中定义类和子类）完成的。
● 用一个特殊的构造函数为将在创建新的类实例时运行的逻辑提供一个安全之所。
● 它提供了静态类成员支持。
● 它对强封装的贡献止步于让类定义保持在一条语句内（精神封装，而非代码封装）。
其他库可以提供对公共和私有方法和属性（封装）的更严格支持，Base.js 提供了一个简洁、易用、易记的语法。
清单 4 给出了对 Base.js 和经典继承的简介。该示例用一个更为具体的 RobotEnemy 类扩展了抽象 Enemy 类的特性。
清单 4. 对 Base.js 和经典继承的简介
 
// create an abstract, basic class for all enemies
// the object used in the .extend() method is the prototype
var Enemy = Base.extend({
    health: 0,
    damage: 0,
    isEnemy: true,
 
    constructor: function() {
        // this is called every time you use "new"
    },
 
    attack: function(player) {
        player.hit(this.damage); // "this" is your enemy!
  &nb

补充：web前端 , JavaScript ,