当前位置: 首页 > news >正文

Web前端学习:章三 -- JavaScript预热(三)

六九:函数的变量提升

函数的变量提升没有var高,var是最高的。
先提var,再提函数
在这里插入图片描述
解析:
1、4行打印之前没有定义变量,预解析触发变量提升
2、先提var,再提函数。所以先把var提升到最上面,然后提升函数到var下面
3、3行的提升的函数覆盖了2行的提升变量,所以4行打印出来的是函数
4、继续向下执行,5行a覆盖3行的函数,因为6行函数没有赋值,所以9行还是维持5行的赋值,所以9行a不是函数

七十:JavaScript中的window对象的基本理解

如果JS是地球,那window就是空气 。
window可以省略(不写,看不见,不显示,但是存在)
在这里插入图片描述
window是全局的,最大的最外层的大对象,谁都可以使用
如果不用var进行变量申明,则会默认对象b是window的
在这里插入图片描述

七一:window深入及检测浏览器的属性

1、window

全局的,最外层的大对象
所有的变量、属性、方法都可以挂在window上,方便在任何地方调用
在这里插入图片描述
如上图,一般情况下,一个函数无法获取另一个函数里面的值。但这里的c是被window定义的,运行a();,给window挂上一个c=10,window可以在任何地方调用,所以b可以获取c。

全局变量

挂在window下的变量即为全局变量,在任何地方都可以调用
缺点:可能造成全局污染

2、检测浏览器属性

(1)宽度/高度
//检测浏览器可视范围的宽度console.log(window.innerWidth);  

第一次运行是显示从左到右的最宽距离,即页面宽度
在这里插入图片描述
后面再刷新页面,就是可视部分的宽度
在这里插入图片描述
在这里插入图片描述

<script>//检测浏览器可视范围的宽度 console.log(window.innerWidth);  //检测浏览器可视范围的高度console.log(window.innerHeight)
</script>

效果与宽度一致
在这里插入图片描述

(2)距离屏幕左/上的距离

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

七二:window中的定时器

window有两种定时器
是函数

1、延时定时器

(1)window.setTimeout()

只执行一次
有两个参数,window.setTimeout(fn , 1000)
fn:是一个函数,即定时时间过了之后要执行的函数操作
1000:这里是时间,单位毫秒,1000ms = 1s
在这里插入图片描述

(2)延时定时器关闭 – window.clearTimeout();

在这里插入图片描述
当关闭时间=运行时间,会先执行打开在执行关闭,所以要让打开不执行,关闭时间至少比打开提前1ms

2、轮循定时器

(1)window.setInterval()

一直运行,不会停止。没过一定时间轮询一次
window.setInterval(fn , 1000)
fn:是一个函数,即定时时间过了之后要执行的函数操作
1000:这里是时间,单位毫秒,1000ms = 1s
在这里插入图片描述
在这里插入图片描述

(2)轮循定时器关闭 – window.clearInterval();

在这里插入图片描述

七三:window中的打开与关闭页面的方法

1、打开 - open()

在新页面打开网站或者本地页面
参数就是网站地址

<script>window.open('https://www.baidu.com')
</script>

2、关闭 - close

关闭当前页面

<script>window.open('https://www.baidu.com');setTimeout(function(){close();},3000);
</script>

七四:window一些特性

1、window.window

window里面还有window,理论上无限制
在这里插入图片描述
在这里插入图片描述

2、关键字–window

在script最外层,部分关键字指向window(即在最外层,就是window)

(1)this

代表当前环境
查询当前,反馈window

使用也没问题,等同于window.alert(3);
在这里插入图片描述

(2)self

翻译为自己
同样代表window
在这里插入图片描述
等同于——window.window.alert(5)
在这里插入图片描述

(3)top

指对外层对象是什么
同样代表window
在这里插入图片描述
等同于——window.window.alert(2)
在这里插入图片描述

http://www.lryc.cn/news/36257.html

相关文章:

  • java实用小技巧:判断list是否有重复项
  • SQL优化常用招数(上)
  • C++并发之探索编程三
  • 某智能驾驶企业:CACTER云网关为O365系统护航
  • 网络安全与信息安全的主要区别讲解-行云管家
  • Zabbix6.2利用模板和自定义监控项监控华为AR3260路由器
  • MySQL Connector/C++使用过程中的问题
  • SpringBoot下的Spring——DAY04——动态代理总结、AOP、自定义注解进行拦截、动态获取注解参数、通知方法(内含源代码)
  • Spark MLlib概述
  • Git 命令行5步解决冲突方法(亲测有效)
  • 在线帮助文档——让用户更方便地获取帮助
  • 一小时轻松掌握Git,看这一篇就足够
  • spring cloud stream 自定义binder
  • 计算机网络之HTTP协议
  • 如何挖掘专利创新点?
  • 虚函数和纯虚函数
  • Framework源码面试——Handler与事件传递机制面试集合
  • iOS开发-bugly符号表自动上传发布自动化shell
  • MySQL OCP888题解046-哪些语句会被记录到binlog
  • 【前端学习】D5:CSS进阶
  • 【bioinfo】融合检测软件FusionMap分析流程和报告结果
  • C++基础了解-17-C++日期 时间
  • MOV压敏电阻的几种电路元件功能及不同优势讲解
  • uniapp+uniCloud实战项目报修小程序开发
  • 演唱会的火车票没了?Python实现12306查票以及zidong购票....
  • Linux发行版本与发行版的简单的介绍
  • 前后端分离项目学习-vue+springboot 博客
  • 关于指针运算的一道题
  • 【论文简述】Learning Optical Flow with Kernel Patch Attention(CVPR 2022)
  • Java学习-MySQL-列的数据类型