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. 一步步学习javascript基础篇(0):开篇索引

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

  9. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

随机推荐

  1. 【webGL】threejs入门 ---创建一个简单立方体

    开发环境 Three.js是一个JavaScript库,所以,你可以使用平时开发JavaScript应用的环境开发Three.js应用.如果你没什么偏好的话,我会推荐Komodo IDE. 调试建议使 ...

  2. Ubuntu 配置 no-ip

    安装Python开发依赖包 sudo apt-get install python-dev 配置PIP并安装noipy sudo apt-get install python-pip sudo pip ...

  3. Tomcat重启脚本restart.sh停止脚本stop.sh

    Tomcat重启脚本restart.sh停止脚本stop.sh Tomcat本身提供了 startup.sh(启动)shutdown.sh(关闭)脚本,我们在部署中经常会出现死进程形象,无法杀掉进程需 ...

  4. linux系统下静态IP的设置

    首先说明:下面用的系统为:kali 4.6.0版本的哦:不同的系统是不一样的:反正吧,在ubuntu上的好多方法在kali上就不管用,并且吧,不同的ubuntu的版本也不一样的: 第一步:设置网络的I ...

  5. html5 录制mp3音频,支持采样率和比特率设置

    13年的时候做过html5录音,一个问题是保存的wav格式文件很大,当初用了一个迂回的方式,上传到服务器后调用 lame 编码器转换,但由于文件大,上传较慢.不得不说,前端技术发展真是日新月异,有人实 ...

  6. php新手常用的函数(随时更新)

    //数字保留两位小数 $n = sprintf("%1.2f", $n); //方法二 $n = number_format($n, 2, '.', ''); //UTF8转GBK ...

  7. HDU 1114 完全背包+判断能否装满

    题意 给出一个存钱罐里的钱币重量 给出可能的n种钱币重量以及价值 求存钱罐中钱币的最小价值 若不可能另有输出 在裸的完全背包上加了一点东西 即判断这个背包能否被装满 初始化 dp[0]=0 其余的都使 ...

  8. 解决Regsvr32: DllRegisterServer entry point was not found

    原因: 虽然项目里面包含了DEF文件, 但是尼玛没有配置项目属性让链接器处理它啊! 解决方案: 项目属性->链接器->输入->模块定义文件->{输入文件名}

  9. LeetCode----67. Add Binary(java)

    package addBinary67;/* Given two binary strings, return their sum (also a binary string).For example ...

  10. Codeforces Round #104 (Div. 1)

    A.Lucky Conversion 题意 给定两个长度为 \(N(N \le 10^5)\) 且由4和7构成的 \(a, b\)串 对 \(a\) 可以有两种操作: 交换两个位置的字符; 改变一个位 ...