理解JavaScript中.bind(this)：回调函数this指向问题解析

1. this._loadMap.bind(this)中bind参数的this指向 #

这里bind方法传入的this，指向的是当前类的实例对象。因为_getPosition是在类的构造函数中调用的，此时_getPosition方法内部的this已经绑定到该类的实例上，所以传给bind的this就是这个实例。

2. 直接使用this._loadMap报错、bind后正常的原因 #

这是JavaScript的this绑定规则导致的：

• 当你把this._loadMap作为回调传给getCurrentPosition时，函数的this绑定会被重置。因为getCurrentPosition是由浏览器的Geolocation API执行调用的，在严格模式下，回调函数的this默认会指向undefined，而非类的实例，这就导致_loadMap里访问this.#map时出现undefined错误。
• 调用bind(this)会创建一个新的函数副本，这个新函数的this被永久绑定到传入的类实例上。当Geolocation API调用这个绑定后的函数时，this依然指向类实例，就能正常访问实例的属性和方法了。

额外代码问题提示 #

你的_loadMap函数里还有两处小问题：

• L.marker(coords).addTo(map)中的map未定义，应该改为this.#map；
• this.#map.on("click", function(mapE) {...})里的普通函数会导致内部this指向地图对象，无法访问类实例的this.#mapEvent，建议改成箭头函数：this.#map.on("click", (mapE) => {...})

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