Js学习笔记📒

作者: _咸鱼君 | 来源:发表于2016-01-11 18:38 被阅读158次

    1.函数声明和函数表达式有什么区别?

    对于函数声明在执行环境加载数据的时候,会有函数声明提升的过程,解析器率先读取函数声明,使之在执行任何代码之前都可以访问。至于函数表达式,只有等到解析器执行到他所在的代码行才会被解释执行。见如下例子:

    函数声明:

    
    console.log(getNum());//1
    
    function getNum(){
    
        return 1;
    
    }
    
    

    等价于

    
    function getNum(){
    
        return 1;
    
    }
    
    console.log(getNum());//1
    
    

    函数表达式:

    
    console.log(getNum());//Uncaught TypeError
    
    var getNum = function(){
    
        return 1;
    
    }
    
    

    等价于

    
    var getNum;
    
    console.log(getNum());//Uncaught TypeError
    
    getNum = function(){
    
        return 1;
    
    }
    
    

    2.什么是变量的声明前置?什么是函数的声明前置?

    变量的声明前置就是把变量的声明提升到当前作用域的最前面。

    函数的声明前置就是把整个函数提升到当前作用域的最前面(位于前置的变量声明后面)。

    
    //变量的声明前置
    
    console.log(num);//undefined
    
    var num = 1;
    
    
    
    等价于
    
    
    
    //变量的声明前置
    
    var num;
    
    console.log(num);//undefined
    
    num = 1;
    
    
    
    //函数的声明前置
    
    var num = 1;
    
    console.log(doubleNum(num));//2
    
    function doubleNum(num){
    
        return num*2;
    
    }
    
    
    
    等价于
    
    
    
    //函数的声明前置
    
    var num;
    
    function doubleNum(num){
    
        return num*2;
    
    }
    
    num = 1;
    
    console.log(doubleNum(num));//2
    
    

    3.arguments 是什么?

    arguments是一个类数组对象。包含着传入function的所有参数。


    4.函数的重载怎样实现?

    ECMAScript中没有函数重载,因为函数名类似于指针,当有同名函数名的时候后声明的函数会覆盖前声明的函数。如果非要传入不同个数的函数的话,可以把参数以键值对的形式用一个对象字面量封装起来,然后函数参数只传入那一个对象即可,函数内部使用if-else来判断具体某一个参数存在与否来做相应的处理。如果是简单的数字类型参数相加的函数,也可以遍历arguments来相加每一个结果。

    
    function fn(obj){
    
        //do some thing 
    
    }
    
    //可以传入
    
    fn({paramName1:param1,paramName2:param2,paramName3:param3});
    
    fn({paramName1:param1,paramName2:param2});
    
    
    
    function add(){
    
        var sum = 0; 
    
        for(var i=0,max=arguments.length;i<max;i++){
    
            sum+=arguments[i]
    
        }
    
        return sum;
    
    }
    
    add(1,2);//3
    
    add(1,2,3,4);//10
    
    

    5.立即执行函数表达式是什么?有什么作用?

    (function fn(){..})(),函数被包含在一个括号内,变成为一个表达式,随后跟着一个(),就立即执行这个函数,这种模式就是立即执行函数表达式(Immediately Invoked Function Expression),简称IIFE。也有用(function fn(){..}())后面的括号在前面的括号内这种形式表示的,这两种形式在功能上都是一致的。

    IIFE的一些作用:

    • 创建作用域,内部保存一些大量临时变量的代码防止命名冲突。

    • 一些库的外层用这种形式包起来防止作用域污染。

    • 运行一些只执行一次的代码。

    
    (function(){
    
        var module = require('module');
    
        module.setup();
    
        module.run();
    
    })();
    
    
    • 用闭包保存状态
    
    //以下点击页面标签的时候,实际并不是弹出每个具体的i的,而是elems.length,因为每个a监听器中引用的i都是同一个作用域的。
    
    var elems = document.getElementsByTagName('a');
    
    for (var i = 0; i < elems.length; i++) {
    
        elems[i].addEventListener('click', function (e) {
    
            e.preventDefault();
    
            alert('I am link #' + i);
    
        }, 'false');
    
    }
    
    
    
    //以下点击页面标签的时候,每一个i传入一个IIFE,IIFE形成单独一个作用域保存了当时的i值,所以点击a标签,可以弹出不同的i值。
    
    var elems = document.getElementsByTagName('a');
    
    for (var i = 0; i < elems.length; i++) {
    
        (function (lockedInIndex) {
    
            elems[i].addEventListener('click', function (e) {
    
                e.preventDefault();
    
                alert('I am link #' + lockedInIndex);
    
            }, 'false');
    
        })(i);
    
    }
    
    

    6.什么是函数的作用域链?

    作用域链(scope chain)正是内部上下文所有变量对象(包括父变量对象)的列表,此链用来变量查询。

    讲到作用域链就会扯到执行环境(execution context)这个概念,这个执行环境定义了变量或函数有权访问的其他数据 ,比较抽象,可以理解为一个对象,其中包含了变量对象(variable object),this指针(this value)以及作用域链(scope chain),当调用一个函数的时候,函数的执行环境就被推入上下文栈,当函数结束时就会被弹出,栈的底层是全局执行环境,也就是window对象。

    JavaScript高级程序设计的P180页有更结构化的图片解释说明

    当上下文栈中推入createComparisonFunction的执行环境,该环境中的代码执行时会创建属于该环境的作用域链,作用域链的最前端是当前函数的变量对象(variable object),再下一个变量对象是外一层环境的变量对象,在这个图中也就是全局变量对象,属于链条的末尾了。在最内层执行代码所需要的变量会在最内层的活动对象的中去寻找,如果没有则沿着作用域链往外一层再去寻找,一直到最外层全局环境。

    相关文章

      网友评论

        本文标题:Js学习笔记📒

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