JavaScript——函数（下）

一、作用域

1.作用域：一个变量的生效范围

注意：变量不是在所在地方都可以使用的，而这个变量的使用范围就是作用域

• 作用域分为：全局作用域和局部作用域（函数作用域）

（1）全局作用域:就是直接在script标签下创建的变量，具有全局作用域，可以在页面中任何一个位置调用

（2）局部作用域:在函数中创建的变量（例如:形参），只能在函数中调用，不能在函数外调用

注意：可以直接给一个未声明的变量赋值(全局变量)，但不能直接使用未声明的变量！因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。当全局与局部有同名变量的时候，访问该变量将遵循 "就近原则"。

2.变量的使用规则：

• 访问（获取）规则：

（1）根据就近原则来进行访问，先查看当前作用域中是否存在该变量，如果存在，则直接获取该变量的值；

（2）如果不存在，则继续向上一级作用域中查找该变量是否存在，

（3）如果存在，也是直接获取该变量的值；如果还是不存在，则继续向上上级作用域中查找，直到最顶层的作用域都不存在时，则报错

变量的访问规则 也叫做 作用域的查找机制

作用域的查找机制只能是向上找，不能向下找

function fn() {
    var num2 = 200
    function fun() {
    var num3 = 300
    console.log(num3) // 自己作用域内有，拿过来用
    console.log(num2) // 自己作用域内没有，就去上一级，就是 fn 的作用域里面找，发现有，拿过来用
    console.log(num) // 自己这没有，去上一级 fn 那里也没有，再上一级到全局作用域，发现有，直接用
    console.log(a) // 自己没有，一级一级找上去到全局都没有，就会报错
    }
    fun()
}
fn()
console.log(num) // 发现自己作用域没有，自己就是全局作用域，没有再上一级了，直接报错

• 赋值规则：

根据就近原则来进行赋值，先查看当前作用域中是否存在该变量；如果存在，则直接给该变量赋值；如果不存在，则继续向上一级作用域中查找，如果存在，也直接赋值；如果不存在，则继续向上上级作用域中查找，直到最顶层的作用域中都不存在，则直接创建一个全局的变量，并给它赋值

function fn(){
    num = 109
}
fn()
// fn 调用以后，要给 num 赋值
// 查看自己的作用域内部没有 num 变量
// 就会向上一级查找
// 上一级就是全局作用域，发现依旧没有
// 那么就会把 num 定义为全局的变量，并为其赋值
// 所以 fn() 以后，全局就有了一个变量叫做 num 并且值是 100
console.log(num) // 100

二、递归函数

递归就是一个自己调用自己的手段

递归函数：一个函数内部，调用了自己，循环往复

一般来说，递归需要有边界条件，递归前进段和递归返回段

当边界条件不满足时，递归前进；当边界条件满足时，递归返回；

- 其实递归函数和循环很类似

- 需要有初始化，自增，执行代码，条件判断的，不然就是一个没有尽头的递归函数，我们叫做 死递归

// 求10的阶和，即：10+9+8+...+1
functionfacSum(num){
    if(num==1){
        return1;	
    }	
    return num+facSum(num-1);
}
var res=facSum(10);
console.log(res);// 55

三、事件

1. js中的事件指的是用户在网页中的行为，例如：鼠标点击、鼠标移动......

2. 事件通常由3个要素组成：

• 事件源：触发事件的标签元素，例如，点击的是div、还是button ......

• 事件类型：行为的类型，是单击还是双击，还是右击。。。

• 事件处理程序：事件触发后要做的事情 - 函数

3. 事件类型：

（1）常见事件之浏览器事件：

onload：当页面内容加载完毕时，触发（调用）

onresize：窗口大小发生变化时，触发

onscroll：滚动距离发生变化时，触发

注意：该事件一般是绑定在window对象或者是document对象上

（2）常见事件之鼠标事件：

onclick：鼠标单击时，触发

ondblclick：鼠标双击事件

onmouseover：鼠标移入事件

onmouseout：鼠标移出事件

onmouseenter：鼠标移入事件（不冒泡）

onmouseleave：鼠标移出事件（不冒泡）

onmousedown：鼠标左键按下事件

onmouseup：鼠标左键抬起事件

oncontextmenu：鼠标右键单击事件

onselecstart：选中事件（不被input和textarea标签支持）

onselect：选中事件（支持input和textarea标签）

（3）常见事件之键盘事件：

onkeydown ： 键盘按下事件

onkeyup ： 键盘释放事件

onkeypress ： 产生可打印字符事件

注意：键盘事件绑定的位置，要么是document，要么是input输入框

（4）表单事件：

onchange ： 表单改变事件（失去焦点时触发）

oninput ：表单输入事件（输入时触发）

onsubmit ：表单提交事件（点击submit时触发）

onfocus ：获得焦点事件

onblur ：失去焦点事件

（5）触摸事件（移动端）：

ontouchstart ：触摸开始

ontouchmove ：触摸移动

ontouchend ： 触摸结束

（6）加载事件：onload

（7）其他事件：

ontransitionend ：过渡结束的时候触发

onanimationend ：动画结束的时候触发

4. 语法：

btn.onclick = function(){
   alert("点击了按钮！");
}

四、对象

1. 定义

//这样定义的对象是空数据
var obj = { };
//对象中的值，是由键值对组成；键值对是指在描述一个事物的时候，需要一个名字，对应一个值，比如：
var obj = {
    name:"张三",
    age:12，
    height:180,
    "province-name":"山东省"
}
//键和值之间使用冒号隔开，键值对之间使用逗号隔开
//对象中键值对的数量没有限制，可以有任意多个
//对象中的键都是字符串，只是正常情况下可以省略引号，但如果键中包含连字符，就不能省略引号了

2. 对象的基本操作

（1）访问对象

obj.键名   //这种方式的属性名不用加引号
obj[键名]  //这种方式的属性名必须加引号

var obj = {
    name:"张三",
    age:12
};
console.log(obj.name);
console.log(obj["age"]);

（2）对象的遍历

for(var i in obj){
    // 这里的i代表对象属性名
    // obj表示这个对象
}
//注意：遍历对象时，输出对象中的值，必须使用对象[键名]这种形式来输出。

（3）给对象添加属性

var obj = {};
console.log(obj);
obj.name = '李四';
obj["age"] = 12;
console.log(obj);
//如果给设置的属性名是对象中已经存在的，则是修改属性的值

（4）删除对象中的键值对

delete obj.键名
delete obj[键名]

3. 方法概念

对象中值的类型是没有限制的，可以是任意类型。

当值不是函数的时候，我们将这个键值对叫做对象的属性；

当值是一个函数的时候，我们将这个键值对叫做对象的方法。

var obj2 = {
    //属性
    name:'王五',
    //方法
    study:function(){
        console.log("在学习");
    }
}
console.log(obj2);
//方法跟属性的访问是一样的
// 但是，因为函数执行需要调用，所以需要加小括号
obj2.study();