JavaScript函数

JavaScript函数

1. 函数的基本概念

1) 函数

由事件驱动或者调用时可以被重复执行的代码块,用以实现某种功能

2) 好处

减少代码冗余,增强代码的灵活性,提高代码的可扩展性和可维护性

3) 函数封装 ( 创建 )

(1) 函数的声明

function functionName(){
    //和功能相关的代码
}

(2) 函数表达式( 赋值式 )

var bar = function (){
    //功能相关代码
}

(3) 借助内置的构造函数( 目前先了解 )

var baz = new Function () ; 

4) 函数的执行

(1) 调用

function fn1(){
    console.log("ok1");
}
fn1();//第一次调用
fn1();//第二次调用
//......

(2) 事件驱动

<button id="btn">
    运行函数
</button>
<script>
function fn1(){
    console.log("ok1");
}
function fn2(){
    console.log("ok2");
}
btn.onclick = fn1;//由单击事件驱动,fn1函数在此处运行一次
btn.onclick = fn2;//由单击事件驱动,fn2函数在此处运行一次,并覆盖上面fn1函数的执行
</script>

注意 : 这里的函数和调用时的函数后面需不需要加小括号 。

拓展 : var和let

/* 1. let不存在声明提升
2. 不能重复声明
3. let存在块级作用域
4. let不能作为window对象的属性 */

2. 参数

在创建函数时,不能确定参数,在调用时才能够确定的情况下

1) 形参 ( 写在小括号里面 , 多个形参应该用逗号隔开 )

function aajx( x , y ){
    var sum = x + y ;
}

2) 实参 ( 调用时,将实参写在括号内用以替换掉形参 )

function aajx( x , y ){
    var sum = x + y ;
}
aajx( 10 , 20 );//这时实参就会传递给形参,一一对应,第一个传给第一个形参......
//1. 实参多  多余的实参无用

//2. 形参多 缺失实参的形参会转变为undefined
aajx( 10 ) ; //10 + undefined = NaN;

3. 代码预编译和声明提升

1) 当js引擎在执行js代码之前,会先扫描整个环境中的所有声明 ( 包括变量声明和函数声明 )

(1) 可以先使用再声明

console.log(a);//undefined
var a=10;
console.log(a);//10

(2) 变量只提升变量名

var a;
console.log(a);//undefined
a=10;

(3) 使用声明式的方式定义的函数时整体提升(赋值式不可以)

fn();
function fn() {
  console.log("ok");
}

(4) 同名的变量声明和函数声明,都提升了,函数优先使用

var fn = 1;
fn=function (){
    console.log("ok1");
};
fn();

4. arguments

用在函数内部的，保存了所有实参的一个集合， 用在需要实参，但是又无法确定形参个数的情景下

5. return

用在函数内部 , 用以结束函数执行或者作为函数的返回值

如果使用return结束函数 , 一般会跟一个条件

如果一个函数没有return或者return后面没有跟值 , 那么默认返回undefined