JS学习day05--函数高级

1、作用域

作用域指：变量或函数的有效使用范围，有全局作用域与局部作用域两种。

• 全局作用域：<script>标签下
• 局部作用域：函数域

全局变量和局部变量

• 全局变量：直接在 script 标签下声明的变量，任何地方都能访问，任何地方都能对其值进行改变。
• 局部变量：函数内部定义的变量，函数内能访问，出了函数的括号就不能访问（垃圾回收）。

js解析器如何工作：

• 1、预解析：找var 函数 参数。var找到之后给它赋一个值为undefined提到最前面，函数整体提到最前面，参数同var
  • 遇到函数调用，就又新开一个域，继续执行预解析和逐行解读
  • 如果var同var重名，后面的覆盖前面的，如果函数同函数重名，后面的覆盖前面的，如果var和函数同名，则函数覆盖var
• 2、逐行解读：从上到下，一行一行的执行，遇到= += -=等赋值操作，就修改对应的值，遇到读取，就取得对应的值

2、函数的返回值

1、return

函数是用来实现某个特定功能，如计算某个范围内的累加，操作完成之后，在函数外部可能需要使用计算好的这个值，但是在函数内部定义的变量外面访问不了，针对这个情况，函数通过返回值将计算好的数据传出函数，在外部使用。在函数中将某个值返回到函数外，使用 return 关键字。

// 1--n之间所有数的和
function fn(n) {
    var num = 0;
    for (var i = 1; i <= n; i++) {
        num += i;
    }
    // console.log(num);
    return num; // return后面的值，就是函数调用后的结果
}

var v = fn(50); // v就是return后面的值
console.log(v);
console.log(fn(100));

// -----------
// 1--50所有数的和  和 1--100所有数的和  的和
console.log(fn(50) + fn(100));

注意

• 1、函数通过关键字return 返回函数中的内容
• 2、return 一次只能返回一个值
• 3、函数中只要遇到return，函数就会结束
• 4、函数没有返回值，默认结果为undefined

2、函数的返回值类型

函数可以返回任何类型，包括函数

function fn() {
    // return 3;
    // return 'ab';
    // return true;
    // return null;
    // return [1, 2, 3];
    // return {
    //     name: 'zs',
    //     age: 3
    // }
    return function () { }
}

console.log(fn());

3、函数返回值案例

// 获取元素的样式
var box = document.getElementById('box');

// 元素.style.样式  它可以设置样式，但是只能获取行间的样式
// box.style.width = '500px';
// console.log(box.style.width);
// console.log(box.style.height);

// -------------------------
// IE8及以下不支持
// window.getComputedStyle(元素)  返回的是一个对象，即这个元素所有的样式
console.log(window.getComputedStyle(box));
console.log(window.getComputedStyle(box).width);
console.log(window.getComputedStyle(box)['height']);
console.log(window.getComputedStyle(box).backgroundColor);

// -------------------------
// IE支持
// 元素.currentStyle   返回的是一个对象，即这个元素所有的样式
console.log(box.currentStyle);
console.log(box.currentStyle.width);
console.log(box.currentStyle['height']);
console.log(box.currentStyle.backgroundColor);

// -------------------------
// 兼容 原理
console.log(window.getComputedStyle); // 在标准浏览器下，返回函数，在IE8及以下，返回undefined
if (window.getComputedStyle) {
    // 标准浏览器
    console.log(window.getComputedStyle(box).width);
} else {
    // IE8及以下
    console.log(box.currentStyle.width);
}

// -------------------------------
// 完整实现：封装一个方法，用于获取元素的样式
function getStyle(ele, attr) {
    if (window.getComputedStyle) {
        // 标准浏览器
        return window.getComputedStyle(ele)[attr];
    } else {
        // IE8及以下
        return ele.currentStyle[attr];
    }
}

console.log(getStyle(box, 'width'));
console.log(getStyle(box, 'height'));
console.log(getStyle(box, 'backgroundColor'));

3、函数封装及复用

代码复用：

• 1、html结构尽量标准一样
• 2、先实现一个，但是里面的标签必须通过父元素获取
• 3、封装成函数，将父元素作为函数参数传入
• 4、调用

购物车、编缉标题

4、递归

JavaScript 中允许函数递归调用。

• 1、函数调用函数自身（执行递的动作）
• 2、最后一次判断一个终止条件。执行归的动作。

// 打印1--10
var n = 0;
function fn() {
    n++;
    console.log(n);
    if (n === 10) {
        return;
    }
    fn();
}
fn();

// 5的阶乘
function fn(n) {
    if (n === 1) {
        return 1;
    }
    return n * fn(n - 1);
}
console.log(fn(5));
// 5 * 4 * 3 * 2 * 1