数组中的JS对象如何返回自己的数组索引？[重复]

Question

每次单击画布时，这段代码都会创建矩形。然后将每个矩形对象推送到一个数组中。我希望创建的每个矩形在单击时都能够返回自己的数组索引。

我想用这个达到什么目的？

我的想法是一个带有GUI的软件，它允许创建带有输入和输出端口的模块/节点，并将它们与电线连接（如Max/MSP、Pure Data、Quartz Composer、Reaktor、NodeRed等）。为了能够将模块彼此连接，它们需要能够返回自己的ID，以便模块外部的函数能够连接它们。

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = new createModule();
  rectArray.push(newRect);
});

function createModule() {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;

  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    alert("clicked");
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
}
stage.draw(); // draw so we can see click rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

Answer 1

取决于您的需求。您可以将索引（等于推送数组之前的长度）提供给“构造函数”（即使您在这里没有真正创建对象 IMO）：

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = new createModule(rectArray.length);
  rectArray.push(newRect);
});

function createModule(index) {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;

  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    alert("clicked on " + index);
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
}
stage.draw(); // draw so we can see click rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>

Answer 2

首先：您需要在createMoules函数中返回创建的rect。调用该函数时不应该需要new关键字。

然后你就可以像rectArray.indexOf（evt.target）一样查询点击的rect的索引

var width = window.innerWidth - 50;
var height = window.innerHeight - 100;

var rectArray = [];

var stage = new Konva.Stage({
  container: 'container',
  width: width,
  height: height
});

var layer = new Konva.Layer();
stage.add(layer);

var clickRect = new Konva.Rect({ // clickable background
  x: 0,
  y: 0,
  width: width,
  height: height,
  stroke: 'black',
  strokeWidth: 2,
  listening: 'true'
})
layer.add(clickRect);

var text = new Konva.Text({ //text to display info
  x: 10,
  y: 10,
  fontFamily: 'Calibri',
  fontSize: 24,
  text: '',
  fill: 'black'
});

clickRect.on('click', function() { /// here we create a module
  var newRect = createModule();
  rectArray.push(newRect);
});

function createModule() {
  var mouseX = stage.getPointerPosition().x;
  var mouseY = stage.getPointerPosition().y;

  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    alert(rectArray.indexOf(evt.target));
  })

  text.setText(rectArray.length + 1);
  layer.add(text);
  layer.add(rect);
  stage.add(layer);
  return rect;
}
stage.draw(); // draw so we can see click rect.

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
<p id="display1">-</p>