JavaScript基础—闭包，事件

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>