JS函数解析

目录

一、函数的概念

二、函数的定义与调用

三、函数的参数

1、形参

2、实参

四、函数表达式（匿名函数）

五、函数的return用法

六、作用域

1、全局作用域

2、局部作用域（函数作用域、块级作用域）

七、全局污染（命名冲突问题）

八、总结

---

一、函数的概念

JS中的函数：把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码。复杂一点的，也会加入封装、抽象、分类等思想。

二、函数的定义与调用

定义：方式一：function 函数名（）{ 要执行的代码 }

           方式二：匿名函数，将函数存到变量里 let func = function(){};

调用：方式一：名字(); 函数可以多次调用

//函数声明
function fn(){
    console.log(1);
}
 
//函数的调用
fn();

            方式二：在事件中调用，直接写函数名，不使用括号

//函数声明
function fn(){
    console.log(1);
}
 
//函数在事件中的调用
document.onclick = fn;

函数的两种定义方式在调用时的区别：

      使用方式一定义的函数，调用可以在 定义之前或者定义之后

      使用方式二定义的函数，只能 先定义后调用

三、函数的参数

形参：形式上的参数——给函数声明一个参数；

实参：实际的参数——在函数调用时给形参赋的值

function func(形参1,形参2){
    //函数执行代码
}
 
func(实参1,实参2);//调用时传参

1、形参

形参实际上就是函数内部使用的变量，在函数外部不能使用

在定义函数()中每写一个单词，就相当于在函数内部定义一个可以使用的变量，多个单词之前使用 , 隔开

如果只有形参，没有赋值，那么在函数内部使用的时候会出现undefined

形参的值由函数调用时实参决定的

function add(a, b) {
    console.log(a, b)
    return a + b
}
console.log(add(1, 2))
console.log(add(1))        // NaN // 多余的形参默认undefined
console.log(add(1, 2, 3))  // 多余的实参被忽略

2、实参

在函数调用时为形参赋值使用

多个参数的时候需要一一对应

四、函数表达式（匿名函数）

函数表达式：就是把函数存到变量里。

匿名函数：没有名字的函数；

函数表达式在使用时只有两种情况：

匿名函数自执行：声明后不需要调用就直接执行

(function(){
    console.log("匿名函数自执行");
})();

函数表达式：把函数存到变量，或将函数存到数组的对应位置里等，调用时通过变量或数组对应位置进行调用。调用时需要写括号。

//函数表达式：把函数存到变量或数组等里，调用时通过变量进行调用
let fn = function(){
    console.log("函数表达式：将函数存到变量里");
};
fn();//调用时需要写括号
 
//函数表达式：把函数存到数组第0位，调用时通过数组第0位进行调用
let arr = [];
arr[0] = function(){
     console.log("函数表达式：将函数存到数组的对应位置");
};
arr[0]();//调用时需要写括号要写括号

五、函数的return用法

return是返回的意思，作用就是给函数一个返回值和中断函数

1.所有函数都会有函数返回值即函数执行后一定会返回一个结果，如果没有定义默认返回undefined；

2.在函数中，return后定义返回值；

3.在函数中，return之后的代码就不会再执行了；’

4.return只能用于函数中，用在其他地方会报错。

function func1(){
    console.log("函数func1执行内容");
} 

function func2(){
    console.log("函数func2执行内容");
    return 1;
    let a = 2;
    console.log(a);  // 因为在 retrun 之后，不执行
} 
        
//如果没有定义默认返回undefined
console.log("func1返回结果："+func1()); //undefined
console.log("func2返回结果"+func2());   //1

六、作用域

作用域就是一个变量可以生效的范围

变量不能再任何地方使用的，而可以使用该变量的就是变量的作用域

作用域分为全局作用域和局部作用域

1、全局作用域

1）全局作用域是最大的作用域

2）在全局作用域中定义的变量可以在任何地方使用

3）页面打开的时候，浏览器会自动给我们生成一个全局作用域windows

4）全局作用域会一直存在，直到页面关闭才销毁

2、局部作用域（函数作用域、块级作用域）

函数作用域：声明在函数内部的某个数据（let，function，参数）,就只能在函数内部使用（函数的局部作用域）

块级作用域（ES6新增）

七、全局污染（命名冲突问题）

全局变量污染：大家都在全局中写代码，很容易造成命名冲突，导致代码冲突。ES6中代码冲突会直接报错。所以要养成好的习惯不要在全局去声明变量。

let list = document.getElementById("list");
let list = document.querySelector(".memulist");
console.log(list);

结果：发现最后获取的只有一个元素，所以很容易造成代码冲突 

解决方法：

(function(){
     let list = document.getElementById("list");
     console.log(list);
})();
 
(function(){
      let list = document.querySelector(".memulist");
      console.log(list);
})();

匿名函数：匿名函数自执行本身就是为了避免在全局写代码，避免冲突的。匿名函数自执行也叫开启一个新的命名空间。即开启新的作用域，此作用域和其他的不会冲突。

八、总结

每当一个函数创建时，作用域链也被创建出来了，作用域链查找过程：在JS中我们调用一条数据时，会先在当前作用域进行查找，如果找不到，就从向上找父作用域的数据，还找不到就接着向上，一直找到全局作用域（window对象），window都找不到就报错。