22<p align =" center " ><img src =" https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498542774866&di=ed28b6b90c4be001acda441377113f2e&imgtype=0&src=http%3A%2F%2F7xkvof.com2.z0.glb.qiniucdn.com%2Farticle%2F79tvzE5PHyLClhki4Gbv.jpg " /></p >
33
44## JavaScript基础知识剖析
5+ #### 01
56* [ 01-01] ( https://github.com/TYRMars/JSlearn#01-01 ) ` 变量类型和计算(1) `
67* [ 01-02] ( https://github.com/TYRMars/JSlearn#01-02 ) ` 变量类型和计算(2) `
78* [ 01-03] ( https://github.com/TYRMars/JSlearn#01-03 ) ` 变量类型和计算(3)-JSON的理解 `
1011* [ 01-06] ( https://github.com/TYRMars/JSlearn#01-06 ) ` 原型链 `
1112* [ 01-07] ( https://github.com/TYRMars/JSlearn#01-07 ) ` instanceof `
1213* [ 01-08] ( https://github.com/TYRMars/JSlearn#01-08 ) ` 知识点小结 & 解决问题 `
14+ #### 02
1315* [ 02-01] ( https://github.com/TYRMars/JSlearn#02-01 ) ` 作用域和闭包-执行上下文 `
14- * [ 02-02] ( https://github.com/TYRMars/JSlearn#02-01 ) ` 作用域和闭包-this `
16+ * [ 02-02] ( https://github.com/TYRMars/JSlearn#02-02 ) ` 作用域和闭包-this `
1517* [ 02-03] ( https://github.com/TYRMars/JSlearn#02-03 ) ` 作用域和闭包-作用域 `
1618* [ 02-04] ( https://github.com/TYRMars/JSlearn#02-04 ) ` 作用域和闭包-闭包 `
19+ * [ 02-05] ( https://github.com/TYRMars/JSlearn#02-05 ) ` 知识点小结 & 解决问题 `
1720
1821
1922## JS小练习
@@ -527,6 +530,7 @@ function F1() {
527530
528531## 02-04
529532### 作用域和闭包-闭包
533+ * 函数作为返回值
530534``` JavaScript
531535function F1 () {
532536 var a = 100 ;
@@ -540,9 +544,121 @@ var f1 = F1();
540544var a = 200 ;
541545f1 ();
542546```
543- * 函数作为返回值
544547* 函数作为参数传递
548+ ``` JavaScript
549+ function F1 () {
550+ var a = 100 ;
551+ return function () {
552+ console .log (a); // 自由变量,父作用域中查找
553+ }
554+ }
555+ var f1 = F1 ();
556+ function F2 (fn ) {
557+ var a = 200 ;
558+ fn ();
559+ }
560+ F2 (f1);
561+ ```
562+ ## 02-05
563+ ### 知识点小结 & 解决问题
564+ #### 对变量提升的理解
565+ * 变量定义
566+ * 函数声明(注意和函数表达式的区别)
567+ #### this几种不停的使用场景
568+ * 作为构造函数执行
569+ * 作为对象属性执行
570+ * 作为普通函数执行
571+ * call apply bind
572+ ``` JavaScript
573+ function Foo (name ){
574+ this .name = name;
575+ }
576+ var f = new Foo (' zhangsan' );
577+
578+ var obj = {
579+ name: ' A' ,
580+ printName : function (){
581+ console .log (this .name );
582+ }
583+ }
584+ obj .printName ()
545585
586+ function fn (){
587+ console .log (this );
588+ }
589+ fn ()
590+
591+ // call apply bind
592+ function fn1 (name ) {
593+ alert (name);
594+ console .log (this );
595+ }
596+ fn1 .call ({x: 100 },' zhangsan' ,20 );
597+ // bind
598+ var fn2 = function fn2 (name ) {
599+ alert (name);
600+ console .log (this );
601+ }.bind ({y: 200 });
602+ fn2 (' zhangsan' ,20 );
603+ ```
604+ #### 创建10个<a >标签 点击的时候弹出来对应的序号
605+ * 错误写法
606+ ``` JavaScript
607+ // 这是一个错误的写法!!!
608+ var i,a;
609+ for (var i = 0 ; i < 10 ; i++ ) {
610+ a = document .createElement (' a' );
611+ a .innerHTML = i + ' <br>' ;
612+ a .addEventListener (' click' ,function (e ) {
613+ e .preventDefault ();
614+ alert (i)
615+ })
616+ document .body .appendChild (a);
617+ }
618+ // 输出为如下: <a>"9"<br></a>
619+ ```
620+ * 正确写法
621+ ``` JavaScript
622+ // 这是一个正确写法!!!
623+ var i;
624+ for (i = 0 ; i < 10 ; i++ ) {
625+ (function (i ){
626+ var a = document .createElement (' a' );
627+ a .innerHTML = i + ' <br>' ;
628+ a .addEventListener (' click' ,function (e ) {
629+ e .preventDefault ();
630+ alert (i);
631+ })
632+ document .body .appendChild (a);
633+ })(i)
634+ }
635+ ```
636+ #### 如何理解作用域
637+ * 自由变量
638+ * 作用域链,即自由变量的查找
639+ * 闭包的两个场景
640+
641+ #### 实际开发中闭包的应用
642+ ``` JavaScript
643+ // 闭包实际应用中主要作用于封装变量,收取权限
644+ function isFirstLoad () {
645+ var _list = [];
646+ return function (id ) {
647+ if (_list .indexOf (id) >= 0 ){
648+ return false ;
649+ }else {
650+ _list .push (id);
651+ return true ;
652+ }
653+ }
654+ }
655+
656+ // 应用
657+ var firstLoad = isFirstLoad ()
658+ firstLoad (10 ) // true
659+ firstLoad (10 ) // false;
660+ firstLoad (20 ) // true
661+ ```
546662---
547663
548664### JSDemo JS小程序
0 commit comments