微信小程序：必须知道的变量作用域

微信小程序变量作用域

（请读者务必看完，我写的文章都是一步步慢慢来的，不读完，看不到结论）

最近菜鸟看见了一篇文章，自打这之后，使用变量就不敢在page外面定义了

这看得菜鸟感觉这个page外面的变量就是王八蛋呀！

可是今天，我感觉不能轻信这种博客呀，不然难受呀，感觉会让人有种错误的认识，所以我今天自己来实验了

给大家看看目录结构：

第一个实验

既然他说不会随页面销毁而销毁，那我就试试吧！

首先在，dome.js的page外面定义变量

var a = "a"
Page({
  onLoad:function (params) {
    console.log(params)
  }
})

然后在var.js里面：

onLoad: function (options) {
    console.log(a)
}

结果很明显，报错：

这我就很不理解呀！这博客骗人的？？然后就到处请教大佬，于是得到结论：

Page外定义的是全局变量，在页面中要显示的就定义在data里面，不显示的，就可以定义在Page外面，每个页面都是一个独立的模块，当然其他页面获取不到的

如果要全局使用某些变量，可以放在app.js里面，在其他页面可以通过getApp()获取

心中感慨万千，大佬还是大佬，我什么时候才能这么强T_T，既然知道不如大佬，那我自然得再来研究研究

第二个实验

那我怎么样才能获得到这个页面定义的a呢？突然灵光一闪，要不？把dome.js引入到var.js里面

然后，我就搜，突然发现，这为什么写法不是微信小程序？

微信小程序不都是这样的吗？
XXXX：function（）{

}

然后菜鸟自以为是的这样改了(dome.js)：

var a = 1

Page({
	out:function (e) {
    	return a;
	}
})

module.exports = {
  out:out
}

var.js引用代码：

var dome = require('../button/dome.js')
Page({
	onLoad: function (options) {
    	console.log(dome.out())
	}
})

然后等待我的只有报错：

顿时心生疑惑？这肯定是因为不是微信小程序，所以错了，但是搜来搜去都是这么个写法，然后我认真看了，发现，我就是菜鸟

原来别人是直接把公用的js代码提取出来，放到这个文件中，这个js并不是page的那种

然后，我就重新定义了，dovar.js

var a = 1

function out(e) {
    return a;
}

module.exports = {
  out:out
}

修改引入，正常运行！

第三个实验

直接上代码，说结论（dome.js）：

var c = 3
var d ="d4"
var e = 10
Page({
  data: {
    c:4,
    e:11,
  },
  onLoad: function (options) {
  	console.log(e)
    console.log(this.data.e)
    console.log(c)
    console.log(this.data.c)
    var c = 5
    var d = 6
    console.log(c)
    console.log(this.data.c)
    console.log(d)
  },
  onReady: function () {
    console.log(c)
    console.log(d)
  },
})

结果：

data里面的变量名跟page外面的变量名重名没问题，打印出来互不相关

函数中的变量名跟page外面的重名则会覆盖，并产生变量的声明提升，从undefined跟5可以看出

第四个实验 --》 使用全局变量的注意点

如果你在某个页面的page外，使用了全局变量

let change = false

需要其判断用户是否修改了页面内容，如果这样写：

Page({
  menuName:function(e){ //监听用户是否改变input里面的值
    if(e.detail.value!==this.data.menuName){
      this.setData({
        menuName:e.detail.value
      })
      change = true  //全局变量
    }
  },
})

那如果用户修改后，按了返回键，那么当用户再次进入该页面，你的change依旧是true，但是这时你的页面内容由于是从数据库或云上取下的，所以还是以前的内容，这时候用户点击提交，那么没有修改，也依旧提交上去了，会让用户误以为自己改了！

谢谢大家，希望大家喜欢，也希望大佬们指点江山，激扬文字