Question

我有一个创建按钮的函数，当我调用此函数创建不同的按钮时，所有按钮最终都以某种方式合并。 2天前，我开始使用JS，并花了几个月的时间学习了AS3。 JS对我来说看起来很奇怪，我几乎不了解该语言背后的逻辑，但是人们告诉我AS3和JS非常相似！

我尝试过课，打电话给新学生，...到目前为止还算不上运气：/我的想法真的耗尽了，无论我读什么，都不会点击。

var definitions = new Definitions();
var btnCounter = 0;

var btnHighlight = private function (row, column, imageLink, variable, callF) {

    btnCounter++;

    name = "btnHl " + btnCounter;
    active = variable;
    defintions = definitions;
    callFunction = callF;

    button = new PIXI.Sprite(PIXI.Texture.from(imageLink));
    button.anchor.set(0.5);
    button.width = definitions.buttonIconSize;
    button.height = definitions.buttonIconSize;

    highlight = new PIXI.Sprite(PIXI.Texture.from('images/highlightGfx.png'));
    highlight.anchor.set(0.5);
    highlight.width = definitions.buttonHighlightSize;
    highlight.height = definitions.buttonHighlightSize;

    buttonContainer = new PIXI.Container();
    buttonContainer.buttonMode = true;
    buttonContainer.interactive = true;
    buttonContainer.buttonMode = true;
    buttonContainer.y = definitions.editorItemSize / 2 + definitions.editorItemSize * row;
    buttonContainer.x = definitions.editorItemSize / 2 + definitions.editorItemSize * column;
    buttonContainer.addChild(button);

    buttonContainer.on('pointerdown', onButtonDown = function () {
        if (active) {
            buttonContainer.removeChild(highlight);
            active = false;
        } else {
            active = true;
            buttonContainer.addChild(highlight);
        }
        if (callFunction != null) {
            callFunction();
        }
        console.log(name);
    });

    if (active == true) {
        buttonContainer.addChild(highlight);
    }

    return buttonContainer;
}

var testThis = function () {
    console.log("clicked");
    return this;
}

var btnDevicePhone = new btnHighlight(0, 0, 'images/transformGfx.png', true, testThis);
var btnDeviceTablette = new btnHighlight(0, 1, 'images/transformGfx.png', true, testThis);
var btnDeviceDesktop = new btnHighlight(1, 0, 'images/transformGfx.png', true, testThis);
var btnDeviceOrientation = new btnHighlight(1, 1, 'images/transformGfx.png', true, testThis);
var btnDrawSquare = new btnHighlight(2, 0, 'images/transformGfx.png', true, testThis);
var btnDrawCircle = new btnHighlight(2, 1, 'images/transformGfx.png', true, testThis);
var btnDropSquare = new btnHighlight(3, 0, 'images/transformGfx.png', true, testThis);
var btnDropCircle = new btnHighlight(3, 1, 'images/transformGfx.png', true, testThis);

app.stage.addChild(
    btnDevicePhone,
    btnDeviceTablette,
    btnDeviceDesktop,
    btnDeviceOrientation,
    btnDrawSquare,
    btnDrawCircle,
    btnDropSquare,
    btnDropCircle, );

Console.log始终为所有按钮打印相同的名称。不是所有的“新”调用都应该创建一个新对象？这是怎么回事？

Answer 1

这是答案的更详细示例：

// this is a constructor function
// it "stands by itself", so no 'new' keyword, no var before it
// pay attention to the "this" before the variables you want as public properties
// this is the "skeleton" for your buttons (like a "scaffold")
function btnHighlight(counter, nameBase) {
  this.counter = counter;
  this.nameBase = nameBase;
  this.name = function() {
    return this.nameBase + "_" + this.counter
  };
}

// mockup constructor function (stage) and object (app)
function stage() {
  this.addChild = function(item) {
    this.btns.push(item);
  }
  this.btns = [];
}

var app = {};

// this is just a mockup object
app.stage = new stage();

// creating 10 new buttons
for (i = 0; i < 10; i++) {
  // here the "new" keyword is used, as we create
  // a "new" button with every iteration
  var newBtn = new btnHighlight(i, "btnHl");
  // we add the new button to the stage
  // this "imitates" the app.stage.addChild()
  app.stage.addChild(newBtn);
}

// display the stage with the 10 buttons in the console
console.log("all the 10 buttons: ");
console.log(app.stage);

// or display just one button from the array - for example the fourth
// remember stage[0] is the first button!
console.log("the fourth button: ");
console.log(app.stage.btns[3]);

// or display just one button's name - for example the sixth
// see that "name" is a function, so it's called with parantheses after it
// remember stage[0] is the first button!
console.log("the sixth button's name: ");
console.log("sixth button's name: " + app.stage.btns[5].name());

// let's modify the second buttons nameBase property, and see that only that buttons name has changed:
app.stage.btns[1].nameBase = 'olive';
console.log("changed the second button's nameBase, so name is also changed: ");
app.stage.btns.forEach(item => console.log(item.name()))

所以您的代码看起来像这样：

var definitions = new Definitions();
var btnCounter = 0;

// the constructor function is created here
function btnHighlight(row, column, imageLink, variable, callF, btnCounter) {

  // properties are added, using "this"
  this.name = "btnHl " + btnCounter;
  this.active = variable;
  this.defintions = definitions;
  this.callFunction = callF;

  this.button = new PIXI.Sprite(PIXI.Texture.from(imageLink));
  button.anchor.set(0.5);
  button.width = definitions.buttonIconSize;
  button.height = definitions.buttonIconSize;

  this.highlight = new PIXI.Sprite(PIXI.Texture.from('images/highlightGfx.png'));
  highlight.anchor.set(0.5);
  highlight.width = definitions.buttonHighlightSize;
  highlight.height = definitions.buttonHighlightSize;

  this.buttonContainer = new PIXI.Container();
  buttonContainer.buttonMode = true;
  buttonContainer.interactive = true;
  buttonContainer.buttonMode = true;
  buttonContainer.y = definitions.editorItemSize / 2 + definitions.editorItemSize * row;
  buttonContainer.x = definitions.editorItemSize / 2 + definitions.editorItemSize * column;
  buttonContainer.addChild(button);

  buttonContainer.on('pointerdown', onButtonDown = function() {
    if (active) {
      buttonContainer.removeChild(highlight);
      active = false;
    } else {
      active = true;
      buttonContainer.addChild(highlight);
    }
    if (callFunction != null) {
      callFunction();
    }
    console.log(name);
  });

  if (active == true) {
    buttonContainer.addChild(highlight);
  }

  return buttonContainer;
}

var testThis = function() {
  console.log("clicked");
  return this;
}

// creating the buttons, and then incrementing the counter
var btnDevicePhone = new btnHighlight(0, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDeviceTablette = new btnHighlight(0, 1, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDeviceDesktop = new btnHighlight(1, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDeviceOrientation = new btnHighlight(1, 1, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDrawSquare = new btnHighlight(2, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDrawCircle = new btnHighlight(2, 1, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDropSquare = new btnHighlight(3, 0, 'images/transformGfx.png', true, testThis, btnCounter);
btnCounter++;
var btnDropCircle = new btnHighlight(3, 1, 'images/transformGfx.png', true, testThis, btnCounter);

// adding the buttons to the stage
app.stage.addChild(
  btnDevicePhone,
  btnDeviceTablette,
  btnDeviceDesktop,
  btnDeviceOrientation,
  btnDrawSquare,
  btnDrawCircle,
  btnDropSquare,
  btnDropCircle, );

我不确定，您在此处修改的代码是否没有错误（因为我无法对其进行测试），但是它应该可以正常工作。

编辑

最终答案可以在 codepen.io

上找到

https://codepen.io/mukagergely/pen/YbWBWR?editors=1111

如何使用相同的函数创建不同的对象？

1 个答案: