zoukankan      html  css  js  c++  java
  • web前端----JavaScript(JS)函数

    函数

    函数定义

    JavaScript中的函数和Python中的非常类似,只是定义方式有点区别。

    // 普通函数定义
    function f1() {
      console.log("Hello world!");
    }
    
    // 带参数的函数
    function f2(a, b) {
      console.log(arguments);  // 内置的arguments对象
      console.log(arguments.length);
      console.log(a, b);
    }
    
    // 带返回值的函数
    function sum(a, b){
      return a + b;
    }
    sum(1, 2);  // 调用函数
    
    // 匿名函数方式
    var sum = function(a, b){
      return a + b;
    }
    sum(1, 2);
    
    // 立即执行函数
    (function(a, b){
      return a + b;
    })(1, 2);

    arguments

    function add(a,b){
      console.log(a+b);
      console.log(arguments.length)
    }
    
    add(1,2)

    输出:

    3
    2

    函数的全局变量和局部变量

    局部变量

    在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。

    全局变量:

    在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

    变量生存周期:

    JavaScript变量的生命期从它们被声明的时间开始。

    局部变量会在函数运行以后被删除。

    全局变量会在页面关闭后被删除。

    作用域

    首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。

    几个例子:

    1.

    var city = "BeiJing";
    function f() {
      var city = "ShangHai";
      function inner(){
        var city = "ShenZhen";
        console.log(city);
      }
      inner();
    }
    
    f();  //输出结果是?

    2.

    var city = "BeiJing";
    function Bar() {
      console.log(city);
    }
    function f() {
      var city = "ShangHai";
      return Bar;
    }
    var ret = f();
    ret();  // 打印结果是?

    3.闭包

    var city = "BeiJing";
    function f(){
        var city = "ShangHai";
        function inner(){
            console.log(city);
        }
        return inner;
    }
    var ret = f();
    ret();

    词法分析

    JavaScript中在调用函数的那一瞬间,会先进行词法分析。

    词法分析的过程:

    当函数调用的前一瞬间,会先形成一个激活对象:Avtive Object(AO),并会分析以下3个方面:

    1:函数参数,如果有,则将此参数赋值给AO,且值为undefined。如果没有,则不做任何操作。
    2:函数局部变量,如果AO上有同名的值,则不做任何操作。如果没有,则将此变量赋值给AO,并且值为undefined。
    3:函数声明,如果AO上有,则会将AO上的对象覆盖。如果没有,则不做任何操作。

    函数内部无论是使用参数还是使用局部变量都到AO上找。

    看两个例子:

    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age);
    }
    foo();  // 问:执行foo()之后的结果是?

    第二题:

    var age = 18;
    function foo(){
      console.log(age);
      var age = 22;
      console.log(age);
      function age(){
        console.log("呵呵");
      }
      console.log(age);
    }
    foo();  // 执行后的结果是?
    词法分析过程:
    1、分析参数,有一个参数,形成一个 AO.age=undefine;
    2、分析变量声明,有一个 var age, 发现 AO 上面已经有一个 AO.age,因此不做任何处理
    3、分析函数声明,有一个 function age(){...} 声明, 则把原有的 age 覆盖成 AO.age=function(){...};
    
    最终,AO上的属性只有一个age,并且值为一个函数声明
    
    执行过程:
    注意:执行过程中所有的值都是从AO对象上去寻找
    
    1、执行第一个 console.log(age) 时,此时的 AO.age 是一个函数,所以第一个输出的一个函数
    2、这句 var age=22; 是对 AO.age 的属性赋值, 此时AO.age=22 ,所以在第二个输出的是 2
    3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
    答案解析
  • 相关阅读:
    Android 9.0版本及以上开发时遇到的一些版本问题
    【经典】半平面交求解方程组——poj1755
    【模板】凸包向内推进求不严格的半平面交——poj3384
    二分+半平面交——poj1279
    AngularJS 启程
    全栈工程师--这才是真正的从入门到跑路
    数据库学习路线-从入门到入土
    java学习路线-从入门到入土
    前端路线-从入门到入土
    前端小练习
  • 原文地址:https://www.cnblogs.com/TheLand/p/8547653.html
Copyright © 2011-2022 走看看