zoukankan      html  css  js  c++  java
  • Javascript基础——函数

    一 函数的介绍

      1.概念:由一堆代码按照一定的规则,组成实现了某个功能,通过函数自身或事件调用

       函数的特点:

        忽略细节:只关注其实现的功能,不关注内部构造;

        重复使用:函数可以实现代码的重复利用;

        选择使用:只有当函数执行时,函数中的代码才能运行,不执行即不运行。

        函数的定义的原则:函数封装时跟还需要有对外接口,用来与函数外部交互信息
     
      2.创建(定义,声明)函数:
           声明式:function关键字,声明函数的关键字,类似于var
        例如:function  fn( ) { }  (function声明关键字;fn函数名;( )对外的接口,参数;{ }壳,函数体,函数的执行语句)
     
        赋值式:声明一个变量,将函数赋值给变量;变量名即函数名
        例如 var fn;fn = function( ) { }
      3.函数的执行:
         自身执行:函数名(),任何情况下,只要函数名()了,函数立即执行(主动执行)
         行为(事件)调用:某元素绑定事件,事件触发即执行(被动执行)
          元素.事件 = 函数名------>box.onclick = fn;
             元素.事件 = 函数的内容------>box.onclick = function( ) { }
      4.函数的参数(形参与实参)
        实参:执行时的参数叫实参,实参被形参接收,是一个特定的值;
        形参:定义时的参数叫形参, 形参保存了实参, 形参是变量。
          (传参:是一种行为,函数执行时将实参传给形参)
    function fn(a){
         console.log(a);    //5
    }
    fn(5);

        参数的个数:可以传无限个。

        参数的类型:可以是任何数据类型。(当一个函数A作为参数,传到另一个函数B中,被执行,作为参数的这个函数A,叫回调函数)

        关系:实参和形参,数量一致,按照顺序一一对应(形参多,多出来的形参是undefined;实参多,多出来的实参,被传到arguments对象中)

    function fn(b,a,c){
         console.log(a);                //world
         console.log(b);                //hello       
         console.log(c);                //123
         console.log(argument);       //Argument{0:"hello",1:"world",2:123,3:456,4:789}
    }
    fn("hello","world",123,456,789) ;   

        argument:是一个伪数组,有长度和索引;可以通过遍历拿到所有实参。

      5.函数的返回值  

        返回值:在函数执行结束后,得到的数据,返回到函数的执行语句上。

           (默认情况下,函数返回undefined,如果需要有返回值,要在函数中使用关键字:return)

        返回值作用:如果是处理数据的函数,处理之后的数据,有可能需要二次使用,需要有返回值,返回处理好的数据
        
    二 函数的作用域
      1.概念:变量生效的区域
     
           2.区域:全局与局部
         全局:整个代码文件,不属于任何一个函数,就是全局(全局作用域下的变量,叫全局变量)
         局部:每个函数都是一个局部(局部作用域下的变量,叫局部变量)
     
      3.作用域访问的访问规则:
                 (1)同级局部不能跨
                 (2)父不能拿子,子能拿父
                 (3)多个父子级作用域内都有,找最近的作用域
    三 函数的应用
      1.变量的提升:使用var声明的变量,会提前到当前作用域的开始的位置,被声明。原位赋值。
     
      2.函数的提升:所有使用function声明的函数,都会整体提升,只要在当前作用域内声明了函数,在当前作用的任何位置都可以使用
            (注意:1.赋值式创建函数,提升的是声明,不是函数
                2.当函数和变量重名,变量的提升更高,函数的提升在变量的下面,导致,函数生效)
    function fn(){
        console.log(a);     //f2
        var a = "hello";
        console.log(a);     //"hello"
        function a(){1}
        console.log(a);     //"hello"
        a = "world";
        console.log(a);     //"world"
        function a(){2}
        console.log(a);     //"world"
    }
    fn();
    // 以上代码等价于↓↓↓
    function fn(){
        var a;
        function a(){1}
        function a(){2}
        console.log(a);     //f2
        a = "hello";
        console.log(a);     //"hello"
        console.log(a);     //"hello"
        a = "world";
        console.log(a);     //"world"
        console.log(a);     //"world"
    }
    fn();

      3.函数的递归:在函数中执行自己(递归最重要的就是停止条件)

     //用递归求10的阶乘
    function fn(n){
        if(n == 1){
            return 1
        }else{
            return n * fn(n - 1)
        }
    }
    console.log(fn(10))        
    //利用递归求斐波那契数列(1,1,2,3,5,8,13,21,34,55,89...)
    function fn(n){
        if(n == 1 || n == 2){
            return 1 
        }else{
            return fn(n-1) + fn(n-2)
        }
    }
    console.log(fn(5))                

      4.构造函数

        构造函数:不是一种函数,就是一种执行函数创建数据的方式。

        关键字:new(用来执行函数)
    //创建数值数据:
    var n = new Number(123);
    //创建字符型数据: 
    var s = new String("hello");


     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     


     
       
     
  • 相关阅读:
    WPF 分页控件Pager
    vue Map 渲染DOM
    IDEA 开发工具 Mybatis 快速开发插件 ==》MyBatisX
    令自己的本地ip可以被外网访问
    mybatis按datetime条件查询,参数为时间戳时
    springmvc传参---LocalDateTime、Date等时间类型转换
    java excel导出(表头合并,多行表头)
    JMeter学习工具简单介绍
    idea项目 run、debug变灰色的问题
    vue的ui库使用Element UI,纯html页面,不使用webpack那玩意
  • 原文地址:https://www.cnblogs.com/miaomiaolong2/p/12002071.html
Copyright © 2011-2022 走看看