JavaScript function parameter - Beginner Question

问题

I am new to JavaScript and coming from Python. I am having a hard time to understand where the 'rect' is coming from and how it is passed in the following script (that I took from tracking.js): Any help would be really appreciated and I believe this question would probably also help any other coming from Python.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>tracking.js - first tracking</title>
  <script src="../build/tracking-min.js"></script>
</head>
<body>
  <video id="myVideo" width="400" height="300" preload autoplay loop muted></video>
  <script>
  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track('#myVideo', colors);
  </script>
</body>
</html>

回答1:

When you call forEach on an array, the code in forEach calls the function you pass it "for each" entry in the array, passing the entry to the function (along with a couple of other things). So rect is each entry in the array, in order.

Internally, leaving out some details, forEach looks about like this:

function forEach(callback) {
    // Here, `this` is the array `forEach` was called on
    for (let index = 0, len = this.length; index < len; ++index) {
        callback(this[index], index, this);
//               ^^^^^^^^^^^--- this is received by your callback as `rect`
    }
}

(One of the main details I left out for clarity is forEach's thisArg and calling callback with a specific this value.)

Live example logging each step:

function pseudoForEach(callback) {
    console.log("Start of pseudoForEach");
    for (let index = 0, len = this.length; index < len; ++index) {
        console.log(
            "Calling callback with: this[index] = " + this[index] +
            ", index = " + index + ", and this = (the array)"
        );
        callback(this[index], index, this);
    }
    console.log("End of pseudoForEach");
}

Object.defineProperty(Array.prototype, "pseudoForEach", {
    value: pseudoForEach,
    configurable: true,
    writable: true
});

var a = ["one", "two", "three"];
console.log("About to call pseudoForEach");
a.pseudoForEach(function(rect) {
    console.log("In callback, rect = " + rect);
});
console.log("Done with pseudoForEach call");

.as-console-wrapper {
  max-height: 100% !important;
}

I second Jaromanda X's recommendation, MDN is a good resource for JavaScript information (and HTML and CSS).

回答2:

The rect variable represents an item in your array event.data.

When the .forEach() method is called on the array (event.data), this method is internally iterating each item of the array, and, during each iteration, passing that current array item to a callback function that you supply which in your case is the function:

function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
}

So, rect is the current item of the current iteration of event.data. Hope that helps!

回答3:

'rect' is name for item you return by iterating with forEach. You can call it whatever you want, it just so happened someone called it rect.

you can call it anything you want

arr.forEach(name ()=> console.log(name))
arr.forEach(yourDogsName ()=> yourDogsName.height)

来源：https://stackoverflow.com/questions/52677916/javascript-function-parameter-beginner-question

标签

javascript

javascript-events