JavaScript基础 三

函数

/*
function [函数名]([参数1,参数2,。。。。]){
    // 函数体 代码块
    [return 值]
}
*/
/*
    1. 函数声明
        function 函数名(){}
    2. 函数表达式
        var 变量名 = function [函数名](){}

*/
function fn1 (){
    console.log(1);
}
var fn2 = function(){
    console.log(2);
}
fn1();
fn2();

/*
    调用:
        函数名() 直接调用函数(非事件调用)
        el.onclick = 函数名; 事件调用
*/

/*
    el.onclick = function(){}  //匿名函数
*/

函数传参

/* fn 函数 计算两个数值的结果 */
function fn(a,b){
    console.log(a,b);
}
fn(1,2);
/*
    function fn(a,b){ //形参 定义函数中要接收的数据

    }
    fn(1,2);



形参
    形式上的参数
    函数定义的时候，写在小括号中
    形参的命名规则，要符合变量的命名规则
    形参是在函数的内部声明的变量,默认值为undefined
    形参用来接收实参的值
    形参只能在函数中使用


实参
    实际参入的参数
    在调用函数时，写在小括号中
    把实参赋值给形参
*/

// 什么情况下需要用到传参
// 当我们要执行的代码中，有两段（及以上）代码块，功能和结构相似，就可以把他们写到一个函数中，然后把不一样的地方，抽离使用参数传递进去

//不定参
/* 计算商品总价格 */
function fn(){
    var nub = "";
    for(var i = 0; i < arguments.length; i++){
            nub += arguments[i];    
    }
    console.log(nub);
}    
fn("a","b","c","b");
/*
arguments 不定参(可变参)
    实参的个数不固定，不确定的时候
    arguments是函数实参的集合、类数组

类数组
        和数组有一些相同的特性，不具备数组的全部的特性
        相同特性：
            结构相同 []
            具有length属性 
            使用下标获取
        不相同特性：
            类数组没有数组的方法

*/

//返回值
function fn(){
    var a = 10;
    return a; 
}    
var b = fn();
console.log(b);
/*
    函数的执行结果就是函数的返回值

    每一个函数被调用后都有一个返回值
    1. 调用后默认为undefined
    2. 使用return返回值

*/

function fn(){
    var a = 10;
    return function(){
        return a;
    }; 
}    
var b = fn()();
console.log(b);


//使用 return注意事项
function fn(){
    return 10;
    alert(1);
}    
fn();
/*
    关键字return
        a. 只能在函数中使用
        b. 函数调用后返回return后面的值
            如果return后没有值，函数返回值为undefined
        c. return之后的代码终止执行
*/

函数的调用

function fn(){
    var a = 0;
    a++;
    console.log(a);
}

fn();// 1 
fn();// 1
fn();// 1
// 注意函数的每次调用执行，就相当于新写了一个函数和上次 没有任何关系

获取计算后样式

function $id(id){
    return document.getElementById(id);
}

var box = $id("box");

console.log(getComputedStyle(box)["backgroundColor"]);
/*
    getComputedStyle() //获取计算后样式

    接受参数：是要获取样式的对象
    返回值:    object，计算后样式的集合对象
        如果要获取具体的样式可以使用 属性获取
*/    
function $id(id){
    return document.getElementById(id);
}

var box = $id("box");

function getStyle(el,attr){
    return getComputedStyle(el)[attr];
}
console.log(getStyle(box,"width"));

js预解析

var a;
/*
    js预解析

        var js 正常解析之前，会先快速把 script(或者function) 中的 var 声明，及声明的名字，提升到代码块(作用域)的最前边

        function 正常解析之前，会先快速把 script(或者function) 中的 function 及内容，提升到代码块(作用域)的最前边，跟在 var 声明之后.

    预解析之后，js 再会从上到下 一行一行去执行
*/    
alert(a);
a = 0;
function a() {
    alert(1);
}

/*
被预解析之后的样式:
    var a;
    var a;
    function a () {var b = 1;}
    console.log(a);
    a = 10;
    console.log(a);
    console.log(a);
    a = function(){var b = 2;}
    console.log(a);
*/

console.log(a);
var a = 10;
console.log(a);
function a () {var b = 1;}
console.log(a);
var a = function(){var b = 2;}
console.log(a);

作用域

/*
    作用域
        作用域（scope），程序设计概念，通常来说，一段程序代码中所用到的名字并不总是有效/可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强程序的可靠性，减少名字冲突

    作用域，一条数据可以使用的范围，就是这条数据的作用域
        全局作用域(window)
        局部作用域(函数作用域)

        块级作用域(ES6新增)
*/

局部作用域

/*
    局部作用域(函数作用域):
        声明在函数内部的数据(参数，函数，变量),就只能在这个函数内部进行调用和修改,那这些数据我们就叫做这个函数的局部数据(或者私有数据),同样，对于这些数据他们起作用的范围也只是这个函数内部,这数据的作用范围是局部，所以又叫做局部作用局或者函数作用局
*/
function fn(b){
    var a = 0;
    console.log(a);
    a = 10;
    console.log(a);
}
function fn2(){
    alert(a);
}
fn();
fn2();

全局作用域

var a = 0;

function fn(){
    a = 10;
}    
function fn2(){
    console.log(a);
}
fn();
fn2();
/*
    声明在任何函数之外，那这条数据，就可以在全局的任意地方使用，它的作用范围时全局的，所以叫全局作用域，这条数据我们也叫全局变量
*/

function fn(){
    a = 10;
    /* 当一个变量，没有声明，js会认为 它是 window 的属性 */
}    
function fn2(){
    console.log(a);
}
fn();
fn2();

window

a = 10;
console.log(window.a);
/*
    在 js 中，在调用 window 的属性时，window 可以省略不写

    代码中任何地方都能访问到的拥有全局作用域，有以下情况：
        1.  声明在任何函数之外，那这条数据，就可以在全局的任意地方使用，它的作用范围时全局的，所以叫全局作用域，这条数据我们也叫全局变量
        2.  不使用var声明直接赋值的变量拥有全局作用域
        3.  所有 window 对象的属性拥有全局作用域
*/