如何在javascript中正确调用原型函数？ [英] How to call prototype functions correctly in javascript?

问题描述

我在命名空间RHCA中定义了一个名为Map的对象。 Map的原型被分配了一个包含以下方法的对象。

I have the following code with an object called Map defined in a namespace RHCA. Map's prototype is assigned an object containing the following methods.

RHCA.Map = function(centerCoords){
    this.geojson = null;
    this.map = null;
    this.initZoom = 0;
    this.mapColors = [];
    this.mapCenter = centerCoords.slice(0);
    this.geoJsonProperty = null;
    this.dataFieldsMap;
};

RHCA.Map.prototype = {
	setColorRange :function(population){
    	        console.log(this);
		
		var color; // set color according to population value
		... 		

		return  color
	},

	setStyle : function(feature){
    	    console.log(this);
    	    var population =  feature.properties.pop10;
    
    	    var countyColor = this.setColorRange(population);
    	    return {
        	fillColor: countyColor,
        	weight: 0.5,
        	opacity: 1,
        	color: '#4e4e4e',
        	fillOpacity: 0.9,
        	fillRule: 'evenodd',
        	className:'svg-custom'
    	    };
	},

	
	render : function (){
    	     console.log(this);
    	     var self  = this;
    	     var southWest = L.latLng(20.0, -114.0);
    	     var northEast = L.latLng(40.0,-88.0);
    	     var boundRect = L.latLngBounds(southWest, northEast);
    
    	     self.initZoom = self.setZoomLevel();
    
    	     // map object with options
    	     self.map = L.map('map',{
        	center: self.mapCenter,
        	zoom: self.initZoom,
        	maxZoom: self.initZoom+2,
        	minZoom: self.initZoom-0.25,
        	// maxBounds: boundRect,
        	zoomControl:true,
        	reUseTiles:true,
        	unloadInvisibleTiles:true
    	    });
    
    	   // create geojson layer and add it to map   
    	   self.geojson = L.geoJson(countyBoundaries,{
        	style: self.setStyle,
        	onEachFeature: self.onEachFeature
    	   });
    
    	   self.geojson.addTo(self.map);
	}
};

然后我创建这样的Map对象。

Then i create the Map object like this.

var map = new RHCA.Map([-31,99]);

然后我调用map对象上的render（）函数，然后调用setStyle（）。 setStyle（）然后调用setColor（）。



当我在setStyle（）函数中调用setColorRange（）时，我从浏览器中收到以下错误。

I then call the render() function on the map object which will then call setStyle(). setStyle() then calls setColor().

I got the following error from the browser when i called setColorRange() in setStyle() function.

Uncaught TypeError: this.setColorRange is not a function.

当我在render（）中使用console.log（）打印'this'时，它指向RHCA.Map对象，

但是当我在setStyle（）函数中打印'this'时它指向Window对象。我需要'this'来指向RHCA.Map对象。



所有帮助表示赞赏。谢谢。



我尝试了什么：



我试过改变将setStyle（）函数中的this.setColorRange设置为RHCA.Map.setColorRange，但它产生的错误与之前相同。

When i print 'this' using console.log() in render() it points to the RHCA.Map object,
but when i print 'this' in the setStyle() function it points to the Window Object. I need 'this' to point to the RHCA.Map object instead.

All help is appreciated. Thanks you.

What I have tried:

I tried changing this.setColorRange in the setStyle() function to RHCA.Map.setColorRange but it produces the same error as before.

推荐答案

确定。我不知道L对象是什么。

但我的猜测是这是你出错的代码。

OK. I do not know what L is for an object.
But my guess is that this is the code where you're going wrong.

// create geojson layer and add it to map
self.geojson = L.geoJson(countyBoundaries,{
     style: self.setStyle,
     onEachFeature: self.onEachFeature
});

您没有运行self.setStyle，但是您将它传递给另一个对象。

这不起作用。当L.getJson函数试图评估样式时，显然这是事实，这是函数并试图调用它。但背景却失去了。

如果你打算关闭它。它会工作。

You are not running self.setStyle but you are passing it on the another object.
That won't work. When the L.getJson function tries to evaluate style it apparently is ok with the fact that this is function and tries to call it. But the context is lost.
If you were to make a closure around it. It would work.

// create geojson layer and add it to map
self.geojson = L.geoJson(countyBoundaries,{
     style: function() {
         retun self.setStyle();
     },
     onEachFeature: self.onEachFeature
});

这篇关于如何在javascript中正确调用原型函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！