ECMAScript的核心语言 （二）函数 function

js-笔记

函数是一段在一起，可以做某件事的程序。

函数的优点

1、 控制程序设计的复杂性

2、 提高软件的开发可靠性

3、 提高软件的开发效率

4、 提高软件的可维护性

5、 提高程序的重用性

函数的命名

函数名可由开发者自行定义

跟变量的命名规则相同，要有意义(描述性强，简洁)

函数的定义

function  关键字
demo      函数名，有意义
{}        函数体，规定了函数的功能，是函数的主体部分

1、关键字： function demo(){ code..} 声明会提前，推荐使用

demo();         // 返回 1； 函数可以在上面调用
function demo(){
    console.log(1);
}

2、匿名函数： var demo = function(){}

demo();           // 报错，TypeError: demo is not a function
var demo = function(){
    alert('ok');
}

3、构造函数： var demo = new Function('',''); 不推荐

区别

1. 关键字(普通方式)： 函数定义完可以在任何地方调用(不能在另一个script上面)

2. 匿名函数、构造函数(使用var)： 函数定义在下面调用,不能在上面调用

注意

document.write(index());  // 报错，index 不是一个函数
var index;

函数的调用和引用

function getNum(x,y){  // getNum 引用
    var num = x + y
    return num;
}
getNum()  // 调用

函数的实参和形参

形参

1、 在调用函数时，需将实际数据传递给参数列表以完成函数的特定功能参数列表中可定义一个或多个参数

2、 多个参数使用英文逗号,分开

3、 参数列表也可为空

实参

1、 如果定义的函数需要传递参数，则需要在小括号内添加参数

2、 多个参数以逗号分开

形参和实参的数量问题：

function getNum(x,y){  // x,y 为形参
    var num = x + y
    return num;
}

以下数量问题都根据 函数 getNum() 来

1. 实参数量 = 形参数量：
    console.log(getNum(3,4));  // 返回 7
2. 实参数量 > 形参数量； 会自动忽略多余的实参
    console.log(getNum(3,4,5,6,7,8));   // 返回 7；5,6,7,8 被忽略
3. 实参数量 < 形参数量； 没有值的形参是undefined
    console.log(getNum(3));   // 返回 NaN

参数的默认值

function getNum(x = 3,y = 4){  // x 默认为 3，y 默认为 4
    var num = x + y
    return num;
}
getNum()   // 返回 7

函数中 arguments 类数组的使用

具体在 数组 -> 类数组对象 arguments 中写

arguments在严格模式下是一个关键字，使用arguments作为变量名会报错的

function getName(){
    console.log(arguments);         // 获取所有的实参组成类数组对象；返回['a','b','c']
    console.log(arguments[1]);      // 访问指定的参数； 返回 'b'
    console.log(arguments.length);  // 获取实参的个数； 返回 3
}
getName('a','b','c');

函数传参：

函数中对象的引用传参，相当于把（值）传给形参，不改变原始的值

var index = 100;
function show(n) {
    n += 10;
    return n;
}
console.log(show(index));       // 返回 110
console.log(index);             // 返回 100

对象的引用传值，内存地址的引用，改变原始的值

var arr = [1,2,3];
function demo(array) {
    array.push(4);
    return array;
}
console.log(demo(arr));         // 返回 1,2,3,4
console.log(arr);               // 返回 1,2,3,4

注意： 重新赋值是不改变引用的值的，不改变原始的值

var a = [1,2,3];
function play(array) {
    array = [1,2,3,4];          // 重新赋值，断开与之前对象的关系
    return array;
}
console.log(play(a));           // 返回 1,2,3,4
console.log(a);                 // 返回 1,2,3

函数的返回值： 可以，也可以没有返回值

有返回值：使用return

function getNum(x,y){
    var num = x + y
    return num;
}
getNum(3,4) // 返回值 7

没有返回值：默认undefined

function getNum(x,y){
    var num = x + y
}
getNum(3,4) // 返回值 undefined

函数内部调用其他函数：

函数内调用别的函数

function user(){
    return 'www';
}
function getName(){
    console.log(user() + '今天心情很好');
}
getName();

使用参数调用

function demo(m){
    m();
}
function show(){
    console.log('abc');
}
demo(show);

函数内调用自己： 递归函数

1、 使用for循环： 输出5-0

for(var i = 5; i>=0; i--){
    console.log(i);   // 返回 5 4 3 2 1 0 
}

2、 使用函数自己调用自己： 输出5-0

function show(n){
    if(n <0){
        return;
    }
    console.log(n);
    show(n-1);
    console.log(n);    // 注意： 要等上面的show(n-1)循环完之后才输出 0 1 2 3 4 5
}
show(5);   // 返回 5 4 3 2 1 0 0 1 2 3 4 5

3、 使用递归求阶乘：

function getNum(n){
    if(n <= 1){
        return n;
    }
    return n * getNum(n-1);
}
console.log(getNum(5)); // 返回120

函数相同命名，不同位置调用：

函数内套多个函数输出最后出现的函数内容

(function(){
    function fn1(){
        return 100;
    }
    console.log(fn1());
    function fn1(){
        return 200;
    }
})();   // 返回 200

关键字函数和构造函数上面调用结果

以下结果原因： 由于匿名函数只能在函数下面调用，关键字函数在任意地方可调用

demo();             // 返回 2；输出关键字函数的结果
demo = function(){
    console.log(1);
}
demo();             // 返回 1；输出匿名函数的结果
function demo(){
    console.log(2);
}

两个关键字函数同时在上面调用，返回最后一个构造函数的结果

show();             // 返回 200
function show(){
    console.log(100);
}
show();             // 返回 200
function show(){
    console.log(200);
}

作用域链：

先查找函数内部的局部变量，如果存在就使用，如果不存在就继续向上查找

var index = 5;
var myIndex = 30;
function demo2(){
    var index = 4;
    var myIndex = 20;
    return function(){
        var index = 3;
        var myIndex = 10;
        return function(){
            var index = 2;
            console.log(index, myIndex)
        }
    }
}
demo2()()();    // 返回 2 10

作者 wendy
2019 年 5月 23日