【JS学习】JS(JavaScript)学习记录

JS(JavaScript)

一、基础术语

一）代码块

1、script

• JS中的代码块是指由<script>标签分割的代码段。例如：

<script type="text/javascript">
      alert("这是代码块一");
</script>
<script type="text/javascript">
      alert("这是代码块二");
</script>

2、运行规则：

• 浏览器加载HTML文档——》加载—>预编译—>执行代码块1——》执行完毕——》加载代码块2——》…

3、独立性、共享性

• JS是按照代码块来进行编译和执行的，代码块间独立，但代码块共享。

• 命名空间共享。

  注：

  以往的var 和function 关键字是通过全局对象的属性共享。（window.f()）

  如今ES6中的const、let、class的顶级声明不会在全局对象创建属性。但对命名空间共享。

例如：

<script type="text/javascript">
      alert(str);				//因为没有定义str，所以浏览器会出错，下面的不能运行
      alert("我是代码块一");		//没有运行到这里
      var test = "我是代码块一变量";
</script>
<script type="text/javascript">
      alert("我是代码块二"); 		//这里有运行到
      alert(test); 				//弹出"我是代码块一变量"
</script>

独立：代码中代码块一中运行报错，但不影响代码块二的执行。
共享：代码块二中能调用到代码一中的变量和方法。
	 共享性受代码块的前后顺序影响。后面代码块可共享使用前面代码块成员。

二）声明式函数与赋值式函数

1、声明式函数

<script type="text/javascript">
     function Fn(){ } 			//声明式函数
</script>

2、赋值式函数

<script type="text/javascript">
     var Fn = function{ }		//赋值式函数
</script>

3、区别

预编译期优先提取声明式函数，再按顺序执行JS代码。详细看三）预编译期与执行期

三）预编译期与执行期

• 例

<script type="text/javascript">
     Fn();  //执行结果："执行了函数2",同名函数后者会覆盖前者
     function Fn(){ //函数1
        alert("执行了函数1");
     }
        
     function Fn(){  //函数2
        alert("执行了函数2");
     }
</script>  
<script type="text/javascript">
      Fn();  //执行结果："执行了声明式函数",在预编译期声明函数及被处理了，所以即使Fn()调用函数放在声明函数前也能执行。
      function Fn(){ //声明式函数
         alert("执行了声明式函数");
      }
        
      var Fn = function(){  //赋值式函数
         alert("执行了赋值式函数");
      }
</script>
//代码块一
<script type="text/javascript">
      alert(str);//浏览器报错,但并没有弹出信息窗
</script>
//代码块二
<script type="text/javascript">
      alert(str); //弹窗"undefined"
      var str = "aaa";
    //js在预处理期对变量进行了声明处理,但是并没有进行初始化与赋值，所以导致代码块二中的变量是unfiened的，而代码一中的变量是完全不存在的，所以浏览器报错。
</script>

二、执行顺序

一）代码块顺序：

step 1. 读入第一个代码块。
step 2. 做语法分析，有错则报语法错误（比如括号不匹配等），并跳转到step5。
step 3. 对var变量和function定义做“预编译处理”（永远不会报错的，因为只解析正确的声明）。
step 4. 执行代码段，有错则报错（比如变量未定义）。
step 5. 如果还有下一个代码段，则读入下一个代码段，重复step2。
step 6. 结束。

二）HTML顺序

1. Head中的代码块：元素渲染前执行
2. Body后的代码块：元素加载后执行