众所周知,微信小程序的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、各种你能想到的操作...
此文仅供交流,如有不当,请指正。