简体   繁体   中英

Unclear syntax with function parameters in javascript

I am reading open layers documentation which can be found at this link , but I do not understand something about syntax.

There is a part of the code which goes like this:

function flickrStyle(feature) {
      //where does this feature come from?
      var style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'green'
          })
        })
      });
      return [style];
    }

    var flickrLayer = new ol.layer.Vector({
      style: flickrStyle //??? where is parameter which needs to be sent? Should this be something like flickrStyle(someParam)
    });

As you can see, source is extracted from flickrStyle function, which obviously requires feature parameter, but I can't see anywhere in code that parameter is actually sent.

How does this work?

It's a bit clearer if you format it reasonably and consistently (as is often the case):

function flickrStyle(feature) {
    //where does this feature come from?
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: 'white',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'green'
            })
        })
    });
    return [style];
}

var flickrLayer = new ol.layer.Vector({
    style: flickrStyle //??? where is parameter which needs to be sent? Should this be something like flickrStyle(someParam)
});

The style: flickrStyle property in the object being passed to ol.layer.Vector is passing the function reference itself, not a call to it. Looking at the ol.layer.Vector documentation , ol.layer.Vector knows to call the function (passing in an argument for the feature parameter) if/when necessary.

Apparently that particular function doesn't use the feature parameter (and could have just omitted it from the parameter list), but perhaps the author left it there because it does get passed a value for that parameter (per the StyleFunction docs linked from the docs above) and the function may be edited to use it later.

Here's a simpler example of the same sort of thing:

 // Stand-in for ol.layer.Vector class Foo { constructor(options) { this.style = options.style; this.counter = 0; } addElement() { const div = document.createElement("div"); ++this.counter; div.innerHTML = "Div #" + this.counter; if (typeof this.style === "function") { this.style(div); // <=== This is like ol.layer.Vector's call to the function } document.body.appendChild(div); } } // Our style function function ourStyleFunction(element) { element.style.color = Math.random() < 0.5 ? "blue" : "green"; element.style.fontWeight = "bold"; } // Creating an object passing in that function as an option const f = new Foo({ style: ourStyleFunction }); // Doing something with it that makes it call the function f.addElement(); f.addElement(); f.addElement(); f.addElement(); 

You're right, feature isn't used in that method.

var flickrLayer = new ol.layer.Vector({
    style: flickrStyle // this is a function reference, so the Vector class will call it with a given parameter (probably "feature")
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM