数组中的 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

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

然后你可以像rectArray.indexOf(evt.target)一样查询点击的矩形的索引

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>

Answer 2

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

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>

但是，如果您的数组正在被修改，那么您应该跟踪对象的实例 (var self = this;) 并在 rectArray 上使用 indexOf 来动态查找其索引：

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 self = this;
  
  var rect = new Konva.Rect({
    x: mouseX,
    y: mouseY,
    width: 50,
    height: 50,
    stroke: 'black',
    strokeWidth: 2,
    draggable: true
  });

  rect.on('click', function(evt) {
    var index = rectArray.indexOf(self);
    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>