javascript - 如何创建共享某些属性的对象

Question

我正在 HTML5 Canvas 上制作一个 2D 游戏，其中有很多对象。一些对象彼此共享一些属性。某些属性仅适用于一个对象。对象可能具有空值属性。

我想创建一个具有所有对象属性的主对象。如果某个对象只具有主对象的 3 个属性，则其他属性将为空。

例如，假设游戏中任何对象的所有可能属性都是 {a,b,c,d,e,f,g} 并且游戏中有 2 个对象 ob0 & ob1.

ob0 的属性是 a、c、d，所以我只填充它们，其他属性 {b,e,f} 将为空。

ob1 的属性是 b、e、f，因此我只填充它们，其他属性 {a、c、d} 将为空。

我之所以想到这个演示文稿有两件事。首先，我不太擅长 OOP 和继承以及其他 OOP 事物。第二件事是大约2年前，在一款名为Red Alert2的游戏中，有一个.INI文件，文件中包含了游戏中的所有对象。数据是这样表示的

[obj1]
color=red
width=100px
cankill=yes
[obj2]
weapontype:4
canswim=yes
weapontype=4
speed=20

例如，属性cankill不在obj2中，并且obj2无法在游戏中杀死。但是，如果您给 obj2 这个属性并给它 weapontype=10 ，它将在游戏中使用游戏中的第 10 个武器杀死。这告诉我，如果一个属性没有值，则意味着在游戏中它的值将为零或??

我的问题来了。

1. 如何在 JS 中实现这一点？我的意思是我真的可以将 .INI 文件与 JS 连接起来吗？

2. 有没有更有效的方法来保存对象属性？我并不是要求用两页纸来描述这种方式。我只是想知道这一点的主要思想。

3. 我认为我对这个问题的解决方案会遇到尺寸过载的问题。如果游戏有 1000 个属性，则每个对象将由 1000 个属性组成，而对象只需要 4 或 5 个属性，这会对内存产生严重影响。怎么解决呢？

Answer 1

您可以使用 jQuery 或 Underscore 以及可能其他一些框架的扩展/默认方法。

但我认为扩展对象的最佳/最快方法是使用普通 javascript。

请看看这个SO question一个扩展方法。

在下面的演示和这个 jsFiddle 中我用 jQuery、Underscore 和纯 js 添加了它。 (jQuery 和 Underscore 代码已被注释掉。)

您可以找到这些方法的基准here 。 (我希望我已经正确创建了 jsperf 测试，因为这是我的第一个测试用例。)

对于您的问题:

1. 我建议将您的配置存储在 JSON 中文件，因为这样更容易为您的 JavaScript 加载。
2. 是的，我认为最好的方法是为您的属性使用原型(prototype)。因为原型(prototype)仅存储一次，而不是针对每个实例。
3. 如果您使用原型(prototype)应该没问题。因为对象实例仅获得较低的属性计数。

var GameObject = {
    // init and other methods can be defined here
};

GameObject.prototype = {
    color: undefined, // undefined properties will be removed by jQuery.extend
    canKill: undefined,
    width: undefined,
    speed: undefined,
    weaponType: undefined
};

// pure javascript extending
Object.prototype.extend = function (obj) {
    // source from this SO question: https://stackoverflow.com/questions/10430279/javascript-object-extending
    for (var i in obj) {
        if (obj.hasOwnProperty(i)) {
            this[i] = obj[i];
        }
    }
};

var ob1 = Object.create(GameObject);
ob1.extend({
    color: 'red',
    canKill: 'yes'
});

var ob2 = Object.create(GameObject);
ob2.extend({
    color: 'green',
    canKill: 'no',
    speed: 10
});

/*
// with underscore.defaults
var ob1 = _.defaults(Object.create(GameObject), {
    color: 'red',
    canKill: 'yes'
});

var ob2 = _.defaults(Object.create(GameObject), {
    color: 'green',
    canKill: 'no',
    speed: 10
});
*/

/*
// with jQuery.extend(...)
var ob1 = $.extend(true, Object.create(GameObject), { 
    // true = deep copy, new GameObject = target, source object
    color: 'red',
    canKill: 'yes'
});

var ob2 = $.extend(true, Object.create(GameObject), {
    color: 'green',
    canKill: 'no',
    speed: 10
});
*/

//console.log(ob1.prototype);
console.log(ob1, ob1.color, ob1.canKill);
console.log(ob2, ob2.color, ob2.canKill, ob2.speed);
//console.log(GameObject, GameObject.prototype);