Js基础-闭包,事件

1:js中的闭包

概念:在一个函数内部又定义了一个函数,内部函数能访问到外部函数作用域范围内的变量,这时这个内部函数就叫做闭包,无论这个内部函数在哪里被调用都能访问到外部函数作用域中的那些变量。这些闭包是通过作用域链来实现的。

闭包可以做什么:

改变变量作用域;js中的面向对象都是用闭包来模拟的。

注意:当代码中有闭包的时候,闭包的代码什么时间执行最重要。

Eg:下面的代码相当于C#中的局部变量,外面是访问不到的。

  1. <script type="text/javascript">
  2.     function Person(name) {
  3.         this.user_name = name;
  4.         var user_age = '23';
  5.     }
  6.     var p1 = new Person('阿辉');
  7.     alert(p1.user_age);
  8. </script>

通过下面的demo可以实现外部的访问。

  1. <script type="text/javascript">
  2.     function Person(name) {
  3.         this.user_name = name;
  4.         //通过这种方式可以模拟私有成员,类似于private成员。
  5.         var user_age = 23;
  6.         //this这里就类似于public成员
  7.         this.set_age = function(age) {
  8.             user_age = age;
  9.         };
  10.         this.get_age = function() {
  11.             return user_age;
  12.         };
  13.     }
  14.     var p1 = new Person('阿辉');
  15.     p1.set_age(100);
  16.     alert(p1.get_age());
  17. </script>

Eg:实际中的闭包

这里相当于我们C#中的静态变量一样,下面的变量输出就是先在自己的作用域中找,接着在父类的作用域中招,接着在整个大的环境中找。最里面的作用域函数就是闭包。这是通过作用域链来实现的。优点:外层函数的变量都可以访问到。缺点:最里面的函数要是不释放,外层一直保存着,不释放。

  1. var x = 100;
  2.  
  3. function fn1() {
  4.     var y = 101;
  5.     alert(y);
  6.     alert(x);
  7.     return function() {
  8.         var y = 99;
  9.         alert(y);
  10.         alert(x);
  11.     };
  12. }
  13. var fn2 = fn1();
  14. fn2();

2:js中的this

这里的this大体上面和c#中的一样,只是我们是在js中药因地制宜。

下面的代码就是代表window.

  1. <script type="text/javascript">
  2.     /*在一个函数内部,this表示是那个对象,取决于当前函数是那个对象的函数*/
  3.     function f1() {
  4.         alert(this);//这个this代表window对象
  5.     }
  6.     //直接在页面上面定义函数默认是注册给了window对象的,下面的f1(0和window.f1()等价
  7.     f1();
  8. </script>

 

Js中的this代表谁,我们只需要看这个函数注册给了谁,要是没有注册是匿名函数,则是window中的this。

3:js中的事件

事件是最最重要的,因为在页面上就是这么写的。

以前在开发中经常会遇到页面的跳转,有时候又不跳转,我们在href="#"喜欢写#,这样做的坏处是页面会重新的回到顶部,我们可以使用js中的代码来写。

  1. <a href="javascript:alert(void());">11</a>

这样子就不会重新的刷新页面了。这里在html中写的javascript:这是协议,是我们和浏览器之间约定好的规则。

事件就是为其添加Onclick事件。

  1. <div>
  2.     <input onclick="alert(new Date().toLocaleString());" type="button" name="name" value="显示当前时间"/>
  3. </div>

 

 

JavaScript基础—闭包,事件的更多相关文章

  1. JavaScript基础—dom,事件

    Js基础-DOM 1:dom:文档对象模型 Dom就是html页面的模型,将每个标签都作为一个对象,js通过调用dom中的属性,方法就可以对网页中的文本框,层等元素进行编程控制.Dom就是一些让jav ...

  2. javascript closure 闭包 事件绑定

    先来一个基本的例子 <!-- 实现一段脚本,使得点击对应链接alert出相应的编号 --> <meta http-equiv="Content-Type" con ...

  3. javascript基础-闭包

    原理 函数里包含函数,即闭包. 包含函数的结果是,子函数会挟持父函数的活动对象.子函数在访问一个变量时,先读自身的活动对象,是否包含此变量,没有从父函数里找,还没有,去祖函数,层层回溯,直到windo ...

  4. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  5. javaScript基础之闭包

    不管是Jquery还是EXTJS,现代的js框架中大量应用了js的一些特性,比如:匿名函数,闭包等等,导致源代码非常难以阅读. 不过要想真正的使用好前台的UI技术,还是需要去深入的理解这些概念.   ...

  6. 如何给循环中的对象添加事件--深入理解JavaScript的闭包特性

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  7. 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)

    原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...

  8. java基础66 JavaScript中的事件、localtion对象、screen对象(网页知识)

    1.JavaScript中的事件注册 1.1.事件的注册方式 方式1:直接在html元素上注册 <body onLoad="ready()"></body > ...

  9. 一步步学习javascript基础篇(0):开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

随机推荐

  1. XE2:查看Extended Events收集的数据

    SQL Server 使用Target来存储Events,Target 能够将Events存储到File中(扩展名是 xel),或 memoy buffer 中(Ring Buffer),Event ...

  2. Altium Designer 15 --- Nets Update

    Now I want to introduce the use of 'Configure Physical Nets', as follows: If you has finished the PC ...

  3. RGB to HSI, HSI to RGB Conversion Calculator

    The RGB color model is an additive system in which each color is defined by the amount of red, green ...

  4. Sky Box

    http://www.keithlantz.net/2011/10/rendering-a-skybox-using-a-cube-map-with-opengl-and-glsl/ http://o ...

  5. LINQ to XML 实战

    LINQ to XML 轴定义:创建XML树或将XML文档加载到XML树之后,可以进行查询,从而查找元素并检索它们的值. 两类轴方法:-一些轴就是XELement和XDocument类中返回IEnum ...

  6. ExtJs 第二章,Ext.form.Basic表单操作

    1.认识Ext.form.Panel表单面板         Ext.form.field.CheckBox 复选框 checkboxfield Ext.form.CheckBoxGroup 复选框组 ...

  7. spring集成mongodb jar包版本问题

    在开发过程中,spring集成mongodb的jar包. 如果需要使用排序功能. spring-data-mongodb-1.4.1.RELEASE.jar 的版本为1.4.1,如果使用如下代码: Q ...

  8. IT外包一定要按着程序流程做

    步骤1: 衡量外包对你的公司是否有意义.在分析是否需要将你的工作进行外包的阶段,对本公司现有的业务做好基准调查以判定它们在多大程度上符合行业标准.或许,自行开展离岸业务--在其他地区建立离岸IT资源更 ...

  9. nyoj 公约数和公倍数

    公约数和公倍数 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 小明被一个问题给难住了,现在需要你帮帮忙.问题是:给出两个正整数,求出它们的最大公约数和最小公倍数. ...

  10. C# 使用MongoDB遇到的问题

    错误:缺少 System.Runtime.InteropServices.RuntimeInformation.dll version = 4.0.0 解决方法: 下载了System.Runtime. ...