Question

我正在尝试将一些OO设计模式应用于现有脚本，并且在遵循Mozilla帮助中心的一些指南之后，我在尝试实例化对象时仍然收到错误。

我已经查看了这些资源以寻求帮助，但也许我还没有完全理解JavaScript语法。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

错误：

Uncaught TypeError: GeoLocMap is not a constructor

错误行：

var GeoLocMap = new GeoLocMap();

下面的每种方法都应该定义为原型吗？

感谢您的帮助！

代码：

function GeoLocMap() {

        this.map = -1;
        this.regionName = "";
        this.options = -1;
        this.openCountData = -1;
        this.chart = -1;

        this.getMap = function () {
            if (this.map == -1) {
                this.map = new google.maps.Map(document.getElementById('geochart-colors'), {
                    zoom: 6,
                    //TODO replace with the region retrieved from eventData
                    center: new google.maps.LatLng(lat, long),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            } else {
                return this.map;
            }
        };

        this.getMapWidth = function () {
            var docBody = document.body;
            var docElem = document.documentElement;

            if (typeof document.width !== 'undefined') {
                return document.width;// For webkit browsers
            } else {
                return Math.max(docBody.scrollWidth, docBody.offsetWidth, docElem.clientWidth, docElem.scrollWidth, docElem.offsetWidth);
            }
        };

        this.getMapHeight = function () {
            var docBody = document.body;
            var docElem = document.documentElement;

            if (typeof document.height !== 'undefined') {
                return document.height;// For webkit browsers
            } else {
                return Math.max(docBody.scrollHeight, docBody.offsetHeight, docElem.clientHeight, docElem.scrollHeight, docElem.offsetHeight);
            }

        };

        this.getChart = function() {

            if (this.chart == -1){
                this.chart = new google.visualization.GeoChart(document.getElementById('geochart-colors'));
            }

            return this.chart;

        };

        this.getOpenCountData = function () {

            if (this.openCountData == -1) {
                var data = new google.visualization.DataTable();
                data.addColumn('string', 'Country');
                data.addColumn('number', 'Open Count');

                this.openCountData = data;

            }

            return this.openCountData;
        };

        this.addOpenCountDataRow = function(dataRow) {

          if (this.openCountData == -1){
              this.getOpenCountData();
          }

          if (dataRow == -1){
              return -1;
          }

            this.openCountData.addRows(dataRow);

          return 1;

        };

        this.getOptions = function () {

            if (this.options == -1) {
                this.options = {
                    width: width,
                    height: height,
                    region: 'US',
                    resolution: 'provinces',
                    colors: ['#FFFFFF', '#FFFFFF']
                };
            }

            return this.options;
        };

        this.setOptions = function (property, value) {

            if (this.options == -1) {
                this.getOptions();
            }

            if (value === undefined) {
                return -1;
            }

            this.options[property] = value;

            return 1;

        };

        this.drawMap = function() {

            if (this.chart == -1){
                this.getChart();
            }

            if (this.options == -1){
                this.getOptions();
            }

            if (this.openCountData == -1){
                this.getOpenCountData();
            }

            this.chart.draw(this.openCountData, this.options);
        };

    }

Answer 1

当你这样做时

var GeoLocMap = new GeoLocMap();

你真的这么做了

var GeoLocMap = undefined; // hoisted to the top of the scope
// other code in the same scope
GeoLocMap = new GeoLocMap();

因此你的错误。

只需使用其他名称，例如

var geoLocMap = new GeoLocMap();

the MDN on variable scope and hoisting

中的更多信息

Answer 2

你应该知道JavaScript Hoisting@DenysSéguret刚刚描述的是正在发生的事情。

您应该将新实例分配给其他变量

var GeoLocMapInstance = new GeoLocMap();

对象不是构造函数JavaScript错误

2 个答案: