zoukankan      html  css  js  c++  java
  • arguments、作用域(变量、词法)、变量提升、函数内部this指向、匿名函数和立即执行

    01.arguments

    1.参数个数不确定!!!

    2.arguments对象

    存放函数内部所有的参数

    arguments.length 记录着所传递参数的个数

    arguments 存放参数的形式类似于数组,但是arguments不是数组

    arguments 取出里面存放的数据,通过下标,下标是从0开始的。arguments[0];

    如果把arguments存放的数据全部取出,需要循环遍历!!!

    1.查看arguments

    function fn(){
       console.log(arguments);
    }
    fn(2,2,3);

    2.获取参数个数

    function fn(){
      console.log(arguments.length);
    }
    fn(2,3,32,32);

    3.取arguments里面的值(索引,从0开始)

    function fn(){
    console.log(arguments[3]);
    }
    fn(2,3,4,23);

    02.arguments练习

    1.定义一个加法功能,计算传入的所有数字的和 
    function fn(){
    var sum = 0;
    //循环遍历
    for(i = 0 ; i < arguments.length ; i++){
    sum += arguments[i];
    }
    return sum;
    }
    console.log(fn(1,2,3,4,4,5));
    2.定义一个功能getMax,传入任意个数字,返回最大值
    function getMax(){
       //假设arguments[0]最大
       var maxNum = arguments[0];
       for(i = 1 ; i < arguments.length ; i++){
           if(maxNum < arguments[i]){
               maxNum = arguments[i];
          }
      }
       return maxNum;
    }
    console.log(getMax(3,4,24,534,2,2,4));
    3.定义一个运算功能,参数为(x,y),当传入1个数字时,求x的阶乘,如果传入两个数字,求x的y次方
    function fn(x,y){
       if(arguments.length == 1){
           var product = 1;
           for(i = 1 ; i <= x ; i++){
               product *= i;
          }
           return product;
      }
       return (Math.pow(x,y));
    }
    //console.log(fn(2));
    console.log(fn(3,2));

    03.作用域思考

    //思考1:
    var a = 10;
    function fn(){
       console.log(a);   //10
    }
    fn();

    //思考2:
    var a = 10;
    function fn(){
       var a = 20;
       console.log(a);    //20
    }
    fn();

    //思考3:
    var a = 10;
    function fn(){
       var a = 20;
       console.log(a);    //20
    }
    console.log(a);     //10
    fn();


    //思考4:
    function fn(){
       var a = 10;
       console.log(a);           //10
    }
    fn();
    console.log(a);      //a is not defined;

    //思考5:
    var a = 10;
    function fn(){
       console.log(a);     //变量提升了 undefined;
       var a = 20;
       console.log(a);    //20
    }
    fn();
    //执行过程
    function fn(){
       var a;
       console.log(a);     //undefined;
       a = 20;
       console.log(a);   //20
    }

    //思考6
    var a = 10;
    function outerFn(){
       console.log(a);   //undefined;
       var a = 20;
       function innerFn(){
           var a = 30;
           console.log(a);   //30
      }
       innerFn();
       console.log(a);   //20
    }
    outerFn();
    console.log(a);    //10
    //执行过程:
    var a = 10;
    function outerFn(){
       var a;
       console.log(a);   //undefined;
       a = 20;
       function innerFn(){
           var a = 30;
           console.log(a);   //30
      }
       innerFn();
       console.log(a);    //20
    }
    outerFn();
    console.log(a);   //10

    04.变量的作用域

    (ES6没有作用域,只有在函数里面的作用域)

    1.函数的作用域

    全局变量

    局部变量

    2.变量的关系

    1. 写在函数内部的叫做局部变量

    2. 在全局不能访问局部变量

    3. 在局部能访问全局变量

    4. 函数在不调用的时候,局部变量是不存在的

    5. 在函数运行完毕之后,变量被垃圾回收机制回收!

    3.作用域链

    根据函数内部能访问函数外部变量的这种关系,逐层向外查找变量的过程,叫做变量的作用域链

    当前作用域——> 父级作用域 ——>...——>全局作用域 形成的作用域链条

    eg:作用域
    var a = 10;
    function fn1(){
       var a = 20;
       fn2();
       function fn2(){

           // console.log(a);   //20(作用域链,逐层向外查找)

           // var a = 30;   // undefined (变量提升)

           var a = 30;
           console.log(a);   //30

      }
    }
    // console.log(a);   //10
    //console.log(fn1());   //undefined
    //console.log(fn2());   //fn2() is not defines;
    fn1();

    eg:作用域链
    var a = 20;
    function fn1(){
       var a = 10;
       function fn2(){
           console.log(a);     //10
      }
       fn2();    
    }
    fn1();
    console.log(window.a);    //20

    05.词法作用域

    1.词法作用域(静态作用域)

    作用域:在函数声明过程中产生

    2.动态作用域:

    在函数调用的时候产生作用域,动态作用域!

    3.js里面函数的作用域:是在声明时候产生的还是在调用的时候产生的??

    在函数声明的时候产生。

    4.js的执行环境:

    每个函数的执行都会产生一个执行环境:全局执行环境是外围的执行环境,全局执行环境被认为是window对象,因此所有的全局变量和函数都作为window对象的属性和方法创建的。

    eg:
    var a = 10;
    function fn1(){
       console.log(a);   //10;
    }
    function fn2(){
       var a = 20;
       fn1();
    }
    fn2();

    06.变量的提升

    1.js的解析过程:

    1. 预编译(预解析)

      a:对语法的检测。如果有语法错误,直接报错。(Uncaught SyntaxError: Unexpected token ,)

      b:变量提升

    2. 执行

    2.变量提升

    1. 把声明的变量var a;都提升到当前作用域的最顶端

    2. 赋值语句和逻辑语句都不提升,原地等待执行

    3. function关键字声明的函数也会提升到作用域的最顶端

    4. 变量提升的规则:所有用var声明的变量先提升,然后再提升function声明的函数整体。(官方解释:函数的执行权重比较高)

    5. 匿名函数不会被提升

    eg:
    //第一组
    var fn = 10;
    function fn(){

    }
    console.log(fn);    //10;

    //执行过程为:
    var fn;
    function fn(){

    }
    fn = 10;
    console.log(fn);



    //第二组:
    console.log(a);    //a is not defined;



    //第三组:
    console.log(a);
    var a = 10;     //undefined;

    //执行过程为:
    var a;
    console.log(a);
    a = 10;

    //第四组
    console.log(fn);      
    function fn(){

    }                 //fn(){}

    //执行过程为:
    function fn(){

    }
    console.log(fn);

    //第五组:
    var fn = 10;
    var fn = function(){

    }
    console.log(fn);   //fn(){}因为fn就将上面的fn覆盖的。

    //第六组:
    var n = 10;
    function test(){
       console.log(n);   //undefined;
       var n = 20;
       console.log(n);   //20
    }
    test();

    box.onclick = function(){

    }

    07.变量的补充

    变量的泄露

    eg:
    1.window.a = 10;
    function fn(){
       window.a = 20;
       console.log(a);      //undefined;   //下面的变量进行变量的提升为,undefined;
       var a = 30;
       console.log(a);      //30
    }
    fn();
    console.log(a);            //20   //变量的泄露window.a = 20 泄露出去覆盖了window.a = 10;

    //执行过程为:
    window.a = 10;
    window.a = 20;
    function fn(){
       var a;
       console.log(a);  //undefined;
       a = 20;
       var a =30;
       console.log(a);    //30
    }


    2.a = 10;
    function fn(){
       a = 20;
       console.log(a) ;   //20;   将变量提升到当前作用域最顶端
       a = 30;
       var a = 30;
       console.log(a);   //30
    }
    fn();
    console.log(a);    //10

    08.函数的内部this指向

    函数里面的this指向:

    谁调用函数,this就指向谁!!

    事件驱动:给谁绑定事件,this指向谁

    function fn(){
       console.log(this);   //window;
    }
    fn();


    // links.onclick = function(){
    //     console.log(this);   //<a href="#" id = "links">DSF</a>
    // }


    // document.onclick = function(){
    //     console.log(this);   //document;
    // }

    09.匿名函数和立即执行

    //用括号括起来,然后前面加上分号;
    function fn(){}
    ;(function(){  //加分号,防止影响上面的

    })();
  • 相关阅读:
    24丨基础篇:Linux磁盘I-O是怎么工作的(上)
    23 | 基础篇:Linux 文件系统是怎么工作的?
    45 | 答疑(五):网络收发过程中,缓冲区位置在哪里?
    selenium相关:通过location 和 size 获取元素所在像素位置和尺寸,截取图片ROI
    python排序算法之冒泡,选择,插入
    pyspider和pyquery总结
    python之基于libsvm识别数字验证码
    selenium执行JavaScript语句:控制滚动条 聚焦元素 改变下拉选项
    python导入import
    【转】利用 selenium 的 webdrive 驱动 headless chrome
  • 原文地址:https://www.cnblogs.com/ljp1997/p/11442765.html
Copyright © 2011-2022 走看看