一, 代码执行顺序
浏览器解释代码是自上而下的, 遇到 script 标签会直接解读 JS 代码, 下面的 html 元素就不会被解析, 下面的 HTML 元素就获取不到, 直到读取完毕.
src 引入的图片资源 / JS 资源, href 引入的 CSS 资源, 整个文档也需要加载, 到资源加载完毕, 就可以执行代码.
- <!-- 报错 -->
- <script>
- document.getElementById('box').onclick = function(){
- alert(1);
- }
- </script>
- <div id="box">123</div>
- <!-- 正常 -->
- <script>
- // 当我们的窗口内所有的资源都加载完成之后, 执行其中的代码
- Windows.onload = function(){
- document.getElementById('box').onclick = function(){
- alert(1);
- }
- }
- </script>
- <div id="box">123</div>
当 alert 放到 div 的上方, 开启窗口的时候, div 不加载, 点击确定后加载, 刷新页面后 div 消失.
当 alert 放到 div 的下方, 如果在 Chrome 的 64 版本以上, 包括 360,qq 等浏览器的最新版本, 开启窗口的时候, div 不加载, 点击确定后加载, 刷新页面后 div 消失.**alert 对话框不会激活所在的选项卡,** 当我们新建选项卡时, 显示正常. 如果在火狐浏览器, 就是正常的出现 div, 出现弹窗. 不阻止上面元素的加载.
所有的 alert 代码在 Chrome 中只在第一次阻止页面的加载, 但是在火狐浏览器都是正常的.
二, 数据类型
数值型 (number): 包括小数和整数, 在 JS 中, 小数运算是不精确的, 不能用它做判断.
- var num = 12.3;
- console.log(typeof num);//number
字符串 (string): 字符连成的串, 可以用 "",''包裹, 此时字符串不能换行,`` 反引号包裹可以换行.
- var str = '你好';
- console.log(typeof str);//string
布尔值 (boolean):true/false.
- var b = true;
- console.log(typeof b);//boolean
function(function): 没有名字的函数, 称之为匿名函数, 不能莫名其妙的出现一个匿名函数. 具名函数可以通过函数名 +().
- function fn(){
- alert(1);
- }
- console.log(typeof fn);//function
对象 (object): 简单的写法为 {}, 实际上空的一个对象是使用 new Object 得到的.
- //var obj = {
- };
- var obj = new Object;
- console.log(typeof obj);//object
数组 (object): 数组中可以存放任何数据类型, 简单写法 [数据, 数据, 数据], 空数组为 [], 是由 new Array 创造的.
- //var arr = [];
- var arr new Array;
- console.log(typeof arr);//object
null(object): 本质是一个空对象指针, 是找对象的时候没找到.
- var n = document.getElementById('box');
- console.log(typeof n);//null
undefined(undefined): 声明了但是并未赋值.
- var u;
- console.log(typeof u);//undefined
注:
JS 中有 5 种简单数据类型 (也称为基本数据类型):undefined,null,boolean,number,string, 还有 1 种复杂数据类型: object,object 本质上是由一组无序的名值对组成的.
对一个值使用 typeof 操作符可能返回下列某个值: undefined,boolean,string,number,object,function.
对于尚未声明过的变量, 只能执行一项操作, 即使用 typeof 操作符检测其数据类型, 对于未初始化的变量执行 typeof 操作符会返回 undefined, 而对未声明的变量执行 typeof 操作符同样也会返回 undefined.
- var message;// 这个变量声明之后默认取得了 undefined 值
- // 下面这个变量并没有声明
- //var age;
- alert(typeof message);//"undefined"
- alert(typeof age);//"undefined"
undefined 值是派生自 null 值的, 因此对他们的相等性测试要返回 true.
alert(null == undefined);//true
来源: https://juejin.im/post/5c5d5fa76fb9a049a5715bdc