JS函数详解

什么是函数呢？

对于JS来说，我们可以把函数理解为任意一段代码放在一个盒子里，在我们想要让这段代码执行的时候，直接执行这个盒子里的代码就行。专业一点来讲：js函数就是由事件驱动的可执行课重复只用的代码块。

函数定义

• 函数定义基本有三种为声明式，赋值式和构造函数式

声明式

• 使用function关键字去声明一个函数
• 语法:

function fn() {
	
}
//这个function就声明了一个名为fn的函数

匿名函数(分为两种情况)

• 赋值式

// 赋值式的原理和我们使用var关键字是一个道理
// 首先我们用一个var定义一个变量，把一个函数当做值直接赋值就行了
var fn = function(){
    
}
// var定义一个fn的变量 然后函数function()赋值给fn

• 自执行函数

//匿名函数自执行：声明后不需要调用就直接执行
;(function(){
    console.log("自执行函数执行");
})();

构造函数式

• 使用构造函数式我们需要用到一个关键字new

var object = new Object();
//这里是js语言自带的构造函数

函数在调用上区别

• 虽然两种定义方式的调用都是一样的，但是还是有一些区别的
• 声明式函数： 调用可以在 定义之前或者定义之后

// 可以调用
fn()
// 声明式函数
function fn() {
	console.log('我是 fn 函数')
}
// 可以调用 fn函数
fn()

• 赋值式函数：只能在定义之后

// 会报错 
fn()
// 赋值式函数
var fn = function() {
	console.log('我是 fn 函数')
}
// 可以调用
fn()

• 自执行函数:不需要调用，可以直接执行

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

函数的参数

在定义函数的时候我们都需要使用到()，而这个()就是存放参数的地方，参数分为形参和实参

// 声明式
function fn(形参){
    // 一段代码
}
fn(实参);
// 赋值式
var fn = function(形参){
    // 一段代码
}
fn(实参)

形参与实参的作用

1. 形参

• 形参实际上就是函数内部使用的变量，在函数外部不能使用
• 在定义函数()中每写一个单词，就相当于在函数内部定义一个可以使用的变量，多个单词之前使用,隔开

// 书写一个参数
function fn(num) {
	// 在函数内部就可以使用 num 这个变量 
}
var fn1 = function(num) {
	// 在函数内部就可以使用 num 这个变量 
}
// 书写两个参数
function fun(num1, num2) {
	// 在函数内部就可以使用 num1 和 num2 这两个变量 
}
var fun1 = function(num1, num2) {
	// 在函数内部就可以使用 num1 和 num2 这两个变量 
}

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

2. 实参

• 在函数调用时为形参赋值使用
• 多个参数的时候需要一一对应

function fn(num1, num2){
    //这里可以使用num1和num2
}
//这样在fn函数中调用num1和num2时，他们的值就是num1=100,num2=200;
// 如果参数没有一一对应那么函数调用的时候就会出现undefined
fn(100,200);

函数不定参数(可变参)-关键字arguments

• 但实参传入的值是不确定的参数个数的时候，在形参我们也不知道怎么去接收，这个时候我们就需要使用arguments来接收参数

function fn(){
            console.log(arguments);
            console.log(arguments[0]);
            console.log(arguments[1]);
            console.log(arguments[2]);
            console.log(arguments[3]);
            console.log(arguments[4]);
            console.log(arguments[5]);
            console.log(arguments[6]);
        }
fn(1,2,3,4,5,6,7)

函数的return的用法

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

返回值

• 每一个函数自身就是一个表达式，使用return关键字可以是返回一个结果出去

function fn(num1, num2){
   return num1 + num2;
}
var res = fn(100, 200);
console.log(res);//结果为300

• 如果没有return返回一个结果 那么去打印函数的结果就是undefined

function fn(){
    
}
console.log(fn());// undefined

• 在函数里使用return关键字我们可以任何数据类型当做这个函数运行后的结果

函数的特点

• 函数就是对一段代码的封装，在我们想调用的时候调用
• 函数的几个优点

1. 封装代码，使代码更加简洁
2. 复用，在重复功能的时候直接调用就好
3. 代码执行时机，随时可以在我们想要执行的时候执行

JS预解析机制

• 说到预解析机制，我们需要说到变量提升和函数提升

JS是一个解释语言，在所有代码执行前都会进行一个预解析

函数提升(整体提升)

• 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数

// 在代码执行前这个函数整体已经被提升到代码的最前面
fn();
function fn(){
    console.log("hello world");
}

变量提升(局部提升)

• var关键字，在内存中先声明有一个变量名

console.log(num);//undefined
var num = 10;
// 在代码执行之前，这个变量被提升到代码最前面，但是并未被赋值，所以打印的时候是undefined

作用域

• 什么是作用域？就是一个变量可以生效的范围
• 变量不能再任何地方使用的，而可以使用该变量的就是变量的作用域
• 作用域分为全局作用域和局部作用域

全局作用域

• 全局作用域是最大的作用域
• 在全局作用域中定义的变量可以在任何地方使用
• 页面打开的时候，浏览器会自动给我们生成一个全局作用域windows
• 全局作用域会一直存在，直到页面关闭才销毁

// 在页面任何一个地方都可以使用
var num1 = 100;
var num2 = 200;

局部作用域

• 在js中只有函数里才能出现局部作用域
• 局部作用域中定义的变量只能在局部作用域中使用
• 每一个函数都是一个局部作用域

function fn(){
   var num = 10;
   console.log(num);
}
//    局部作用域的作用范围只能在函数中使用，所以这里打印is no defined
console.log(num);

变量使用规则

• 有了作用域之后，变量就有了使用范围和使用规则
• 变量使用规则分为两种: 范围规则和赋值规则

访问规则

• 当我想获取一个变量的时候，我们称这个行为叫做访问
• 获取变量的规则
  • 首先，在自己作用域内部查找，如果有，就直接拿来使用
  • 如果没有，就去上一级作用域查找，如果有，直接拿来使用
  • 如果没有，就继续向上一级作用域查找，依次类推
  • 如果一直查找到全局作用域都没有这个变量，那么就会直接报错 is no defined

var a = 1;
function poo(){
var num1 = 100;
function foo(){
    var num2 = 200;
    console.log(num1);//自己作用域没有向上一层查找
    console.log(num2);//自己作用域有直接拿来用
    console.log(a);//一直查找到全局作用域
    console.log(num3);//全局作用域没有，就直接报错 is no defined
}
foo();
}
poo();

• 作用访问规则，又叫作用域查找机制
• 作用域查找机制，只能由内向外，不能由外向内

function fn(){
    var num = 100;
}
console.log(num);//无法找到num

赋值规则

• 当你想要给一个变量赋值的时候，我们需要先找到这个变量在给它赋值
• 变量赋值规则
  • 先在自己的作用查找变量，查找到之后直接赋值
  • 没有的话就向上一级作用域查找，有就直接赋值
  • 直到找到全局作用域，如果还没有找到的话，js会将这个变量变为伪全局变量

function fn(){
num = 100;
}
console.log(num);//这里的num变成了伪全局变量，可以访问到

总结

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