javascript高阶技能

<script type="application/javascript">
//            'use strict';
            // 1 类型检测
            // typeof产生的结果都是object，不可信
            var a = [1,2,3];
            console.log(typeof a);
            var b = null;
            console.log(typeof b);
            // instanceof : a instanceof A  var a = new A();
            // 返回true：说明a.__proto__ = A.prototype
            
            var a = [1,2,3];
            console.log(a instanceof Array);//true
            a.__proto__ = null;//修改a
            
            console.log(a instanceof Array);//false
            console.log(a[1]);//不影响使用
            
            //instanceof和typeof都不能准确的获取对象类型
            //只有用Object.prototype.toString.call才能准确的检查出对象的类型
            console.log(Object.prototype.toString.call('b'));
            console.log(Object.prototype.toString.call(true));
            console.log(Object.prototype.toString.call(b));
            console.log(Object.prototype.toString.call(a));
            console.log(Object.prototype.toString.call(undefined));
            console.log(Object.prototype.toString.call(null));
            console.log(Object.prototype.toString.call(44));
            console.log(Object.prototype.toString.call(NaN));
            console.log(Object.prototype.toString.call(/aa/));// '/正则的内容/'是正则的写法
            console.log(Object.prototype.toString.call(window.JSON));
            console.log(Object.prototype.toString.call(Object));//[object Function]
            
            //区别原生库函数和自定义函数，用只有用Object.prototype.toString.call也不行，都是一样的function
            var f = function(){
                return 1;
            }
            console.log(Object.prototype.toString.call(parseInt));//[object Function]
            console.log(Object.prototype.toString.call(f));//[object Function]
            
            var rnative_regex = /^[^{]+\{\s+\[native \w/;//判断函数内容是否包含'{ [native'
            console.log(rnative_regex.test(f));//false 不是原生库函数，用户自定义函数
            console.log(rnative_regex.test(parseInt));// 是原生库函数

            // 2 如何在忘记使用new时，依然可以正确调用构造函数
            function F(t){
                if (this instanceof F){//如果调用的this是F的类型，就实例化(instanceof判断对象类型只能在刚开始没有被改变的时，可以用在此处)
                    console.log('in F() this is : ' + this);
                    this.t = t;
                    this.f = function(){
                        console.log('in f() ');
                    }
                }else{//不是就通过new F(t)，实例化
                    return new F(t);
                }
            }
            var fiErr = F(3);//调用F函数时，没有new
            
            // 3 惰性载入
            //为了兼容不同浏览器对原始js函数支持不同的情况
            //一个例子：
            
            //工作分两步：
            //编译过程：确定使用哪个函数，并返回选中的函数
            //工作过程：真正运行返回的函数
            
            //方法一：修改函数名称，修改函数XXX，然后调用XXX函数
            //只会在第一次调用是运行编译过程，做if判断是否支持列出的函数
            //以后调用就直接返回对应的函数
            function XXX(){
                if (typeof xx1 != undefined){//判断当前浏览器是否支持xx1函数
                    XXX = function(){
                        return xx1();
                    }
                }else if (typeof xx2 != undefined){//判断当前浏览器是否支持xx2函数
                    XXX = function(){
                        return xx2();
                    }
                }else if (typeof xx3 != undefined){//判断当前浏览器是否支持xx3函数
                    XXX = function(){
                        return xx3();
                    }
                }else if (typeof xx4 != undefined){//判断当前浏览器是否支持xx4函数
                    XXX = function(){
                        return null;
                    }
                }
                return XXX();
            }
            // 方法二：修改函数的变量，把XXX函数变为函数表达式
            // 申明匿名函数，然后直接执行：
            // 执行你匿名函数就是相当于编译过程
            // 返回函数，才是要执行的真正函数，相当于工作过程
            var XX = (function(){
                if (typeof xx1 != 'undefined'){//判断当前浏览器是否支持xx1函数
                    return function(){
                        return xx1();
                    }
                }else if (typeof xx2 != 'undefined'){//判断当前浏览器是否支持xx2函数
                    return function(){
                        return xx2();
                    }
                }else if (typeof xx3 != 'undefined'){//判断当前浏览器是否支持xx3函数
                    return function(){
                        return xx3();
                    }
                }else if (typeof xx4 != 'undefined'){//判断当前浏览器是否支持xx4函数
                    return function(){
                        return null;
                    }
                }
            })();//匿名立即执行函数
            
            XX();
            
            // 4 函数绑定
            
            var handler = {
                text: 'handler text!',
                handlerClick: function(event){
                    console.log(this);
                    console.log(this.text);//如果this是btn，这里会报错
                }
            }
            var btn = document.getElementById('btn');
            //this引起的问题：以下这样的调用，this就是调用handler函数的btn，会报错，因为传入的this是btn，不是handler，而bnt没有text属性
//            btn.addEventListener('click',handler.handlerClick);
            // 4.1 自定义bind解决
            function bind(fn,context){
                return function(){
                    return fn.apply(context,arguments);//将想要的context赋给fn
                }
            }
            // 将handler绑定到handler.handlerClick函数上，this就是handler
//            btn.addEventListener('click',bind(handler.handlerClick,handler));
            // 4.2 使用ES5原生的函数bind
            btn.addEventListener('click',handler.handlerClick.bind(handler));
            
            
            // 5 函数柯里化（curry）
            // 柯里化：用于帮助创建，已经设置好一个或多个参数的函数
            function add(num1,num2,num3,num4){
                return num1 + num2 + num3 + num4;
            }
            // 无论如何调用，第一个参数都是5，但是这个写法会调用2次函数，代价高，不可取
            // 但如果参数较多，下面这样调用就要写有很多个函数，满足不同情况下，固定参数和不固定参数多种排列组合的情况
//            function curriedAdd(num2){
//                return add(5,num2);
//            }
            //
            
            function curry(fn){
                var args = Array.prototype.slice.call(arguments,1);//固定参数
                console.log('args: ' + args);
                return function(){
                    var innerArgs = Array.prototype.slice.call(arguments);//不固定参数
                    console.log('innerArgs' + innerArgs);
                    var finalArgs = args.concat(innerArgs);
                    return fn.apply(null,finalArgs);
                }
            }
            //这样写，泛化函数，可以提高运行速度
            var curriedAdd = curry(add,5,6,7,8);//固定参数
            console.log(curriedAdd(9,10));//不固定参数