这和javascript中的闭包（在paper.js中工作）

Question

I'm still wrapping my head around closures.

I'm working on a project using Paper.js and paperscript . I am trying to create line segments with a distance metric that stays in the center of the segment as it is moved.

Instead of simply writing code to move the center and the line separately (which would be pretty simple), I've been seeing whether it could be possible to move the line and have the center follow.

This is proving difficult. There may be several problems with it, but right now this is my current bugaboo. They way I have it set up now, this refers to the global object when the function is called, which of course not what I want. But I can't figure out how to create what I want, which is of course a baked-in reference from the 'weight' element to the 'line' element.

How do I do this correctly?

edge = new Group({
    children: [
        new Path.Line({
            from: gn.position,
            to: event.point,
            strokeColor: 'maroon',
            name: 'line'
        }),
        new PointText(function (){
            return {
                position: function () {
                    return this.previousSibling.position;
                }(),
                content: function () {
                    return this.previousSibling.length.toString();
                }(),
                name: 'weight'
            }
        }())
    ]
});

Answer 1

In order to give a better structure, and bind a this reference, you can start defining a constructor function:

function PointTextContent(name) {
  this.position = function () {
    return this.previousSibling.position;
  }.bind(this);
  this.content = function () {
    return this.previousSibling.length.toString();
  }.bind(this);
  this.name = name;

  PointText.call(this, this);
}

PointTextContent.prototype = PointText;

Then change your code to instantiate your new object.

edge = new Group({
    children: [
        new Path.Line({
            from: gn.position,
            to: event.point,
            strokeColor: 'maroon',
            name: 'line'
        }),
        new PointTextContent('weight')
    ]
});

NOTE: I changed position and content to become functions, I see they were immediately invoked in your original code.