zoukankan      html  css  js  c++  java
  • 前端笔记JS篇之三(函数和预解析)

    一.函数

    1.声明和调用

    //申明   
    function fun_name 
        //函数体代码;
    }
    
    //调用:
    fun_name() 
    

    2.实参和形参

    // 形参
    function fun_name(形参一,形参2...) {
        //函数体代码;
    }
    
    //实参
    (实参一,实参二....)
    

    形参和实参的匹配

    1.如果形参和实参个数相等,则实参按照位置顺序给形参赋值
    2.如果实参个数多于形参个数,则只取到形参的个数,多于的舍去
    3.如果实参少于形参,那么多定义的形参取默认值undefined.

    3.函数的return语句

    函数都有返回值,如果没有用return来指定特定的返回值,默认返回undefined.

    function 函数名 (){
        return 需要返回的结果;
    }
    

    (1)return是终止函数

    函数体内,return后面的代码块不会被执行

     <script>
          var num1 = Number(prompt('num1'))
          var num2 = Number(prompt('num2'))
          function getNum(num1, num2) {
              return num1 + num2;
              alert('这个弹窗不会被执行');
           }
           alert(getNum(num1, num2))
    </script>
    

    (2)return只能返回一个值

    想要返回多个值,可以使用数组

    如果函数有return,则返回的是retrun后面的值,如果没有return返回undefind.

    <script>
    	function getNum(num1,num2,num3){
    		return num1,num2,num3;
    	}
    	console.log(getNum(1,2,3));   //输出的是最后一个值,3
    </script>
    

    4.arguments的使用

    <script>
    	function getNum(){
    		console.log(arguments);
    	}
    	getNum(1,2,3);   //输出1,2,3
    </script>
    

    注:

    1.函数会把所有传进来的实参以伪数组的方式储存在arguments里面
    2.伪数组不是真正意义上的数组 : 具有数组的length属性,按照索引的方式储存,但是没有真正数组的一些方式,pop(),push()等。

    demo

    输出一组数据中的最大值

    function getMax() {
           var max = arguments[0]
           for (i = 1; i < arguments.length; i++) {
                 if (arguments[i] > max) {
                     max = arguments[i]
                  }
              }
              return max
            }
      alert(getMax(1, 2, 3, 45, 56, 666)) //输出666
    

    5.匿名函数

    //var 变量名 = function( ) {};
    var fun = function( ) {
        console.log('我是函数表达式')
    }
    //调用
    fun(); //调用和命名函数是一样的
    

    6.js的作用域

    (1)全局变量域

    是整个script标签或者一个单独的js文件

    全局变量:

    在全局变量域下的变量为全局变量。

    (2)局部变量域

    在函数内部的就是局部作用域

    局部变量:

    在局部作用域下的变量就是局部变量,只能在当前函数里面使用。

    特殊情况

    在函数内部也能定义全局变量(不加关键字var,直接赋值的变量),不过要先调用函数,才能在函数外部使用这个全局变量。

     function getMax() {            num = 20;  // 不加关键字var定义        } getMax() //调用一遍函数alert(num)   //在函数外面调用num
    

    (3)作用域链

    内部函数访问函数外部的变量,采用的是链式查找的方式。(就近原则)

    <script>	 var num = 1;	 function fn1() {		 var num = 6666;		 function fn2() {		   console.log(num);           //输出的是6666		 }	   fn2();	 }	 fn1();</script>
    

    从执行效率来看全局变量和局部变量

    1.全局变量只有浏览器关闭的时候才会销毁,比较占内存。

    2.局部变量程序执行完毕就会销毁,比较节约。

    二.预解析

    问题1(坑)

    调用变量写在前面

    <script>     console.log(num);       //执行这个程序会输出undefined     var num = 10;</script>
    

    问题2(坑)

    调用匿名函数写在前面

    <script>     num( );  // 会直接报错     var num = function() {        console.log('我是匿名函数');         }			</script>
    

    问题3

    <script> fn( )              //可以成功运行 function fn(){	console.log('我是命名函数')  }</script>
    

    问题所在

    js运行分为两步 : 预解析代码执行

    (1)预解析

    js引擎会把js里面所有的 var(变量提升) 还有function (函数提升)提升到当前作用域的最前面。

    (2)代码执行

    按照代码的书写顺序从上往下执行

    (3)变量提升

    就是把所有的变量申明提到当前作用域的最前面,但是不赋值。

    普通变量

    <script>
         console.log(num);       //执行这个程序会输出undefined
         var num = 10;
    </script>
    

    相当于执行了,所以会输出undefined

    <script>
    var num   //命名变量提到最前面
    console.log(num);   
    num = 10;
    </script>
    

    匿名函数

    <script>
         num( );  // 会直接报错
         var num = function() {
            console.log('我是匿名函数');
             }			
    </script>	
    

    相当于执行了,所以会报错

    <script>
        var num
        num( ); 
        num = function() {
            console.log('我是匿名函数');
             }			
    </script>
    

    (4).函数提升

    就是把所有函数申明都提到前面,但是不调用。

    综合demo

    <script>
        var num = 10;
        function fun(){
            console.log(num);
            var num = 20;   
        }
        fun (); 
    </script>
    

    相当于执行了

    <script>
        var num ;
        function fun(){
         var num;  //函数里面的var也会提升到最前面
            console.log(num);       //--------undefined--------
            num = 20;
        }
        num = 10;
        fun ();    
    </script>
    

    参考来源:黑马程序员pink老师讲课视频

  • 相关阅读:
    字符串题目
    Java 练习题摘录
    数据库原理及应用-引言
    数学类题目
    牛顿法
    动态规划-最大子段和
    判断数幂
    杭电1096
    算法导论01 几种排序以及其时间复杂度01
    杭电2059龟兔赛跑
  • 原文地址:https://www.cnblogs.com/lc-snail/p/15190679.html
Copyright © 2011-2022 走看看