美文网首页
js作用域

js作用域

作者: sunny519111 | 来源:发表于2017-01-03 17:28 被阅读26次

函数声明和函数表达式

  1. 函数声明会提前,而函数表达式则不会,只会提前变量。
  2. 函数表达式就是一条语句,就相当于,定义了一个变量,这个变量的值是一个函数。函数声明则就是一块区域。

变量和函数的声明前置

变量声明提前

console.log(a)  //undefined
var a=1;
console.log(a)   //1
等价于:
var a;
console.log(a)  
a=1
此时的变量a的声明会提前,但是赋值不会。

函数声明提前:函数声明的会自动的提前在代码前面,但是在变量声明的后面,同名的话会覆盖相应的变量。

sayname("hcc")   //hcc
var sayname="hello"
function sayname(name){
     console.log(name)  
}
等价于:
var sayname;
function sayname(name){
     console.log(name)  
}
sayname("hcc")   //hcc
sayname="hello"

arguments是什么

  1. arguments类数组对象,不是数组,因为它除了有数组的length属性,其他都没有,但是可以进行相互的转换。
  2. 它不是函数内部的属性。
  3. 它和形参没有具体联系,接受的是函数实参传递的数。
  4. argumens只在函数内部有效,在函数外部调用 arguments 对象会出现一个错误。

arguments转换成数组

  1. Array.prototype.slice.call(arguments);运用数组原型自带的slice()方法不推荐,会影响js优化。
        function sayname(name,age,sex){
            console.log(arguments instanceof Array);
            var arguments_array = Array.prototype.slice.call(arguments);
            console.log(arguments_array instanceof Array);
            console.log(arguments_array.push()); //3
        }
        sayname("hcc",24,'男');
  1. 定义个新的数组接受arguments的值
        function say(name,age,sex){
            var a=[];
            for (var i in arguments){
                a[i]=arguments[i];
            }
            console.log(a instanceof Array);
            console.log(a.push()); 
        }
        say("hcc",24,'男');

函数的重载

函数不存在重载,只存在覆盖,同名的函数后面的会覆盖前面的函数。但是可以变相的实现函数的重载。通过传入的参数的不同,arguments的值实现重载。

        function sum(){
            if(arguments.length === 2){
                console.log( arguments[0]+arguments[1] )
                return 
            }
            if(arguments.length === 3){
                console.log( arguments[0]+arguments[1]+arguments[2]  )
                return 
            }
        }
        sum(1,2);
        sum(1,2,3);

立即执行函数

  1. 实现自身的作用域,立即调用后释放,实现简单的封装
  2. 内部的变量不会影响到外部的变量,也不会受到外面函数的影响。

闭包中立即执行函数的运用

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    li{
        list-style-type: none;
        border:  1px solid #f00;
    }

js部分,点击li获取相应的索引

        var lilist =document.getElementsByTagName('li');
        for(var i=0; i<lilist.length;i++){
            (function(n){
                lilist[n].onclick=function(){
            
                alert(n);
            }
            })(i)
        } 

函数的作用于链

当函数被调用的时候,会出现一个作用域链,连接相应的上下文。
官方定义是:执行此函数时会创建一个称为“运行期上下文(execution context)”的内部对象,运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链,用于标识符解析,当运行期上下文被创建时,而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。

代码分析

        var a=1;
        var c=3
        function fn(){
            var b=2;
            var c;
            console.log(a); //1
            console.log(c); //undefined
            function fn2(){
                var b=1;
                console.log(b); //1
            }
            fn2();
            console.log(b); //2
        }
        fn()

模型图

1.png
2.png

相关文章

  • 变量作用域

    变量作用域:静态作用域、动态作用域JS变量作用域:JS使用静态作用域JS没有块级作用域(全局作用域、函数作用域等)...

  • JS作用域的练习

    Js作用域练习demo1 Js作用域练习demo2 JS作用域练习demo3 JS作用域练习demo4 JS作用域...

  • 你不知道的JS-上卷

    作用域整体理解:JS作用域分为函数作用域,全局作用域,with和try catch形成的块级作用域。 JS引擎在编...

  • js 闭包

    一、js 作用域 讲闭包首先就要理解 js 的作用域。再 ES5 中,js 有两种作用域,全局作用域和函数作用域(...

  • 2019-08-13JS里面的作用域Scope

    作用域指一个变量的作用范围。 JS的作用域 在JS中,有两种作用域 全局作用域直接编写在script标签中 JS代...

  • 干货!月薪80k前端大佬面试笔记:JS闭包解析!

    三点注意事项 JS没有块级作用域,只有全局作用域和局部作用域(函数作用域)。 JS中的作用域链,内部的作用域可以访...

  • JavaScript作用域的理解

    作用域:就是起作用的区域。JS的作用域规定了变量和函数可访问的范围。JS作用域分为:全局作用域和局部作用域 全局作...

  • JS 作用域链、导入导出

    1. JS 的作用域链 作用域在 JS 中表示变量的可访问性和可见性。JS 作用域有 3 种:1. 全局作用域;2...

  • JS的作用域

    JS的作用域: 全局作用域、函数作用域、eval 作用域、块级作用域 全局作用域: 函数作用域: 结果截屏: 说...

  • ES5中JS的作用域和变量提升(hoisting)

    ES5 中JS 的作用域: 在ES5 中,JS 只有两种形式的作用域:全局作用域和函数作用域。 全局作用域全局对象...

网友评论

      本文标题:js作用域

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