js函数的变量、事件和操作总结

爱被打了一巴掌 2022-10-02 09:48 70阅读 0赞

## 1、变量作用域 ##

作用域 ： 作用范围

**全局变量**：在函数体外部定义的变量，范围是**整个程序**  
**局部变量**：在函数体内部使用var明确定义的变量，范围是变量所在的**函数**（函数体）函数**调用完成后**，局部变量会**自动销毁**。所有的**形式参数**都是局部变量  
时  
作用域链 ： 在函数体内部的变量，会自动的**向上查找**，如果在函数体**内部**找到了，就返回，说明此时操作的是**局部变量**。如果在函数体内部没有找到，继续向函数体**外部查找** ，如果找到了 ，说明此时操作的是**全局变量**。 这个查找的过程 就称为 作用域链。

为了防止全局变量的污染 ，尽可能的使用局部变量

## 2、变量的提升 ##

函数体**内部定义**的变量，会将变量提升到函数的**最顶端**，只提升声明，不赋值  
**例如 ：**

function fn(){
      		  alert(  num );//undefined
       		 var num = 10;
    }

**解析成 ：**

function fn(){
      			  var num;
       			 alert(  num );//undefined
        num = 10;
    }

![详细理解变量提升][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]

## 3、浏览器解析js过程 ##

浏览器中有一个专门用于解析js代码的地方，就成为**js解析器**。  
js解析器解析js代码，一般有两个步骤

**第一步 ： 预解析 （在没有正式解读js代码前的操作都是预解析**  
找一些东西 找 **var** 或 **function**  
如果找到了**var**，会将变量**提前**赋予一个值 为 **undefined**  
如果找到了**function**，会将函数名提前赋予一个值 **函数本身**  
如果变量和函数**重名**， **保留函数**

仓库中的 变量 = undefined  
函数 = 函数本身

**第二步 ： 逐行解读代码**  
解读代码时，如果遇到了表达式，会改变仓库中变量或函数的值  
![实例说明浏览器解析][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]

## 4、递归调用 ##

递归 ： 函数自己调用自己本身  
res = fn(n)\*fn(n-1)

## 5、函数和事件的关系 ##

**事件**：用户对页面元素的某种操作  
**事件三要素** ：  
事件源  
事件  
事件处理程序

页面元素.事件 = function(){   
    	// 该匿名函数 会在 事件触发的时候执行  
     }

扩展 ： 匿名函数的**自动**执行

(function(形参){  })( 实参 )

事件的种类 ：

**页面事件 ：**  
onload

**鼠标事件**  
onclick 单击  
ondblclick 双击  
oncontextmenu 右击

**鼠标移动事件（可以冒泡，添加委托事件）**  
onmouseover 移入  
onmouseout 移出

**鼠标移动事件（不可以冒泡，添加委托事件）**  
onmouseenter 移入  
onmouseleave 移出

**鼠标按下事件**  
onmousemove 移动  
onmousedown 按下  
onmouseup 抬起

**键盘事件**  
onkeyup 抬起  
onkeydown 按下  
onkeypress 按下 + 抬起

**其他事件（表单）**  
onsubmit 表单提交  
onfocus 获取焦点  
onblur 失去焦点  
onchange 改变事件

## 6、js操作页面元素 ##

**操作样式 css：**  
页面元素.style.样式 = 值

操作属性 html标签上的： \[外链图片转存失败(img-k6qzNTUd-1562038048185)([https://mp.csdn.net/mdeditor/92682272][https_mp.csdn.net_mdeditor_92682272])\] `<a href=''>`  
页面元素.属性 = 值

操作内容：

**表单内容：**  
元素.value = “值”

**非表单内容**  
元素.innerHTML = “值”

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220113/3375e8d3467b42b1952647601da08244.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220113/f2fcd9f23c9846c38d58041b64512d85.png
[https_mp.csdn.net_mdeditor_92682272]: https://mp.csdn.net/mdeditor/92682272