JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析

一、函数及函数的构造

函数是一个可重用的代码块，用来完成某个特定功能。每当需要反复执行一段代码时，可以利用函数来避免重复书写相同代码。

函数包含着的代码只能在函数被调用时才会执行，就可以避免页面载入时执行该脚本

简单来说就是一个封装,封装的是一个特定的功能,重复使用

函数的三种定义方法：

Function构造函数定义函数

var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);

function语句定义函数

function 函数名 (参数1，参数2……[形参]){
  <语句块>
  return 返回值
}

在表达式中直接定义函数

var 函数名 = function (参数1，参数2，…){函数体};

注意：

函数名的书写规范，不能一数字特殊符号和关键字命名，一般命名方式小驼峰

二、调用函数

1.直接调用

  // //直接调用，window.窗口调用
        // window.show() //show()

2.事件处理中调用

//事件中调用
        //<div onclick="show()">hello</div>

3.将函数的返回值赋给变量

 //将函数的返回值赋给变量
        var t = show()

三、参数

形參：定义函数时，函数名后面()中的参数；JavaScript中的函数允许给行参赋初始值

实参：调用函数时，传递的参数

参数的匹配： 默认情况下，形參和实参是一一对应的 但是当传递的参数个数与函数定义好的参数个数可以不匹配当不匹配时

• 如果传递的参数个数小于函数定义的参数个数，JavaScript会自动将多余的参数值设为undefined；

• 如果传递的参数个数大于函数定义的参数个数，那么多余传递的参数将会被忽略掉。

如果传递的参数是一个数组的话，一一对应太过麻烦，我们就用arguments，获取所有实参

 function show (a,b){
            console.log(arguments.length);
        }
 show('guo','yuan')

function Test(a,b){
    alert(typeof(arguments)); // 获得类型
    alert(arguments[1]);      // 获取下标为1的参数值
    alert(arguments.length);  // 获取参数的长度
    alert(arguments.callee);  // 获取函数的所有内容
}
Test("zhang","li");

四、函数的返回值

五、变量作用域

全局变量： 在函数外声明的的变量为全局，在整个JS文档中生效

局部变量： 在函数内用var声明的变量为局部变量，只能在函数内部使用。

什么是作用域链

• 只要在js中创建变量，就会存在作用域【全局作用域】

• 写在函数内部的被称为局部作用域

• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个新的作用域

• 在函数中如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这样一个查找过程形成的链条就叫做作用域链。

六、预解析

预解析，又称之为变量提升，在js代码真正执行之前，进行提前加载，把所有带有var和function的关键字进行预

//预解析:
            var function 
            console.log(fn) // 函数体
            var fn = 10;
            function fn(){
            }
            console.log(fn) // 变量

同时出现变量和函数的提升，在他们两个之前输出的话解析的是函数体，预解析的优先级大于变量的

如果在他们两个之后输出的话解析的是变量，因为根据优先栈内存找到数据的执行代码顺序先找到的var变量

预解析相关案例练习：

// 案例1
var num = 10;
fun();
function fun(){
  console.log(num);
  var num = 20;
}
// 案例二
var num = 10;
function fun() {
    console.log(num);
    var num = 20;
    console.log(num);
}
fun();

// 案例三
var a = 18;
f1();
function f1() {
    var b = 9;
    console.log(a);
    console.log(b);
    var a = 13;
}

// 案例四
console.log(a,b,c);
var a = b = c = 5;

// 案例四
f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 案例五
fn();//报错 只预解析“=”左边的，右边的是指针，不参与预解析
var fn=function(){
    console.log(11);
}
// 案例六
function fn(){
    console.log(a);
    a=100;
}
fn();
console.log(a);
//注意：js中，如果在不进行任何特殊处理的情况下，上面的代码报错，下面的代码不再执行

// 案例七
console.log(show);
function show(){
  console.log(123);
}
var show = 10;

// 案例八
function show(){
  console.log(123);
}
var show = 10;
console.log(show);