在微信小程序环境下，获取window对象

众所周知，微信小程序的js中不能使用window对象以及document对象。
难道他们真的不存在吗？事实并非如此。

1、尝试获取window对象

熟悉this的同学都知道，在浏览器环境下，触发一个立即执行函数时，其中this的指向往往都是window对象。

 

var window = (function (){
   return this
})();
console.log(window); // Window {requestAnimationFrame: ƒ, cancelAnimationFrame: ƒ, atob: ƒ, setTimeout: ƒ, clearTimeout: ƒ, …}

这段js在小程序中是同样有效的，所以window对象确实存在。
window对象中包含了很多对象，如wx、Page、Component、Behavior等变量，你可以试试看。
不过在严格模式下，this就指向了undefined。而且es6转es5时也默认开启了严格模式。

 

'use strict';
var window = (function (){
   return this
})();
console.log(window); //undefined

如果你想尝试，首先你需要在微信开发工具中选择右上角的 详情-项目设置 取消选中ES6转ES5即可

 

es6转es5

2、尝试获取document、location等变量

获取到了window对象，我们就可以获取其他全局变量

(1)、location

 

var window = (function (){
   return this
})();
console.log(window.location)

location路径

当我们js报错时，其路由前面部分是一样的。

 

页面报错

(2)、document

 

var window = (function (){
   return this
})();
console.log(window.document);

在控制台中，我们可以看到微信小程序的html部分的源码。

 

document对象

3、模拟实现

 

window.Page = function(){ //Page的源码};
window.Component = function(){ //Component的源码};
window.App = function(){//...};
window.wx = {//...};
//...等等
window = undefined;

在实际开发中我们可以利用这个方法，把一些全局方法给转移或清除掉，比如alert。

 

var tempAlert = window.alert;
window.alert = undefined;
/* tempAlert 随你处置 */

4、总结

1、非严格模式下，可以获取window对象。
2、可以在window中扩展自己的全局变量，当然并不推荐这样做。
3、各种你能想到的操作...

此文仅供交流，如有不当，请指正。