如何在事件绑定函数中直接访问命名空间变量？JS重构求助

看起来你在把Google地图自动补全的代码封装到命名空间时，碰到了回调函数里拿不到模块内部变量的问题——我之前也处理过类似的场景，给你梳理下问题根源和解决办法：

问题根源 #

从你给出的代码片段来看，核心问题是事件回调的this指向不符合预期：当你给Google Maps的Autocomplete绑定place_changed这类事件时，回调函数默认的this会指向Autocomplete实例本身，而不是你模块里的detail对象。这就导致你想用this.searchEle访问模块变量时，根本找不到对应的属性。另外，如果回调没有通过闭包捕获模块内的变量引用，也会出现访问失败的情况。

修复方案 #

这里提供几种实用的解决思路，你可以根据项目环境选择：

1. 用闭包捕获模块实例引用（兼容所有环境） #

这是最经典的解决方案，在init方法里把当前detail实例的引用存到一个变量（比如self）里，回调函数通过闭包访问这个变量，就能避开this指向的问题：

// Gmap Autocomplete initialization and reset function
var gMapPlace = gMapPlace || {};
gMapPlace.geoAutocomplete = (function(){
    var detail = {
        searchEle : null,
        autocompleteEle : null,
        autocompleteLsr : null,
        init : function(searchEle){
            this.searchEle = searchEle;
            this.autocompleteEle = new google.maps.places.Autocomplete(this.searchEle);
            
            // 把当前detail实例存到self变量，供回调访问
            var self = this;
            this.autocompleteLsr = google.maps.event.addListener(
                this.autocompleteEle,
                'place_changed',
                function() {
                    // 这里用self就能访问模块内的变量了
                    console.log(self.searchEle);
                    var place = self.autocompleteEle.getPlace();
                    // 你的业务逻辑代码...
                }
            );
        },
        reset: function() {
            // 重置逻辑：移除监听、清空输入
            if (this.autocompleteLsr) {
                google.maps.event.removeListener(this.autocompleteLsr);
            }
            this.searchEle.value = '';
        }
    };
    return detail;
})();

2. 用ES6箭头函数绑定this（现代环境推荐） #

如果你的项目支持ES6+语法，箭头函数是更简洁的选择——箭头函数的this会继承外层作用域的this，也就是init方法里的detail实例，不用额外存变量：

// Gmap Autocomplete initialization and reset function
var gMapPlace = gMapPlace || {};
gMapPlace.geoAutocomplete = (function(){
    var detail = {
        searchEle : null,
        autocompleteEle : null,
        autocompleteLsr : null,
        init : function(searchEle){
            this.searchEle = searchEle;
            this.autocompleteEle = new google.maps.places.Autocomplete(this.searchEle);
            
            // 箭头函数自动继承外层的this
            this.autocompleteLsr = google.maps.event.addListener(
                this.autocompleteEle,
                'place_changed',
                () => {
                    console.log(this.searchEle);
                    var place = this.autocompleteEle.getPlace();
                    // 你的业务逻辑代码...
                }
            );
        },
        reset: function() {
            if (this.autocompleteLsr) {
                google.maps.event.removeListener(this.autocompleteLsr);
            }
            this.searchEle.value = '';
        }
    };
    return detail;
})();

3. 用bind手动绑定this（灵活可控） #

也可以用Function.prototype.bind方法，直接把回调的this绑定到detail实例上，这样回调里的this就固定指向模块对象了：

// Gmap Autocomplete initialization and reset function
var gMapPlace = gMapPlace || {};
gMapPlace.geoAutocomplete = (function(){
    var detail = {
        searchEle : null,
        autocompleteEle : null,
        autocompleteLsr : null,
        init : function(searchEle){
            this.searchEle = searchEle;
            this.autocompleteEle = new google.maps.places.Autocomplete(this.searchEle);
            
            // 用bind强制把回调的this绑定到当前detail实例
            this.autocompleteLsr = google.maps.event.addListener(
                this.autocompleteEle,
                'place_changed',
                function() {
                    console.log(this.searchEle);
                    var place = this.autocompleteEle.getPlace();
                    // 你的业务逻辑代码...
                }.bind(this)
            );
        },
        reset: function() {
            if (this.autocompleteLsr) {
                google.maps.event.removeListener(this.autocompleteLsr);
            }
            this.searchEle.value = '';
        }
    };
    return detail;
})();

额外优化建议 #

如果项目环境允许，我更推荐用ES6类来重构这段代码，类的结构会让代码的面向对象逻辑更清晰，也能天然避免很多this指向的问题：

// 用ES6类重构的版本
var gMapPlace = gMapPlace || {};
gMapPlace.GeoAutocomplete = class {
    constructor() {
        this.searchEle = null;
        this.autocompleteEle = null;
        this.autocompleteLsr = null;
    }
    
    init(searchEle) {
        this.searchEle = searchEle;
        this.autocompleteEle = new google.maps.places.Autocomplete(this.searchEle);
        
        // 箭头函数配合类方法，this指向更稳定
        this.autocompleteLsr = google.maps.event.addListener(
            this.autocompleteEle,
            'place_changed',
            () => {
                this.handlePlaceChanged();
            }
        );
    }
    
    // 把业务逻辑拆成独立方法，代码更易维护
    handlePlaceChanged() {
        console.log(this.searchEle);
        var place = this.autocompleteEle.getPlace();
        // 你的业务逻辑代码...
    }
    
    reset() {
        if (this.autocompleteLsr) {
            google.maps.event.removeListener(this.autocompleteLsr);
        }
        this.searchEle.value = '';
    }
};

// 使用方式也更直观
const autocomplete = new gMapPlace.GeoAutocomplete();
autocomplete.init(document.getElementById('search-input'));

内容的提问来源于stack exchange，提问作者user2809299