javaScript中的链

来源：互联网发布：2网络作家富豪榜编辑：程序博客网时间：2024/06/06 09:03

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

<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