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基础:事件

    事件: 概念:某些组件被执行了某些操作后,触发某些代码的执行 *  事件:某些操作,如:单击,双击,键盘按下了,鼠标移动了 *  事件源:组件.如:按钮   文本输入框.... *  监听器:代码 * ...

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

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

  6. javaScript基础之闭包

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

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

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

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

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

  9. JavaScript的闭包特性如何给循环中的对象添加事件(一)

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

随机推荐

  1. 【腾讯Bugly干货分享】从0到1打造直播 App

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/5811d42e7fd6ec467453bf58 作者:李智文 概要 分享内容: ...

  2. 一次外企QQ面试

    无忧上挂了简历,让个外企的hr约好面试,今天刚面完,整理出来给大家看看.难度不是很大,基本就是Asp.net Mvc 用到的东西,没有问数据库方面的. Part I – Frontend  1. Tr ...

  3. 那些VisualStudio隐藏的调试功能

    VisualStudio是一个强大的调试工具,里面很多隐藏功能少有人问津,但是在特定场景可以节省你很多时间,本文主要介绍一些VisualStudio调试相关的隐藏功能,欢迎大家补充. 运行到指针(Ru ...

  4. AlwaysON 故障处理之辅助副本磁盘空间不足

    用户反馈AlwaysON辅助副本数据库查询的结果与主库不一致, 远程到服务器后发现数据库的状态显示为“未同步/可疑”, 查看数据库的日志,定位到出现错误的时间点,可以看到提示日志文件所在磁盘的“磁盘空 ...

  5. DNS拾遗(二)

    MX Record补充 MX记录有优先级的概念,数字越小表示优先级越高.所以一个域可以配置多个不同优先级的MX记录,如果邮件通过第一优先级记录无法递送,则采用第二优先级,以此类推. TXT Recor ...

  6. Git学习笔记(7)——多人协作

    本文主要记录了,多人协作时,产生冲突时的解决情况. 多人环境创建 首先我们需要模拟一个多人环境.前面的Git的学习都是在Ubuntu上面,现在我们也搭建一个win环境吧.安装win环境下的Git,很简 ...

  7. swift tableview的分割线不能到头

    1,设置tableview的separatorInset, layoutMargins if(myTableView.respondsToSelector("setSeparatorInse ...

  8. WebApi系列~安全校验中的防篡改和防复用

    回到目录 web api越来越火,因为它的跨平台,因为它的简单,因为它支持xml,json等流行的数据协议,我们在开发基于面向服务的API时,有个问题一直在困扰着我们,那就是数据的安全,请求的安全,一 ...

  9. 基础才是重中之重~stream和byte[]的概念与转化

    回到目录 多看几篇 之所以写这篇文章完全是因为最近在研究FastDFS这个分布式的文件存储系统,当然这不是我第一次研究它了,就像我们去看一本书,我们不会只看一篇,而是一次次,一篇篇,每看一次会有新的收 ...

  10. 跨终端 Web

    跨终端 Web(移动优先|响应式|HTML5|Hybrid|桌面+移动应用|一线前端负责人联袂推荐) 徐凯  著   ISBN 978-7-121-23345-6 2014年6月出版 定价:55.00 ...