js函数哪些事

JS函数概念

　　js函数就类似把任意一段代码放在一个盒子里面，调用函数就是直接调用这个这个盒子，让盒子执行里面得代码，得到想要得结果

函数规则

　　高内聚，低耦合。---高内聚：即函数要有很明确的功能性，解决一类问题，而不只是一个问题；低耦合：即函数对其他元素的依赖性，函数在执行过程中，不应该太多的依赖其他的方法或者函数，加入其他方法出问题就会影响到函数的执行。

函数的定义

• 函数的定义分为声明式和赋值式

//声明式
function fn(){
   console.log("我是函数");
}
//调用函数
fn();

//赋值式
var fn1 = function(){
    console.log("我是赋值式函数");
}
<!--调用方式-->
fn1();

函数的声明式定义与调用

• 通过function关键字来声明一个函数，function关键字和var关键字的行为几乎一致，都会在内存上开辟一块空间，用来存储数据

function fn(){
   console.log("我是函数");
}
//调用函数
fn();
<!--function: 声明函数关键字，表示接下来是一个函数-->
<!--fn:函数得名字，自己定义得（遵循变量名得命名规则和规范）-->
<!--():必须写，用来放参数的位置-->
<!--{}:用来放函数代码的位置-->

函数命名规则与规范

• 规则：必须遵守的！！
  • 一个变量名称可以由 数字、字母、下划线(_)、美元符号($)组成
  • 严格区分大小写
  • 不能由数字开头，不能适应中文汉字命名
  • 不能是 保留字/关键字
  • 不能出现空格
• 规范：建议遵守的（不遵守不会报错）
  • 变量名尽量有意义(语义化)
  • 首字母小写
  • 遵循驼峰命名规则 

 函数的赋值式定义和调用

• 函数属于数据类型中的引用类型中的一种，所以也可以认为函数是一种数据

//赋值式函数
var fn1 = function(){
    console.log("我是赋值式函数");
}
<!--调用方式-->
fn1();

<!--赋值式函数中，如果给了函数函数名，但是无法通过函数名直接调用函数，必须通过被赋值的变量-->
var fn1 = function fn(){
    console.log("我是赋值式函数");
}
<!--调用方式-->
fn();  //会报错，test1.html:16 Uncaught ReferenceError: fn is not defined
//正确调用
fn1();

声明式函数和调用式函数的区别

• 声明式函数在函数定义之前或之后调用都可以（因为js在预解析的时候，函数变量会整体提升）
• 赋值式函数只能在函数定义之后调用

<!--声明式函数调用-->
fn();
function fn(){
    console.log("ssss");
}
fn();
-------------------------
//赋值函数的调用
fn();//报错  Uncaught TypeError: fn is not a function 因为此时仅仅式变量fn获得局部提升，fn此时为undefined
var fn = function(){
    console.log('ssssaaaa');
}

fn(); //正确 

函数的参数

• 函数参数分为形参和实参，函数的参数理论上可以有多个，但是实际上，当函数参数过多会使用对象或者数组进行传参

//声明式
function fn(形参){
    <!--函数代码-->
}
fn(实参);
--------------------
//赋值式
var fn = function(形参){
    <!--函数代码-->
}
fn(实参);

• 当函数的实参个数与形参个数相等时，此时参数是一一对应的，但是当实参个数与形参个数不同时　　

<!--实参数量比形参数量少:  
其余未赋值的形参值都为undefined;-->
function foo( a , b , c , d ){
    console.log( a , b , c , d );
}
foo( 1 );

---------------

<!--实参比形参多 :  -->
<!--剩下的参数都使用arguments关键字进行接收, 使用 [] 进行取出;-->
 function foo( a ){
 <!--arguments => 接受所有的实际参数;-->
console.log( arguments[0] ); //1
console.log( arguments[1] ); //2
...
console.log( arguments[6] ); //7
}

foo( 1 , 2 , 3 , 4 , 5 , 6 , 7 );

函数的return

• 函数调用本身也是一个表达式，表达式就应该有一个值出现
• 现在的函数执行完毕之后，是不会有结果出现的
• 关键字：返回，给函数一个返回值和终端函数
• 执行函数时，函数内部的代码从上到下的依次执行，return关键字可以在函数中间的位置停掉，让后面的代码不在继续执行。无论有多少个return，只会执行第一个return， 因此函数的返回值只能有一个;
• return可以返回任意数据类型（包括函数）

function fn() {
  // 执行代码
}
console.log(fn()) // undefined
-----------------

function fn() {
  // 执行代码
  return 100
}
// 此时，fn() 这个表达式执行完毕之后就有结果出现了
console.log(fn()) // 100

函数的优点

• 封装代码，使代码更简洁
• 复用，在重复功能的时候直接调用
• 代码执行时机，随时可以在我们想要执行的时候执行

 

　希望能对伙伴们起到作用，如果有伙伴发现不足之处，请伙伴们指点！

　最后，用一句诗与伙伴们共勉-----不经一番寒彻骨，怎得梅花扑鼻香！