问题描述
在Vue框架中写了一个global.vue用来存放Vue文件中的全局变量,是一种代替Vue本身store的方法,在global.vue中一开始写了一个函数如下:
function panAndZoom (point) {
let that = this
this.map.panTo(point)
setTimeout(function () {
that.map.centerAndZoom(point, 15)
}, 500)
其中map是百度地图API中定义好的变量在global.vue中又保存了一遍,它包含有panTo,panAndZoom这样的函数
问题:我想把所有的函数放在一个类下面,但是这个地方的panAndZoom函数中的this指针指向的是const Function这个类,类里面没有定义map这个变量,怎么样才能调用到map这个变量,如下想法:
const Functions = {
panAndZoom: function (point) {
let that = this
this.map.panTo(point)
setTimeout(function () {
that.map.centerAndZoom(point, 15)
}, 500)
}
}
解决方案
在调用该函数的时候利用js中的call函数来规定this指针指向内容
global.vue中代码不变如下:
const Functions = {
panAndZoom: function (point) {
let that = this
this.map.panTo(point)
setTimeout(function () {
that.map.centerAndZoom(point, 15)
}, 500)
}
}
调用时候的代码如下:
//其中this.GLOBAL指代是就是global.vue
//在main.js中有import global from '../public/global'和Vue.prototype.GLOBAL = global
this.GLOBAL.Functions.panAndZoom.call(this.GLOBAL, (new BMap.Point(typePosition.positions[i].lng, typePosition.positions[i].lat)))