这篇文章发布于 2017年07月6日,星期四,23:10,归类于 JS相关。 阅读 48825 次, 今日 25 次 16 条评论
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6260
本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。
一、现代web之前的window.self和self
对于web页面,在默认状况下,下面4个写法都是等同的:
window === self // true window.window === window.self // true window.self === self // true window.window === self // true
这种有意思的现象就不禁会让人疑惑了,既然都是相等的,那window.self
和self
还有什么出现的意义呢?直接全部使用window
不就好了?
其实真实情况还就是这样,并没有需要self
出场的理由,唯一可能有作用的就是更语义地判断当前页面是否作为iframe嵌入了,直接:
parent === self // true表示作为iframe嵌入,false则表示被iframe嵌入了
我们可以看个简单的例子:iframe嵌套情况下的self和parent
结果,上面一行iframe内信息就显示parent === self
为false
,主页面上的parent === self
为true
。
除此之外,基本上就没有在实际项目中出现的机会,因此,“JS中有个全局self
对象”这件事怕是很多小伙伴都不知道,因为用之甚少。
当然,注意这里标题前提——现代web之前!换句话说,在HTML5一些新特性出来之前,全局的self
就是个没什么实用价值的半吊子。但是,随着HTML5一些新特性的到来,self
开始慢慢登上正式的舞台,最常见的就是用在Service Workers或者Web Workers中。
二、Service Workers, Web Workers下的self
无论是出来有段时间的Web Workers或者说是新晋宠儿Service Workers,本质上都是开启了另外的线程。
传统的web页面的JavaScript脚本是单线程的,这个线程我们可以理解为“窗体线程”,就是要和浏览器窗口打交道的,主要作用就是实现浏览器窗体内的元素交互效果,因此只要是全局对象,都可以使用window
对象来获取。
但是,Workers开辟的新线程是没有“窗体”这个概念的,都是在浏览器背后悄悄运行的线程,没有窗体的概念也就意味着没有window
对象。
换句话说,Service Workers和Web Workers相关的脚本中是不能使用window
这个对象的。那问题来了,我们希望在全局作用域里面做事情该怎么办呢?
好,此时,self
的价值就出现了!
在non-window上下文的环境中,我们可以使用self
来表示全局作用域,注意,只能是光秃秃的self
,window.self
这样的写法是不行的。
举个简单的例子,假设我们注册一个Service Workers,Workers脚本在sw-test.js
中,如下:
navigator.serviceWorker.register('/sw-test.js');
则我们希望Service Workers注册完毕干点什么事情,就可以在sw-test.js
中这么写:
self.addEventListener('install', function(event) { // ... });
三、结束语
关于Service Worker,近期会详细介绍下,这里我们可以先大致了解下,Service Worker是一个在浏览器后台运行,和当前页面没有关联的脚本,后台运行,用来实现一些不依赖页面或者用户交互的特性,比方说缓存啊,消息推送之类。
好了,本文就这么点内容,欢迎补充更多信息。
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:http://www.zhangxinxu.com/wordpress/?p=6260
(本篇完)
- 借助Service Worker和cacheStorage缓存及离线开发 (0.709)
- 原来浏览器原生支持JS Base64编码解码 (0.291)
- Service Worker实现浏览器端页面渲染或CSS,JS编译 (0.218)
- 深入JS getRandomValues和Math.random方法 (0.218)
- 简单了解HTML5中的Web Notification桌面通知 (0.164)
- Chrome浏览器原生支持的7种后台服务简介 (0.164)
- js页面滚动时层智能浮动定位实现(jQuery/MooTools) (0.073)
- 小tip:iframe高度动态自适应 (0.073)
- windows系统下批量删除OS X系统.DS_Store文件 (0.073)
- DOM基础小测27期答疑文字版-窗体滚动二三事 (0.073)
- 实现a元素href URL链接自动刷新或新窗口打开 (RANDOM - 0.073)
parent是什么
现在新草案终于允许用globalThis来获取当前的全局变量根了
好棒,解决了我阅读这个的困惑https://github.com/deanhume/progressive-web-apps-book/blob/master/chapter-4/save-data/sw.js
首页推荐哪里,淘宝前端团队和百度EUX的内容一样,很久了,没发现吗
鑫哥,第一行parent == true的那个注释一眼看过去莫名棋妙呀,// true表示作为iframe嵌入,false则表示被iframe嵌入了
什么叫“true表示作为iframe嵌入”呀?
鑫哥这是看了笨女孩吗……
我去,这也太短了。。。。
惊不惊喜,意不意外~
玩站,碰到过许许多多的问题,都是靠着网络上分享的教程,一步一步把网站做起来的。正红综合,有访必回!
不错
鑫哥,广告关闭按钮 javascriot 。。写错啦!
好的,感谢反馈!
好多广告啊息吧
加了!importent可以挡住ABP,学到了。。。
和这个没关系吧
鑫哥这广告还多?你去看看某愚的站那广告才叫多,而且文章全是…….