什么是函数呢？
对于JS来说，我们可以把函数理解为任意一段代码放在一个盒子里，在我们想要让这段代码执行的时候，直接执行这个盒子里的代码就行。专业一点来讲：js函数就是由事件驱动的可执行课重复只用的代码块。
函数定义
声明式
function fn() {
}
//这个function就声明了一个名为fn的函数
匿名函数(分为两种情况)
// 赋值式的原理和我们使用var关键字是一个道理
// 首先我们用一个var定义一个变量，把一个函数当做值直接赋值就行了
var fn = function(){
}
// var定义一个fn的变量 然后函数function()赋值给fn
//匿名函数自执行：声明后不需要调用就直接执行
;(function(){
console.log("自执行函数执行");
})();
构造函数式
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(实参)
形参与实参的作用
- 形参
- 形参实际上就是函数内部使用的变量，在函数外部不能使用
- 在定义函数()中每写一个单词，就相当于在函数内部定义一个可以使用的变量，多个单词之前使用
,隔开
// 书写一个参数
function fn(num) {
// 在函数内部就可以使用 num 这个变量
}
var fn1 = function(num) {
// 在函数内部就可以使用 num 这个变量
}
// 书写两个参数
function fun(num1, num2) {
// 在函数内部就可以使用 num1 和 num2 这两个变量
}
var fun1 = function(num1, num2) {
// 在函数内部就可以使用 num1 和 num2 这两个变量
}
- 如果只有形参，没有赋值，那么在函数内部使用的时候会出现
undefined
- 形参的值由函数调用时实参决定的
- 实参
- 在函数调用时为形参赋值使用
- 多个参数的时候需要一一对应
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关键字我们可以任何数据类型当做这个函数运行后的结果
函数的特点
- 函数就是对一段代码的封装，在我们想调用的时候调用
- 函数的几个优点
- 封装代码，使代码更加简洁
- 复用，在重复功能的时候直接调用就好
- 代码执行时机，随时可以在我们想要执行的时候执行
JS预解析机制
JS是一个解释语言，在所有代码执行前都会进行一个预解析
函数提升(整体提升)
- 在内存中先声明有一个变量名是函数名，并且这个名字代表的内容是一个函数
// 在代码执行前这个函数整体已经被提升到代码的最前面
fn();
function fn(){
console.log("hello world");
}
变量提升(局部提升)
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都找不到就报错。
