JavaScript函数详解:匿名函数、具名函数、函数传参、不定参、返回值、JS预解析机制 

 

1.具名函数 

定义:

 调用:

  方式1:方法名(); 可以多次调用

       

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数

        方式2:在事件中调用,直接写函数名,不需用括号

         

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_02

 

2.匿名函数

  • 没有名字的函数
  • 匿名函数在使用时只有两种情况:

   1.匿名函数自执行:声明后不需要调用就直接执行

             

jquery匿名函数参数 js 匿名函数 参数_函数表达式_03

           2.把函数存到变量,或将函数存到数组的对应位置里等,调用时通过变量或数组对应位置进行调用。调用时需要写括号。

 

3.函数表达式

把函数存到变量,或将函数存到数组的对应位置里等,调用时通过变量或数组对应位置进行调用。调用时需要写括号。 

jquery匿名函数参数 js 匿名函数 参数_匿名函数_04

 

4.使用new Function方式

jquery匿名函数参数 js 匿名函数 参数_函数表达式_05

5.函数传参

  • 形参:形式上的参数——给函数声明一个参数;
  • 实参:实际的参数——在函数调用时给形参赋的值

      

jquery匿名函数参数 js 匿名函数 参数_匿名函数_06

 

6.函数返回值

即函数执行之后的返回结果。

  • 所有函数都会有函数返回值即函数执行后一定会返回一个结果,如果没有定义默认返回undefined;
  • 在函数中,return后定义返回值;
  • 在函数中,return之后的代码就不会再执行了
  • return只能用于函数中,用在其他地方会报错

 

7.函数的不定参(可变参)使用关键字arguments

 

8.事件函数扩展

给元素添加事件的说法是不正确的。事件是元素本身就具有的特征,只是触发事件后,默认没有相关的一些处理。这种操作其实就是给元素的某个事件添加一个事件处理函数。当事件被触发后,判断到属于该事件类型,就触发该事件函数的处理函数。

可以通过console.dir()把对象的所有属性和方法打印出来,查看对象或元素本身具有的事件。

 

9.JS预解析机制(变量提升)

JS预解析机制(变量提升(Hoisting)):JS在读取到一个script标签(或者一个函数作用域)时,会先进行一个预解析的过程,在这个过程中,会把除函数中的var声明的变量和function声明的函数体,提升到整个scriptt标签(或者一个函数作用域)最前边去。而函数中var声明的变量会提升到函数内部的最前面,如果与外部的变量命名冲突,不会影响外部变量的声明以及赋值。函数内部使用一个变量时,首先会在函数内部寻找,如果没有,会一层一层向外查找。在预解析完之后,JS才会从上到下一行一行解析代码并执行。

  • var在预解析时,会把声明提升到最前边(赋值前打印返回undefined)。只提升声明,不会把赋值过程进行提升
  • function的函数体在预解析时,会把整个函数体提升至最前边
  • 函数表达式(函数表达式:var fn = function(){};)只会提升函数表达式的声明,不会执行(真正执行函数表达式前调用会返回undefined)
  • 在预解析时,会先预解析var(包括变量声明和函数表达式的变量声明),先把var放在最前面,然后再预解析function,所以当var和function重名时,function会覆盖var

 案例1:

      

jquery匿名函数参数 js 匿名函数 参数_数组_07

   结果:

      

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_08

   案例2:

     

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_09

    结果:

    

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_10

注意:

JS预解析机制不是良好的编码习惯,不利于代码维护,建议不要使用,编码时建议先声明,再使用。

扩展:从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

ES6之后就不能像JS预解析这么编写JS代码了,例如:

jquery匿名函数参数 js 匿名函数 参数_匿名函数_11

 

jquery匿名函数参数 js 匿名函数 参数_匿名函数_12

 




1.具名函数 

定义:

 调用:

  方式1:方法名(); 可以多次调用

       

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数

        方式2:在事件中调用,直接写函数名,不需用括号

         

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_02

 

2.匿名函数

  • 没有名字的函数
  • 匿名函数在使用时只有两种情况:

   1.匿名函数自执行:声明后不需要调用就直接执行

             

jquery匿名函数参数 js 匿名函数 参数_函数表达式_03

           2.把函数存到变量,或将函数存到数组的对应位置里等,调用时通过变量或数组对应位置进行调用。调用时需要写括号。

 

3.函数表达式

把函数存到变量,或将函数存到数组的对应位置里等,调用时通过变量或数组对应位置进行调用。调用时需要写括号。 

jquery匿名函数参数 js 匿名函数 参数_匿名函数_04

 

4.使用new Function方式

jquery匿名函数参数 js 匿名函数 参数_函数表达式_05

5.函数传参

  • 形参:形式上的参数——给函数声明一个参数;
  • 实参:实际的参数——在函数调用时给形参赋的值

      

jquery匿名函数参数 js 匿名函数 参数_匿名函数_06

 

6.函数返回值

即函数执行之后的返回结果。

  • 所有函数都会有函数返回值即函数执行后一定会返回一个结果,如果没有定义默认返回undefined;
  • 在函数中,return后定义返回值;
  • 在函数中,return之后的代码就不会再执行了
  • return只能用于函数中,用在其他地方会报错

 

7.函数的不定参(可变参)使用关键字arguments

 

8.事件函数扩展

给元素添加事件的说法是不正确的。事件是元素本身就具有的特征,只是触发事件后,默认没有相关的一些处理。这种操作其实就是给元素的某个事件添加一个事件处理函数。当事件被触发后,判断到属于该事件类型,就触发该事件函数的处理函数。

可以通过console.dir()把对象的所有属性和方法打印出来,查看对象或元素本身具有的事件。

 

9.JS预解析机制(变量提升)

JS预解析机制(变量提升(Hoisting)):JS在读取到一个script标签(或者一个函数作用域)时,会先进行一个预解析的过程,在这个过程中,会把除函数中的var声明的变量和function声明的函数体,提升到整个scriptt标签(或者一个函数作用域)最前边去。而函数中var声明的变量会提升到函数内部的最前面,如果与外部的变量命名冲突,不会影响外部变量的声明以及赋值。函数内部使用一个变量时,首先会在函数内部寻找,如果没有,会一层一层向外查找。在预解析完之后,JS才会从上到下一行一行解析代码并执行。

  • var在预解析时,会把声明提升到最前边(赋值前打印返回undefined)。只提升声明,不会把赋值过程进行提升
  • function的函数体在预解析时,会把整个函数体提升至最前边
  • 函数表达式(函数表达式:var fn = function(){};)只会提升函数表达式的声明,不会执行(真正执行函数表达式前调用会返回undefined)
  • 在预解析时,会先预解析var(包括变量声明和函数表达式的变量声明),先把var放在最前面,然后再预解析function,所以当var和function重名时,function会覆盖var

 案例1:

      

jquery匿名函数参数 js 匿名函数 参数_数组_07

   结果:

      

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_08

   案例2:

     

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_09

    结果:

    

jquery匿名函数参数 js 匿名函数 参数_jquery匿名函数参数_10

注意:

JS预解析机制不是良好的编码习惯,不利于代码维护,建议不要使用,编码时建议先声明,再使用。

扩展:从概念的字面意义上说,“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面,但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的,而是在编译阶段被放入内存中。

ES6之后就不能像JS预解析这么编写JS代码了,例如:

jquery匿名函数参数 js 匿名函数 参数_匿名函数_11

 

jquery匿名函数参数 js 匿名函数 参数_匿名函数_12