关闭

10招打通你的js任督二脉

标签: 控制台javascript
360人阅读 评论(0) 收藏 举报
分类:

这段时间一直在看 亚里士朱德的文章,有一篇是我感触颇多,我跟着演示了几遍,也顺便 炒一下冷饭 ^_^

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>十招打通js任督二脉</title>
</head>
<body>
    打开控制台,咱们直接上代码。
    <script type="text/javascript">

        /*第一招:简单回调*/
        //this指针指向当前函数对象
        var simpleCallBack=(function(){
            console.log('这是第一招:');
            this.a="I'm an a";
            function foo(){
                console.log(this.a);
            }
            function doFoo(fn){
                fn();
            }
            function doFoo2(o){
                o.foo();
            }
            this.obj={
                a:2,
                foo:foo
            };
            doFoo(obj.foo);
            doFoo2(obj);
        })();

        /*第二招:用apply改变函数作用域*/
        //apply,call,bind都有个作用就是改变作用域,这里的apply将foo函数的作用域指向obj对象,同时传入参数。
        //再简单分析一下bind函数内部的嵌套,执行bind函数的时候返回的是一个匿名函数,所以执行bar(3)的时候实际上是执行的bind内部的匿名函数,返回的是之前传入的foo函数的执行结果。
        //函数没有返回值的情况下默认返回undefined。
        var applyChangeScope=(function(){
            console.log('这是第二招:');
            function foo(something) {
                console.log(this.a,something);
            }
            function bind(fn,obj){
                return function(){
                    return fn.apply(obj,arguments);
                }
            }
            this.obj={
                a:2
            }
            this.bar=bind(foo,obj);
            this.b=bar(3);
            console.log(b);
        })();

        /*第三招:new关键字*/
        //bind函数的一个参数为null代表作用域不变,后面的不定参数将会和函数本身的参数按次序绑定,绑定之后执行函数只能从未绑定的参数开始传值。
        var theKeywordNew=(function(){
            console.log('这是第三招:');
            function foo(a,b){
                this.val=a+b;
            }
            this.bar=foo.bind(null,'p1');
            this.baz=new bar('p2');
            console.log(baz.val);
        })();

        /*第四招:自执行函数*/
        //立即执行匿名函数可以避免污染全局空间,但很少有人去关注赋值语句执行之后会返回什么结果,其实就是返回当前值。
        //也就是说当括号内执行完成赋值之后,返回的是o对象中的foo函数,函数的执行环境中有一个a对象。
        var executeFunction=(function(){
            console.log('这是第四招:');
            function foo(){
                console.log(this.a);
            }
            this.a=2;
            this.o={a:3,foo:foo};
            this.p={a:4};
            (p.foo=o.foo)();
        })();

        /*第五招:变量属性*/
        //当一个变量被声明之后,扩充其属性并不会改变原数据类型
        var variableAttribute=(function(){
            console.log('这是第五招:');
            this.a=[];
            a[0]=1;
            a['foobar']=2;
            console.log(a.length);
            console.log(a.foobar);
        });

        /*第六招:精度问题*/
        //当操作小数时请小心,js的小数计算并不精确,所以下面的判断是false
        //字符串变量是常亮
        var accuracyProblem=(function(){
            console.log('这是第六招:');
            this.a='foo';
            a[1]='o';
            console.log(0.1+0.2==0.3||a);
        })();

        /*第七招:命名提升*/
        //声明的变量和命名函数都会被提升到代码的最前面,只不过声明的额变量的赋值语句在代码的位置不变。所以下面的代码可以理解为:
        //var foo;
        //function foo(){
        //  console.log(1);
        //}
        //foo();
        //foo=0;
        //foo=function(){
        //  console.log(2);
        //};
        var naming1=(function(){
            console.log('这是第七招:');
            foo();
            this.foo=0;
            function foo(){
                console.log(1);
            }
            this.foo=function(){
                console.log(2);
            };
        })();
        /*更诡异的变招*/
        var naming2=(function(){
            console.log('下面的这招能看懂就是理解第七招精髓了:');
            foo();
            this.foo=0;
            function foo(){
                console.log(1);
            }
            /*下面就开始报错了(可以去掉注释看看)
            this.foo();
            this.foo=function(){
                console.log(2);
            };
            this.foo();
            */
        })();

        /*第八招:作用域*/
        //javascript没有代码作用域,只有函数作用域
        // 下面的代码可以理解为:
        // function foo(){
        //  console.log('a');
        // }
        // function foo(){
        //  console.log('b');
        // }
        // foo();
        // var a=true;
        // if(a){}else{}
        var scope=(function(){
            console.log('这是第八招:')
            foo();
            this.a=true;
            if(this.a){
                function foo(){
                    console.log('a');
                }
            }else{
                function foo(){
                    console.log('b');
                }
            }
        })();

        /*第九招:闭包陷阱*/
        //闭包有个重要的作用就是,在内层函数引用外层函数定义的变量时,外层函数的变量不会被持久化。这里有个隐藏陷阱就是for循环结束之后i仍然自增了1
        var closureTrap=(function(){
            console.log('这是第九招:');
            for(var i=1;i<=5;i++){
                setTimeout(function(){
                    console.log(i);
                },i*1000);
            }
        })();

        /*第十招:伪闭包*/
        // 闭包是函数的嵌套定义,而不是函数的嵌套调用
        var pseudoClosure1=(function(){
            console.log('这是第十招:');
            function foo(){
                console.log(a);
            }
            function bar(){
                var a=3;
                foo();
            }
            this.a=2;
            bar();
        })();
        //那么问题来了,怎么输出3呢?
        var pseudoClosure1=(function(){
            console.log('第十招变招:');
            function bar(){
                function foo(){
                    console.log(a);
                }
                var a=3;
                foo();
            }
            this.a=2;
            bar();
        })();

        /* 
         * @参考:亚里士朱德《十段代码打通js学习的任督二脉》
         * http://yalishizhude.github.io/2015/10/25/10/
         */

    </script>
</body>
</html>

感兴趣的同学可以download下来 演示一下。
原文@ 亚里士朱德《十段代码打通js学习的任督二脉》
http://yalishizhude.github.io/2015/10/25/10/

2
0
查看评论

早鸟最后一天:Linux的任督二脉之内存管理2018.1.29-2.2微信群直播报名

这是宋宝华老师《Linux的任督二脉:进程调度和内存管理》的第二脉,第一脉《打通Linux脉络系列:进程、线程和调度》的CSDN录播位于: http://edu.csdn.net/course/detail/5995本次内存管理直播,采用微信群形式。1.10是early bird报名价格的最后一天。...
  • juS3Ve
  • juS3Ve
  • 2018-01-09 00:00
  • 176

English learning method ---学英语重中之重打通“任督二脉”

漫漫十年艰辛路,英语学习之旅         曾经秉承“路漫漫其修远兮,吾将上下而求索”的信念,开始将a b c d e f g (啊,波,词,的,额,佛,哥)  abcdefg()转变,一学就是十多年啊,算算我从初一开...
  • mazhaojuan
  • mazhaojuan
  • 2013-09-14 17:33
  • 3054

js基础-javascript任督二脉-原型链 ★★★

原型链3.1 原型每一个JavaScript对象(null除外)都和另一个对象相关联,也可以说,继承另一个对象。另一个对象就是我们熟知的“原型”(prototype),每一个对象都从原型继承属性。只有null除外,它没有自己的原型对象。我们可以通过proto(首尾都是双下划线)来获取实例的原型对象。...
  • qq_39198420
  • qq_39198420
  • 2017-09-22 09:41
  • 114

微信应用号开发知识贮备之打通React Component任督二脉

随着微信应用号的呼之欲出,相信新一轮的APP变革即将发生。作为行业内人士,我们很应该去拥抱这个趋势。这段时间在忙完工作之余准备储备一下这方面的知识点,以免将来被微信应用号的浪潮所淹没...
  • zhubaitian
  • zhubaitian
  • 2016-09-25 20:45
  • 837

宋宝华:Linux的任督二脉——进程调度和内存管理

宋宝华:Linux的任督二脉——进程调度和内存管理(转载) 原创 2017-08-22 宋宝华  转载Linuxer 作者简介 宋宝华,他有10几年的Linux开发经验。他长期在大型企业担任一线工程师和系统架构...
  • u013372900
  • u013372900
  • 2017-08-23 21:22
  • 729

Linux的任督二脉:进程调度和内存管理

比如进程的调度延时是多少?Linux能否硬实时?多核下多线程如何执行?系统的内存究竟耗到哪里去了?我写的应用程序究竟耗了多少内存?什么是内存泄漏,如何判定内存是否真的泄漏?CPU速度、内存大小和系统性能的关联究竟是什么?内存和I/O存在着怎样的千丝万缕的联系?
  • 21cnbao
  • 21cnbao
  • 2017-08-23 14:45
  • 21582

Linux任督二脉之内存管理(三) PPT

五节课的第三节课-进程的内存消耗和泄漏*进程的VMA。*进程内存消耗的4个概念:vss、rss、pss和uss*page fault的几种可能性,major和minor*应用内存泄漏的界定方法*应用内存泄漏的检测方法:valgrind和addresssanitizer练习题*看一下进程的/proc/...
  • juS3Ve
  • juS3Ve
  • 2018-01-20 00:00
  • 72

打通任督二脉

任督二脉是两条涉及长寿的经脉!欲要获得长寿,必须打开任督二脉间的断脉!在历史上打开任督二脉者只有一人,那就是印度的静树大师,而中国武林历史上没有任何人打开过任督二脉!凡与此相关的传言纯属文人墨客之杜撰。   静树大师生于中国北宋同时期的印度,是个读书人,知识渊博,30余岁投身于印度所罗门王教习武。...
  • ikscher
  • ikscher
  • 2013-08-05 12:20
  • 708

Linux任督二脉之内存管理(二) PPT

五节课的第二节课-内存的动态申请和释放* slab、kmalloc/kfree、/proc/slabinfo和slabtop* 用户空间malloc/free与内核之间的关系* mallopt* vmalloc* 内存耗尽(OOM)、oom_score和oom_adj* Android进程生命周期与...
  • juS3Ve
  • juS3Ve
  • 2018-01-19 00:00
  • 87

Linux的任督二脉之内存管理线上微信群直播报名(2018.1.29-2.2)

这是宋宝华老师《Linux的任督二脉:进程调度和内存管理》的第二脉,第一脉《打通Linux脉络系列:进程、线程和调度》的CSDN录播位于: http://edu.csdn.net/huiyiCourse/series_detail/60?utm_source=wx2本次内存管理直播,采用微信群形式。...
  • juS3Ve
  • juS3Ve
  • 2018-01-02 00:00
  • 314
    个人资料
    • 访问:294299次
    • 积分:3692
    • 等级:
    • 排名:第10421名
    • 原创:95篇
    • 转载:13篇
    • 译文:2篇
    • 评论:56条
    文章分类
    最新评论