Javascript函数需要掌握的基本概念有哪些（上)？

函数创建

• 声明式： 函数声明的关键字：function:也会在内存中开辟空间，用来存储变量值中的数据
• 注不要忘记写函数名 function foo(){}
• 语法:function函数名(条件){代码块}
• 函数定义的规范：函数名首字母小写
• 函数的命名规则与变量命名规则相同： 函数推荐驼峰命名 变量推荐下划线命名
• 函数内的代码只会在函数调用时执行

var foo = function(){
     
console.log("hello world");
赋值式可以没有函数名

引用类型

• 函数为一种引用类型，还有其他两种引用类型分别为数组、对象
• 两种数值相同的number做比较运算，其值为真

var foo = function(){
     
 console.log("hello world");
 赋值式可以没有函数名

• 而两个看似相同的函数做比较运算，其值为假。

var foo1 = function(){
     }
var foo2 = function(){
     }
console.log(foo1 === foo2); // false;

• 上述代码为引用类型比较，因地址存放的位置不同，其值为假
• 代码在运行时 ， 都会被放进内存之中;内存在存储代码的时候分成两种形式 :

1. 栈 FILO; 先进后出;基本类型存储的值大小固定
2. 堆 FIFO; 先进先出;地址存储在栈中，通过地址指向堆中的值

函数的调用

函数调用的两种形式;
1.在代码之中调用;
函数名+() 调用运算符;

 foo();

浏览器在特定时机帮你调用函数，又称事件调用。
调用过程：html标签进行触发 => 浏览器接受 => 浏览器调用函数;
例：在点击的时候会让浏览器调用对应的函数;

 btn.onclick = foo btn元素 onclick 为事件 foo为函数

函数的参数

函数的参数分为实参和形参

function foo{
     
if( a === "制冷"){
     
console.log("嗖嗖嗖")    }
if( a === "制热"){
     
console.log("轰轰轰")
  }
 }}
参数;
foo( "制冷" )
foo( "制热" )

上图中a为形参，“制冷” “制热”分别为该函数实参

• 通过上述可以看到，函数的实参是可以比形成多的，同时形参也是可以比实参多的所以大体分为两种情况：
  实参比形参多
• 剩下的参数都使用arguments关键字进行接收, 使用 [] 进行取出
• 函数之中有一个关键字 : arguments 他可以 接受所有的实际参数;
• 那我们怎么把这些参数取出来用呢？
• 拓展：JS之中的取出运算符 两种方法=> . 英文输入法下
  [] 里面可以放任何数据;
  arguments[]使用第二种方法
• 于是便可以用 arguments[]取出对应的参数了

函数的返回值

• 关键字 : return => 函数体内使用
• 例：

function foo(){
     
             return "hello world";
        }
         console.log(foo());

return的特性：
1.在函数之中，只要遇到了return关键字，表示函数执行结束，会立即跳出函数执行
2.无论有多少个return ，只会执行第一个return，因为后面的就不执行了。 因此函数有一个特点， 返回值只能有一个
3.return 可以返回任意数据类型都可以返回;

函数的封装

• 封装优化都是根据具体的需求来确立;
• 所谓封装就是吧不一样的东西提取出来当成参数;
• 例：

btn.onclick = function(){
     
    setRandomColor(body);
    setRandomColor(btn);
    setRandomColor(box);
         }
function setRandomColor( ele ){
     
        //     var r = parseInt(256 * Math.random());  //小于 255 254.xxxxxx
        //     var g = parseInt(256 * Math.random());
        //     var b = parseInt(256 * Math.random());
        //     // 随机颜色 ;  => 字符串;
        //   var random_color = "rgb(" + r + "," + g + "," + b + ")";
        //     // 把随机颜色赋值给body元素;
        //     // 元素.style.cssText = 字符串;
        //     // 给元素的行内样式设置为 => 字符串;
        //     ele.style.cssText = "background-color : " + random_color;
        // }

上述代码想实现不同区域的颜色随机改变，于是将函数设定形参，通过把不同区域设为实参，向函数传递，进而实现需求功能。

预解析

• 预解析是Javascript的机制，因为他是解释形语言，不需要编译。
• 预解析大体体现在两个方面；
  1.检查你的代码有没有语法错误; 如果有语法错误，直接终止程序; 如果你的代码之中有语法错误，那么你的所有代码都不会执行
  例：

 alert("hello world");
        // alert(a); // 报出引用错误;
        // function (){
     
        // }

2.声明提升; 把所有需要和内存交互的行为提前; 把所有的内存操作集中在一起提升代码效率;
例：

foo();// 类型错误; undefined;
        // var foo = function(){
     
        //     console.log("hello world")
        // }
        // foo();
foo();
        // var foo = function(){
     
            // console.log("hello world");
        // }
        声明式的函数声明可以在任何位置调用

2.1 变量提升; 变量声明分成两个部分
2.1.1变量声明; 只有这个部分发生了提升;
2.1.2变量赋值; 只有变量声明部分发生了提升var=foo
例“

console.log(a);
var a = 10;会报错
变量提升；
        var a,b;
 
        // 在原位置，只保留赋值部分功能;
        a = 10;
        b = 20；
        function foo(){
     
        }

2.2 函数提升; 整体提升;
例：`

// foo();
    // function foo(){
     
    // }
console.log(foo);不会报错！

拓展;函数提升和变量提升两者谁的优先级更高;

1.undefined; => 函数先提升，变量声明后提升。
2. 函数; => 函数整体提升，变量部分提升。
3. .声明提升的优先级，局部提升优先提升, 然后整体提升。