众所周知,微信小程序的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、各种你能想到的操作...

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

 

Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐