Java教程

JavaScript高级-3（作用域，闭包）

本文主要是介绍JavaScript高级-3（作用域，闭包），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.作用域

作用域是可访问变量的有效范围

1.1局部作用域

函数内声明的变量为局部作用域

局部变量只能在函数内部访问

局部变量只作用在函数内部，所以不同的函数可使用相同的变量名称

局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁

函数的参数只在函数内部作用为局部变量

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>局部作用域</title>
    <script>
        //局部作用域
        function test() {
            // name为局部变量
            var name = "wangxiao";
            // 在函数内部自由提取
            alert(name);
        }
        // 函数外不能使用name变量
        alert(name);
        //测试不同函数内变量名称重复互不影响
        function test2() {
            var name = "wangerxiao";
            alert(name);
        }
        //测试函数的参数为局部变量
        function test3(name1) {
            alert(name1);
        }

        function test4() {
            alert(name1);
        }
        test3("zhangsan")
            //  test4("zhangsan")会报错
    </script>
</head>

<body>
    <h4>局部作用域</h4>
    <p>作用域是可访问变量的有效范围</p>
    <p>函数内声明的变量为局部作用域</p>
    <p>局部变量只能在函数内部访问</p>
    <p>局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁</p>
    <p>局部变量只作用在函数内部，所以不同的函数可使用相同的变量名称</p>
    <p>函数的参数只在函数内部作用为局部变量</p>
    <input type="button" value="测试局部变量" onclick="test();">
    <input type="button" value="测试不同函数内变量名称重复" onclick="test2();">

</body>

</html>

1.2全局变量

在函数外定义的变量为全局变量

网页中的所有函数和脚本均可使用

函数内未声明的变量就是window对象的变量，为全局变量

在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象

全局变量，或者函数，可以覆盖 window 对象的变量或者函数

局部变量，包括 window 对象可以覆盖全局变量和函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全局变量</title>
    <script>
        var name = "wangxiao"; //全局变量
        alert(name);

        function test1() {
            //在函数内也可访问
            alert(name);

        }
        //如在函数内未声明变量
        function test2() {
            //未声明的变量就是window对象的
            name1 = "wangerxiao"
            window.alert(name1);
        }

        function test3() {
            window.alert(name1);
        }
        // 测试全局变量，或者函数，可以覆盖 window 对象的变量或者函数
        window.age = 30; //window对象的变量
        var age = 40;
        alert(age); //40
        // 测试 局部变量，包括 window 对象可以覆盖全局变量和函数。
        var city = "beijing"; //全局变量

        function test4() {
            var city = "shanghai";
            alert(city);
        }
        test4(); //shanghai
    </script>
</head>

<body>
    <h3>全局变量</h3>
    <p>在函数外定义的变量为全局变量</p>
    <p>网页中的所有函数和脚本均可使用</p>
    <p>函数内未声明的变量就是window对象的变量，为全局变量</p>
    <input type="button" value="测试" onclick="test1();">
    <input type="button" value="测试函数内未声明变量" onclick="test2();">
    <input type="button" value="测试其他函数能否调用未声明变量" onclick="test3();">


</body>

</html>

2.闭包

    <script>
        // 闭包
        var name = "wangxaio";

        function test() {
            console.log(name)
        }
    </script>

[函数」和「函数内部能访问到的变量」的总和，就是一个闭包.

闭包不是函数套函数

闭包中的函数可以没有return语句（return语句在闭包中只是为了变量能被使用）

闭包的作用是--隐藏一个变量的修改权限（只能用不能修改）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>闭包</title>
    <script>
        // 闭包
        /*  var name = "wangxaio";

          function test() {
              console.log(name)
          }*/
        //   使用闭包
        function test1() {
            var name = "wangxaio";

            function bb() {
                console.log(name)
                return name;
            }
            return bb;
        }

        function test2() {
            var te = test1(); //得到bb函数
            var name1 = te() //得到输出的变量值
            console.log(name1); //控制台输出
        }
        test2();
    </script>
</head>

<body>
    <h3>闭包</h3>
    <p>[函数」和「函数内部能访问到的变量」的总和，就是一个闭包</p>
    <p>闭包不是函数套函数</p>
    <p>闭包中的函数可以没有return语句</p>
    <p>return语句在闭包中只是为了变量能被使用</p>
    <h3>闭包的作用是--隐藏一个变量的修改权限</h3>
</body>

</html>

3.原型与原型链

3.1原型

__proto__属性，是从构造函数的prototype属性派生的

  _proto_--对应对象

 prototype--对应函数

函数上面都有一个属性(prototype)，prototype属性指向了函数的原型对象(函数名称.prototype)

尽管我们什么都不做，但是浏览器已经在内存中创建了两个对象：Person(函数)和Person.prototype，其中，我们称Person为构造函数

Person.prototype称为Person的原型对象，简称原型

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原型</title>
    <script>
        var arr1 = [11, 2, 1, 15];
        var arr2 = [0, 19, 20, 5];
        //排序
        arr1.sort(function(a, b) {
            return a - b;
        });
        arr2.sort(function(a, b) {
            return a - b;
        });
        console.log(arr1); //[1, 2, 11, 15]
        console.log(arr2); //[0, 5, 19, 20]
        // 数据类型相同，数据不相同
        console.log(arr1 === arr2); //false
        //sort为公共方法
        console.log(arr1.sort === arr2.sort); //true
        //属性(prototype)
        var arr3 = [11, 2, 1, 15];
        var arr4 = [0, 19, 20, 5];
        Array.prototype.getsum = function() {
            var a = 0;
            for (var i = 0; i < this.length; i++) {
                a = a + this[i];
            }
            return a;
        }
        console.log(arr3.getsum());
        console.log(arr4.getsum());

        function test() {
            this.name = "wangxiao";
            this.ff = function() {

            }
        }
        test.prototype.city = "beijing"
        var tes = new test();
        var tes2 = new test();
        console.log(tes.city);
        console.log(tes2.city);
    </script>
</head>

<body>
    <h2>__proto__属性，是从构造函数的prototype属性派生的</h2>
    <p>_proto_--对应对象 prototype--对应函数 </p>
</body>

</html

 

这篇关于JavaScript高级-3（作用域，闭包）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航