07.函数、初始作用域

函数、初始作用域

函数

// 满足一定条件之后要执行一块代码或执行一块功能  或者任意满足一个条件之后执行某个功能
// 代码重复率高(高耦合)
// 编程的高效代码是：高内聚，低耦合。  相同的代码抽离出来
function test() {
    document.write("a");
    document.write("b");
    document.write("c");
}
if(1 > 0) {
    test();  // 调用函数
}
if(2 > 0) {
    test();  // 调用函数
}
if(3 > 0) {
    test();  // 调用函数
}

function test() {
    var a = 123;
    var b = 234;
    var c = a + b;
    document.write(c);
}
test();  // 执行函数

定义

函数声明

function theFirstName() {
    代码块
}
document.write(theFirstName);  // 打印出函数体function theFirstName() {}

// 函数名要用小驼峰(第一个单词小写，后面的单词大写)
function hasOwnProperty() {
    
}

函数表达式

1.命名函数表达式
var test = function abc() {  // 等号后面的部分叫表达式 表达式会忽略名字 所以这个abc不是函数名
    document.write('a');  // 控制台执行test.name结果是abc
}

2.匿名函数表达式   ---函数表达式---
var demo = function () {  // 可以去掉函数名 因为本来就会忽略
    document.write('b'); // 控制台执行demo.name结果是demo
}
// 上面两种写法的区别就是打印函数名的时候一个是test  一个是demo
test();  // 执行函数

组成形式

函数名称

function test() {    // 必须有函数名  function 小括号  花括号
    
}

参数

// 参数可有可无
// 参数决定函数的神奇
// 实参和形参都不限定个数 形参比实参多或者实参比形参多都可以

形参

// a、b只是占位用，一开始并没有实际值，这叫形参
function test(a,b) {
    // 两个形参相当于在函数体中定义两个没有值的变量，通过函数执行的时候给变量赋值
    // var a;
    // var b;
    var c = a + b;   // 函数被抽象出来，每次执行的时候都可以赋不同的值
    document.write(c);   // 打印结果3
}

// test.length 代表形参的长度
// 有实际参数的是实参
test(1, 2)；  // 传参的形式 1赋值给a 2赋值给b

实参

// 如果第一个数大于10就减去第二个数的运算结果，如果第一个数大于10就加上第二个数的运算结果
function test(a,b) {
    if(a > 10 ) {
        document.write(a - b)
    }else if(a < 10) {
        document.write(a + b)
    }elst {
        document.write(10);
    }
    
}

// 有实际参数的是实参
test(11, 2);

// 一个形参(三个实参只会传递第一个实参过来，因为形参只有一个)
function sum(a) {
    
}

// 三个实参
sum(11, 2, 3)

// 形参比较多的话就是前三个分别对应三个实参,d没赋值所以undefined
function sum(a,b,c,d) {
    document.write(a);   // 11
    document.write(b);   // 2
    document.write(c);   // 3
    document.write(d);   // undefined
}

// 三个实参
sum(11, 2, 3)

// 形参比较多的话就是前三个分别对应三个实参,d没赋值所以undefined
function sum(a,b,c,d) {
    // arguments --> [11, 2, 3]  实参列表
    
    // document.write(arguments);  // 打印11，2，3
    // document.write(arguments.length);  // 打印3
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);  // 11 2 3
    }
}

// sum.length是形参长度

// 三个实参
sum(11, 2, 3)

// 当实参大于形参的时候打印实参多了，当形参大于实参的时候打印形参多了
function sum(a,b) {
    if(sum.length > arguments.length ) {
        document.write('形参多了');
    }else if(sum.length < arguments.length ) {
        document.write('实参多了');
    }elst {
        document.write('相等');
    }
    
}

sum(11, 2);

// 对任意个数进行求和(实参任意个)  不定参数
function sum() {
    var result = 0;
    for(var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    document.write(result)
}

sum(1,2,3,4,5,6,7,8,9,10) // 任意多个实参求和

function sum(a,b) {
    // arguments [1,2]
    // var a = 1;
    a = 2; // 给形参a赋值2看看实参会不会改变
    arguments[0] = 3; // 给实参赋值3看形参会不会变
    // 结论是实参改变形参也会改变，形参改变实参也会改变，因为是同一个变量
}

sum(1,2)

// 形参有两个，实参只有一个，实参定义几个就有几个，形参改变也不会往实参列表中添加
function sum(a,b) {
    b = 2; 
    document.write(arguments[1]);  // 打印结果是undefined
}

sum(1)

返回值

// 1.终止函数
function sum(a, b) {
    document.write('a');  // 只打印a 不打印b
    return;     // 终止函数  下面的b就不会执行打印
    document.write('b');
}

sum(1)

// 2.返回值(把值返回函数外)  
// 返回值的声明函数
function sum(a, b) {
    return 123;
    document.write('a');  // 不打印 因为return终止函数
}

var num = sum();  -- 123  

function myNumber(target) {
    return +target;   // 累计变量作为返回值
}
var num = myNumber('123');  // 定义一个变量接收返回值
document.write(typeof(num) + " " + num);  // number 123

课堂练习

// 1.写一个函数，功能是告知你所选定的小动物的叫声。
function scream(animal) {
    swiitch(animal) {
        case "dog" :
        document.write('wang!');
        return;  // 函数终止
        case "cat" :
        document.write('miao!');
        return;  
        case "fish" :
        document.write('o~o~o~');
        return;  
    }
}

// 2.写一个函数，实现加法计数器。

// 3.定义一组函数，输入数字，逆转并输出汉字形式。
// 字符串是基于数组写的，所以可以像拿字符串一样拿字符串
function reverse() {
    var num = window.prompt('input');
    var str = "";   // 空串 用于累加或输出
    for(var i = num.length; i > 0; i --) { // 因为逆转 所以length开始倒
        str += transfer(num.[i]);   // num.[i]作为参数执行transfer函数之后再以字符串形式累加
    }
    document.write(str);
}
// 这个函数作用是传一个汉字过来转换成数字回去
function transfer(target) {
    swiitch(target) {
        case "1" :
        return "壹";  // 函数终止
        case "2" :
        return "贰";  
        case "3" :
        return "弎";  
    }
}
// 4.写一个函数，实现n的阶乘。
// 递归(1.找规律 2.找出口)  递归能让代码更加简洁但是空间复杂度高
function jc(n) {
    if(n == 1 || n == 0) {
        return 1;
    }
    return n * jc(n-1);  // 反复调用这个函数 直到n等于1
}
// 5.写一个函数，实现斐波那契数列。
// 规律：fb(n) == fb(n-1) + fb(n-2)
function fb(n) {
    if(n == 1 || n == 2) {
        return 1;
    }
    return fb(n - 1) + fb(n - 2);
}

函数作用域

作用域定义:

变量(变量作用于又称上下文)和函数生效(能被访问)的区域

全局、局部变量

var a =123;  // 全局变量
function test() {
    var b = 123;  // 局部变量
    // document.write(a);  // 函数里面可以访问函数外面的变量
    function demo() {
        var c = 234
        document.write(a);  // 可以访问外层变量
        document.write(b);
    }
    demo();
    document.write(c); // 外层函数不能访问内层函数
}

作用域的访问顺序

var a =123;  // 全局变量
function test() {
    var b = 123;  // 局部变量
    // document.write(a);  // 函数里面可以访问函数外面的变量
    function demo() {
        var c = 234
        document.write(a);  // 可以访问外层变量
        document.write(b);
    }
    demo();
    document.write(c); // 外层函数不能访问内层函数
}