特定原型上的对象原型答案

【问题标题】：Object prototype on a specific prototype特定原型上的对象原型
【发布时间】：2012-11-18 05:18:34
【问题描述】：

如何仅为特定对象类型扩展对象类型？我不希望使用 object.color() 与另一个库发生冲突。目前，我正在使用：

function random_int(start,end) {
    return Math.floor(Math.random()*(end-start+1)+start);
}
var balls = function balls (context) {
    this.canvas = context.canvas;
    this.context = context;
}
Object.prototype.ball = function ball() { }
balls.prototype.add = function () {
  this.context.fillStyle = '#ABC123';
  this.radius = 15;
  this.x = random_int(this.radius+1,this.canvas.width-this.radius-1);
  this.y = random_int(this.radius+1,this.canvas.height-this.radius-1);
  return this;
}
Object.prototype.draw = function () {
  this.context.beginPath();
  this.context.arc(this.x, this.y, this.radius, 0, (Math.PI/180)*360, false);
  this.context.fill();
  this.context.closePath();
}
balls.prototype.redraw = function () {
    this.context.save();
    this.context.setTransform(1, 0, 0, 1, 0, 0);
    this.context.clearRect(0, 0, canvas.width, canvas.height);
    this.context.restore();
    this.draw();
}
Object.prototype.color = function (col) {
    this.context.fillStyle = col;
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.canvas.width  = window.innerWidth*0.9;
context.canvas.height = window.innerHeight*0.9;
var Balls = new balls(context);
for (var i = 0; i<10;i++) {
    var b = Balls.add();
    b.color("#"+((1<<24)*Math.random()|0).toString(16));
    b.draw();
}

jsfiddle：http://jsfiddle.net/hNy3r/1/

使用两个类，因为我打算稍后循环遍历 Balls 类中的每个球。

【问题讨论】：

为什么需要扩展基本的Object？它是 JS 中 everything 的基类，包括字符串、数字等。所以你的代码会变得非常混乱。定义您自己的MyObject（或独特的东西）并将其用作其他东西（如 Ball）的基础。将所有内容放在一个大对象中创建命名空间类似物也是一种好习惯。

标签： javascript oop object prototype

【解决方案1】：

如果您不想发生冲突，为什么不使用自己的范围，为什么需要扩展 Object ？

$(document).ready(function () {
    function random_int(start,end) {
        return Math.floor(Math.random()*(end-start+1)+start);
    }
    var balls = function balls (context) {
        this.canvas = context.canvas;
        this.context = context;
    
    this.ball = function () { return this; }
    this.add = function () {
      this.context.fillStyle = '#ABC123';
      this.radius = 15;
      this.x = random_int(this.radius+1,this.canvas.width-this.radius-1);
      this.y = random_int(this.radius+1,this.canvas.height-this.radius-1);
      return this;
    }
    this.draw = function () {
      this.context.beginPath();
      this.context.arc(this.x, this.y, this.radius, 0, (Math.PI/180)*360, false);
      this.context.fill();
      this.context.closePath();
    }
    this.redraw = function () {
        this.context.save();
        this.context.setTransform(1, 0, 0, 1, 0, 0);
        this.context.clearRect(0, 0, canvas.width, canvas.height);
        this.context.restore();
        this.draw();
    }
    this.color = function (col) {
        this.context.fillStyle = col;
    }
    }
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.canvas.width  = window.innerWidth*0.9;
    context.canvas.height = window.innerHeight*0.9;
    var Balls = new balls(context);
    for (var i = 0; i<10;i++) {
        var b = Balls.add();
        b.color("#"+((1<<24)*Math.random()|0).toString(16));
        b.draw();
    }
});

sample

【讨论】：

在您的示例中包含更多内容，以查看真正的问题，顺便说一句，javascript 没有类，我真的不建议扩展 Object
这是覆盖 this，我需要它是分开的，所以如果有意义的话，我可以有不同的 b
我不明白你，this 是私有特殊变量，我在哪里覆盖它？为您的示例添加更多代码。
你的范围很古怪。反正我现在已经解决了。看我的回答。
你听说过私有财产吗？

【解决方案2】：

最终这样做：

function random_int(start, end) {
    return Math.floor(Math.random() * (end - start + 1) + start);
}
var balls = function balls(context) {
    this.context = context;
    this.add = function () {
        return new ball(context);
    }
}
Object.prototype.ball = function ball(context) {
                this.context = context;
                this.canvas = context.canvas;
    this.context.fillStyle = '#ABC123';
    this.radius = 15;
    this.x = random_int(this.radius + 1, this.canvas.width - this.radius - 1);
    this.y = random_int(this.radius + 1, this.canvas.height - this.radius - 1);
    this.draw = function () {
        this.context.beginPath();
        this.context.arc(this.x, this.y, this.radius, 0, (Math.PI / 180) * 360, false);
        this.context.fill();
        this.context.closePath();
    }
    this.redraw = function () {
        this.context.save();
        this.context.setTransform(1, 0, 0, 1, 0, 0);
        this.context.clearRect(0, 0, canvas.width, canvas.height);
        this.context.restore();
        this.draw();
    }
    this.color = function (col) {
        this.context.fillStyle = col;
    }
    return this;
}
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.canvas.width = window.innerWidth * 0.9;
context.canvas.height = window.innerHeight * 0.9;
var Balls = new balls(context);
for (var i = 0; i < 10; i++) {
    var b = Balls.add();
    b.color("#" + ((1 << 24) * Math.random() | 0).toString(16));
    b.draw();
}

从balls内部调用new ball()

【讨论】：