美文网首页Web前端之路
JavaScript函数定义和方法介绍

JavaScript函数定义和方法介绍

作者: 卓三阳 | 来源:发表于2017-11-09 17:29 被阅读59次

    一.函数定义三种方法

    函数的三种定义方法分别是:函数声明、函数表达式和Function()构造函数的方法。下面依次介绍这几种方法具体怎么实现。

    1.函数声明

     function  isFun(th){
          alert(th+"is Fun");
       }
    

    如果你觉得下面关于函数作用域的讲解影响你的思路可以跳过,这个只是补充。
    既然提到函数声明,就要提到函数作用域。函数作用域是指在函数内声明的所有变量在函数体内始终是可见的,这意味着,变量在声明之前已经可用。这个特性可以被称为声明提前,即在函数体内声明的所有变量,在声明之前已经有定义,但只有在执行到这个变量时才会被真正赋值。下面我们通过代码来验证这一点。

     functon test(){
       alert("scope");     //不会报错,会输出undefined
       var scope="local"; //变量在这里赋初始值,但变量本身在函数体内任何地方均是有定义的
       alert("scope");      //输出“local”  
    }
    

    上面的代码等价于

     functon  test(){
       var scope;        //在函数顶部声明了局部变量,即声明提前 
       alert("scope");     //不会报错,会输出undefined
       var scope="local"; //变量在这里赋初始值
       alert("scope");      //输出“local”  
    }
    

    2.函数表达式,又叫函数字面量

     var isFun=function(th){
         alert(th+"is Fun");
      } 
    

    自执行函数严格来说也叫函数表达式,它主要用于创建一个新的作用域,在此作用域内声明的变量,不会和其它作用域内的变量冲突或混淆,大多是以匿名函数方式存在,且立即自动执行。自执行函数能防止变量全局污染,防止多人协作时冲突,保护自己的代码不受污染。自执行函数我们等讲完函数闭包后再说。

    两者的区别:
    函数声明这种函数定义方式需要显式的指定函数名称,在代码执行前就被解释器加载到作用域中,这个特性可以让我们在函数定义之前就调用该函数;而函数表达式则必须等到解析器执行到它所在的代码行才会真正被解释执行。
    一旦用到变量,则变量名存入到堆内存,变量值存入到栈内存,此时内存回收程序员是无法控制的,只能等待浏览器回收。
    一旦执行函数,函数进入到栈内存中,函数的变量被加载到栈内存中,函数执行后,马上释放栈内存。下面我们通过代码来说明这一点。

    function patty(){
     alert("patty is 1");
    }
    
    patty();     //patty is  2
    
    function patty(num){  //带参数也不影响覆盖
     alert("patty is  2");
    }
    
    patty();    //patty is  2
    
    var patty=function(){
     alert("patty is  3");
    }
    patty();     //patty is  3
    

    上面的代码很清楚的说明这一点。但在这里我还想说明两点:
    (1)js不支持重载 重载即覆盖。

    (2)arguments在函数体内可以直接使用,不需要我们去定义(隐式存在不用定义)。所以函数参数对覆盖毫无影响。
    在JavaScript中函数在调用的时候,传递的参数会从左到右,依次对函数的参数进行赋值,没有被赋到值的参数默认值为undefined。 在function内可用arguments[i]来获取传入的可变参数。

    3.函数构造法

    从技术角度讲,这是一个函数表达式。一般不推荐用这种方法定义函数,因为这种语法会导致解析两次代码(第一次是解析常规ECMAScript代码,第二次是解析传入构造函数中的字符串),从而影响性能。

    //var 函数名 = new Function(“参数列表”,”函数体”);
    var sum = new Function('num1','num2','return num1+num2');
        // 函数调用
        var result = sum(120,130);
        alert(result);
    

    与前两者方式不同的是,Function()构造函数允许JavaScript在运行时动态地创建并翻译函数。每次调用Function()构造函数都会解析函数体,并创建新的函数对象。因而,在循环或多次调用的函数中执行这个构造函数,执行效率会受影响。相比之下,循环中的嵌套函数和函数定义表达式则不会每次执行时都重新编译。

    Function()构造函数还有值得注意的一点就是它所创建的函数并不是使用词法作用域,函数体代码的编译总在顶层函数执行。如下代码所示:

    var a = 3;     //在顶层函数中声明变量a  
    function test(){  
        var a = 2;   //在函数体内声明局部变量a  
        return new Function("return a*a;");   //无法捕获局部作用域  
    }  
    console.log(test()());     //控制台输出9而非4,说明构造函数的编译在顶层函数执行  
    

    我们可以将Function()构造函数认为是在全局作用域中执行的eval()。在实际编程中,Function()构造函数很少用到,前两种定义方法使用比较普遍。

    二.方法

    javascript的方法也可以分为三类:
    a 类方法
    b 对象方法
    c 原型方法

    function People(name){
         this.name=name;
        //对象方法
         this.Introduce=function(){
         alert("My name is "+this.name);
    }
    }
        //类方法
        People.Run=function(){
        alert("I can run");
        }
      //原型方法
       People.prototype.IntroduceChinese=function(){
       alert("我的名字是"+this.name);
      }
     
    
    //测试
    var p1=new People("Windking"); 
    p1.Introduce();                        //My name is Windking
    People.Run();                          //I can run
    p1.IntroduceChinese();                 //我的名字是Windking
    
    

    1、对象方法:如果类生成一个实例,那么该实例就能使用该方法。每一个实例都会为其分配相应的内存。
    2、类方法,和java中的静态方法一样,不需要通过生成实例就可以使用。其实这里的类就是一个函数,在js中由于函数也是一个对象,所以可以为函数添加属性以及方法。
    3、原型方法一般用于对象实例共享。从而达到增加实例的同时又不消耗额外内存的目的。例如Array数组没有什么方法,你可以为其增加原型方法,那么创建的数组就拥有了该方法。

    相关文章

      网友评论

        本文标题:JavaScript函数定义和方法介绍

        本文链接:https://www.haomeiwen.com/subject/gaypmxtx.html