javaScript中的链

最新推荐文章于 2024-08-09 21:30:00 发布

有点浪^_^

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量183

点赞数

分类专栏： JavaScript 文章标签： javascript

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、基本概念
匿名函数的概念
声明一个没有函数名的函数，就是匿名函数。
有函数名的函数就是具名函数。

<script type="text/javascript">
    /*
    //这里定义了一个函数，而且没有函数名。这样写语法是错误的,如果允许这样定义，那么根本就没有办法调用。
    //所以，我们可以用一个变量来存储一下
    function(){ 
    }
    */
  // 声明了一个匿名函数，并把匿名函数赋值给变量f。 注意这个时候这个匿名函数并没有执行。
  var f = function(){
    alert("哥们我是匿名函数内的代码");
  }
  //我们可以把变量 f 当做一个函数名来调用
  f();  //调用上面定义的匿名函数
</script>

匿名函数的应用场景
给标签绑定事件

<script type="text/javascript">
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        alert("点击");
    }
</script>

在定时器中使用

<body>
    <h1></h1>
    <script type="text/javascript">
        var showTimeArar = document.getElementsByTagName("h1")[0];
        setInterval(function () {
            showTimeArar.innerHTML = new Date().toLocaleString();
        }, 1000);
    </script>
</body>

给对象定义方法

<script type="text/javascript">
    var person = {
        name : "张三",
        age : 30,
        play : function () {
            alert(this.name + "很酷");
        }
    }
    person.play();
</script>

匿名函数的自调用

(function () {
    alert("匿名函数立即执行")
})();

注意：
1、需要把匿名函数用一对圆括号括起来，把匿名函数作为一个整体
2、最后再添加一对圆括号表示调用函数。这样定义的匿名函数就会立即执行
3、当然，这个时候即使给这个函数加上方法名，也可以调用。不过这种情况为什么还要加方法名呢?

二、变量的作用域
JavaScript的变量依据作用域可分为：
全局变量
局部变量
全局变量和局部变量的一些细节

<script type="text/javascript">
    var m = 10;
    function f(){
        var m = 20;
        alert("方法内部：" + m);  //代码1
    }
    f();
    alert("方法外部：" + m); //代码2
</script>

局部变量的作用域会覆盖全局变量的作用域

JavaScript中有没有块级作用域？

<script type="text/javascript">
  var m = 5;
  if(m == 5){
    var n = 10;
  }
  alert(n); //代码1
</script>

JavaScript的作用域是按照函数来划分的
==JavaScript没有块级作用域==
注意：
即使我们把变量的声明放在 if、for等块级语句内，也会进行==声明提前==的操作！

三、作用域链—作用域的深入理解
执行环境
执行环境（ execution context ）是 JavaScript 中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它。

全局执行环境是最外围的一个执行环境。在 Web 浏览器中，全局执行环境被认为是 window 对象，因此所有全局变量和函数都是作为 window 对象的属性和方法创建的。对全局执行环境变量来说，变量对象就是window对象，对函数来说，变量对象就是这个函数的活动对象，活动对象是在函数调用时创建的一个内部变量。

每个函数都有自己的执行环境，当执行流进入一个函数时，函数的执行环境就会被推入一个执行环境栈中。而在函数执行之后，栈将执行结束的函数的执行环境弹出，把控制权返回给之前的执行环境。
作用域链
作用域链与一个执行环境相关，作用域链用于在标示符解析中变量查找。
在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，他就指向了这个函数的作用域链。作用域链中存储的是与每个执行环境相关变量对象 (函数内部也是活动对象)。

当创建一个函数( 声明一个函数 )后，那么会创建这个函数的作用域链。这个函数的作用域链在这个时候只包含一个变量对象(window)

<script type="text/javascript">
    function sum(num1, num2){
        var sum = num1 + num2;
        return sum;
    }
</script>

四、闭包

<script type="text/javascript">
    function createSumFunction(num1, num2){
        return function () {
            return num1 + num2;
        };
    }

    var sumFun = createSumFunction(3, 4);
    var sum = sumFun();
    alert(sum);
</script>

createSumFunction函数返回了一个匿名函数，而这个匿名函数使用了createSumFunction函数中的局部变量(参数)，即使createSumFunction这个函数执行结束了，由于作用域链的存在，他的局部变量在匿名函数中仍然可以使用，这个匿名函数就是闭包。
闭包是指有权访问另一个函数作用域中的变量的函数。

五、闭包的应用
返回外部函数的局部变量

<script type="text/javascript">
    function outer () {
        var num = 5;
        //定义一个内部函数
        function inner () {
            //内部函数的返回值是外部函数的一个局部变量
            return num;
        }
        //把局部变量的值++
        num++;
        // 返回内部函数
        return inner;
    }
    var num = outer()();  // 6
    alert(num);  
</script>

使用函数自执行和闭包封装对象

<script type="text/javascript">
    var person = (function () {
        //声明一个对象，增删改查均是针对这个对象
        var personInfo = {
            name : "李四",
            age : 20
        };
        //返回一个对象，这个对象中封装了一些对personInfor操作的方法
        return {
            //根据给定的属性获取这个属性的值
            getInfo : function (property) {
                return personInfo[property];
            },
            //修改一个属性值
            modifyInfo : function (property, newValue) {
                personInfo[property] = newValue;

            },
            //添加新的属性
            addInfo : function (property, value) {
                personInfo[property] = value;

            },
             //删除指定的属性
            delInfo : function (property) {
                delete personInfo[property];

            }
        }
    })();
    alert(person.getInfo("name"));
    person.addInfo("sex", "男");
    alert(person.getInfo("sex"));
</script>

for循环典型问题

<body>
    <input type="button" value="按钮1"    >
    <input type="button" value="按钮2"    >
    <input type="button" value="按钮3"    >
    <script type="text/javascript">
        var btns = document.getElementsByTagName("input");
        for (var i = 0; i < 3; i++) {
            btns[i].onclick = function () {
                alert("我是第" + (i + 1) + "个按钮");
            };
        }
    </script>
</body>

有点浪^_^

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javaScript中的链

一、基本概念匿名函数的概念声明一个没有函数名的函数，就是匿名函数。有函数名的函数就是具名函数。<script type="text/javascript"> /* //这里定义了一个函数，而且没有函数名。这样写语法是错误的,如果允许这样定义，那么根本就没有办法调用。 //所以，我们可以用一个变量来存储一下 function(){ } */
复制链接

扫一扫

专栏目录