高级函数.md

高级函数

函数是JS中常用的功能；本质是十分简单的，实现高内聚，低耦合；因为用在不同的场景有不同的功能；一些额外的功能可以通过使用闭包来实现。此外，由于所有的函数都是对象，所以使用函数指针非常简单。这些令 JavaScript 函数不仅有趣而且强大。以下几节描绘了几种在 JavaScript 中使用函数的高级方法。

• 数据类型的安全检测
• 构造函数的安全作用域
• 惰性载入函数
• 函数绑定
• 函数柯里化

数据类型的安全检测

检测数据类型，最简单的检测方法是typeof ， 但是typeof在检测对象数据类型的时候，太笼统了，不精确；

instanceof 操作符在存在多个全局作用域（像一个页面包含多个 frame）的情况下，也是问题多多。

console.log(value instanceof Array);

以上代码要返回 true ， value 必须是一个数组，而且还必须与 Array 构造函数在同个全局作用域中。（别忘了， Array 是 window 的属性。）如果 value 是在另个 frame 中定义的数组，那么以上代码就会返回 false 。

解决办法

在任何值上调用 Object 原生的 toString() 方法，都会返回一个 [object NativeConstructorName] 格式的字符串。每个类在内部都有一个 [[Class]] 属性，这个属性中就指定了上述字符串中的构造函数名。

var testStr = 'cccccccc';
var testAry = [2,3,4,5];
var testObj = {
    name:"zhu",
    age:26,
    gender:"man"
};

console.log(Object.prototype.toString.call(testStr));//[object String]
console.log({}.toString.call(testAry));//[object Array]
console.log({}.toString.call(testObj));//[object Object]

其中 Object.prototype.toString,可以简写为**{}.toString.**;

function isArray(value){
	return {}.toString.call(value) == "[object Array]";
}

这样就可以安全检测是不是数组了；

"[object Array]"的

• 第一个object是因为用的是对象的原型上的；所以是object（小写的o）；
• 第二个Array是因为属于数组类，所以Array第一个字母是大写的A；

这一技巧也广泛应用于检测原生 JSON 对象。 Object 的 toString() 方法不能检测非原生构造函数的构造函数名。因此，开发人员定义的任何构造函数都将返回[object Object]。有些 JavaScript 库会包含与下面类似的代码。

var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON) =="[object JSON]";

在 Web 开发中能够区分原生与非原生 JavaScript 对象非常重要。只有这样才能确切知道某个对象到底有哪些功能。这个技巧可以对任何对象给出正确的结论。

请注意， Object.prototpye.toString() 本身也可能会被修改。上面的技巧假设 Object.prototpye.toString() 是未被修改过的原生版本。

构造函数的安全作用域

当构造函数没有使用new生成实例，直接使用的时候；由于构造函数中 this 对象是在运行时绑定的 ; this关键字会映射到全局对象window上；导致错误对象属性的意外增加。

function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
}

var person=Person("zhu",26,"WEB");
console.log(person);//undefined;
console.log(window.name);//"zhu;
console.log(window.age);//26;
console.log(window.job);//WEB";

这里，原本针对 Person 实例的三个属性被加到 window 对象上，因为构造函数是作为普通函数调用的，忽略了 new 操作符。这个问题是由 this 对象的晚绑定造成的，在这里 this 被解析成了 window对象。由于 window 的 name 属性是用于识别链接目标和 frame 的，所以这里对该属性的偶然覆盖可能会导致该页面上出现其他错误。这个问题的解决方法就是创建一个作用域安全的构造函数

作用域安全的构造函数在进行任何更改前，首先确认 this 对象是正确类型的实例。如果不是，那么会创建新的实例并返回。

如下：

function Person(name,age,job){
    if(this instanceof Person){
        console.log("Person用法 - 正确");
        this.name=name;
        this.age=age;
        this.job=job;
    }else{
        console.log("Person用法 - 不正确");
        return new Person(name,age,job);
    }
}
var person=Person("hahahah",26,"WEB");
console.log(person);
console.log(person.name);//"hahahah";
console.log(window.name);//""
console.log(typeof window.name);//string
console.log(window.age);//26;
console.log(window.job);//WEB";

这段代码中的 Person 构造函数添加了一个检查并确保 this 对象是 Person 实例的 if 语句，它表示要么使用 new 操作符，要么在现有的 Person 实例环境中调用构造函数。任何一种情况下，对象初始化都能正常进行。如果 this 并非 Person 的实例，那么会再次使用 new 操作符调用构造函数并返回结果。最后的结果是，调用 Person 构造函数时无论是否使用 new 操作符，都会返回一个 Person 的新实例，这就避免了在全局对象上意外设置属性。

** 实现这个模式后，你就锁定了可以调用构造函数的环境。如果你使用构造函数窃取模式的继承且不使用原型链，那么这个继承很可能被破坏。**

function Parent(name,age,job){
    if(this instanceof Parent){
        console.log("Chilren用法 - 正确");
        this.name=name;
        this.age=age;
        this.job=job;
    }else{
        console.log("Chilren用法 - 不正确");
        return new Parent(name,age,job);
    }
}
function Chilren(parentName){
    Parent.call(this,"child","1","null");
    this.name=parentName;
}

var target=new Chilren("ooooo");
console.log(target);//{name: "ooooo"}
console.log(target.age);//undefined

在这段代码中， Parent 构造函数是作用域安全的，然而 Chilren 构造函数则不是。新创建一个 Chilren 实例之后，这个实例应该通过 Parent.call() 来继承 Parent 的 age 属性。但是，由于 Parent 构造函数是作用域安全的， this 对象并非 Parent 的实例，所以会创建并返回一个新的 Parent 对象。 Chilren 构造函数中的 this 对象并没有得到增长，同时 Parent.call() 返回的值也没有用到，所以 Chilren 实例中就不会有 age 属性。

function Parent(name,age,job){
    if(this instanceof Parent){
        console.log("Chilren用法 - 正确");
        this.name=name;
        this.age=age;
        this.job=job;
    }else{
        console.log("Chilren用法 - 不正确");
        return new Parent(name,age,job);
    }
}
function Chilren(parentName){
    Parent.call(this,"child","1","null");
    this.name=parentName;
}
Chilren.prototype = new Parent();//【加上这一行代码，让Chilren的实例可以指到Chilren即可】
var target=new Chilren("ooooo");
console.log(target);//Chilren {name: "ooooo", age: "1", job: "null"}
console.log(target.age);//1

上面这段重写的代码中，一个 Chilren 实例也同时是一个 Parent 实例，所以 Parent.call()会照原意执行，最终为 Chilren 实例添加了 age 属性。

多个程序员在同一个页面上写 JavaScript 代码的环境中，作用域安全构造函数就很有用了。届时，对全局对象意外的更改可能会导致一些常常难以追踪的错误。除非你单纯基于构造函数窃取来实现继承，推荐作用域安全的构造函数作为最佳实践。

惰性载入函数

惰性载入表示函数执行的分支仅会发生一次

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        console.log("支持 XMLHttpRequest");
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefined"){
        console.log("支持 ActiveXObject");
        if (typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
            for (var i=0,len=versions.length; i < len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else{
        throw new Error("浏览器不支持XHR")
    }
}

每次调用 createXHR() 的时候，它都要对浏览器所支持的能力仔细检查。首先检查内置的 XHR，然后测试有没有基于 ActiveX 的 XHR，最后如果都没有发现的话就抛出一个错误。每次调用该函数都是这样，即使每次调用时分支的结果都不变：如果浏览器支持内置 XHR，那么它就一直支持了，那么这种测试就变得没必要了。即使只有一个 if 语句的代码，也肯定要比没有 if 语句的慢，所以如果 if 语句不必每次执行，那么代码可以运行地更快一些。解决方案就是称之为惰性载入的技巧

有两种实现惰性载入的方式

• ** 第一种方法是函数的重写；**,执行一次后再重写；

在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。

function createXHR(){
    if(typeof XMLHttpRequest != 'undefined'){
        /*return new XMLHttpRequest();*/
        createXHR=function(){
            return new XMLHttpRequest();
        }
    }else if(typeof ActiveXObject != "undefined"){
        createXHR=function(){
            if (typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
                for (var i=0,len=versions.length; i < len; i++){
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (ex){
                        //跳过
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        };
    }else{
        createXHR=function(){
            throw new Error("浏览器不支持XHR")
        };
    }
}
console.log(createXHR.toString());//createXHR原样打印出来；

//执行后,createXHR更改为最终的结果；
createXHR();
console.log(createXHR.toString());//createXHR已经是改写后的createXHR了

createXHR运行之前，打印的时候，会把这个函数原样打印出来；

createXHR运行之后，会被重新改写了，之后的createXHR是改写后的createXHR；

在chrome等标准浏览器会改写为下面这样的；

function (){
    return new XMLHttpRequest();
}

在这个惰性载入的 createXHR() 中， if 语句的每一个分支都会为 createXHR 变量赋值，有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用 createXHR() 的时候，就会直接调用被分配的函数，这样就不用再次执行 if 语句了。

第二种方法是：变量接收自执行函数

是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点性能。

//console.log(createXHR.toString());//这么写会报错
var createXHR=(function (){
    if(typeof XMLHttpRequest != 'undefined'){
        /*return new XMLHttpRequest();*/
        return function(){
            return new XMLHttpRequest();
        }
    }else if(typeof ActiveXObject != "undefined"){
        return function(){
            if (typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
                for (var i=0,len=versions.length; i < len; i++){
                    try {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    } catch (ex){
                        //跳过
                    }
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        };
    }else{
        return function(){
            throw new Error("浏览器不支持XHR")
        };
    }
})();
console.log(createXHR.toString());//createXHR已经是改写后的createXHR了

//执行后,createXHR
createXHR();

console.log(createXHR.toString());//createXHR已经是改写后的createXHR了

使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。实际的逻辑都一样。不一样的地方就是第一行代码（使用 var 定义函数）、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给 createXHR() 。

惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。至于哪种方式更合适，就要看你的具体需求而定了。不过这两种方式都能避免执行不必要的代码

函数绑定

函数绑定要创建一个函数，可以在特定的 this 环境中以指定参数调用另一个函数。该技巧常常和回调函数与事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。

<script>
    //这里是事件工具库；
    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent("on" + type, handler);
            } else {
                element["on" + type] = null;
            }
        },

        getEvent: function (event) {
            return event ? event : window.event;
        },
        getTarget: function (event) {
            return event.target || event.srcElement;
        },
        preventDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        stopPropagation: function (event) {
            if (event.stopPropagation) {
                event.stopPropagation();
            } else {
                event.cancelBubbles = true;
            }
        },
        getRelatedTarget: function (event) {
            if (event.relatedTarger) {
                return event.relatedTarget;
            } else if (event.toElement) {
                return event.toElement;
            } else if (event.fromElement) {
                return event.fromElement;
            } else { return null; }

        }

    };
    //这里是绑定函数的代码；
    var handler={
        message:"Event handler",
        handleClick:function(e){
            console.log(this.message);
        }
    };
    var oBtn=document.getElementById("btn");
    EventUtil.addHandler(oBtn,"click",handler.handleClick);

</script>

点击后，输出的是undefined；并不是"Event hanler";原因是没有保存handler.handClick()的运行环境，this对象最后指的是btn这个ID的按钮；而非hanler； 可以通过代码验证；

var oBtn=document.getElementById("btn");
oBtn.message="这是ID为btn的message属性";
EventUtil.addHandler(oBtn,"click",handler.handleClick);

解决办法：包一层函数

var oBtn=document.getElementById("btn");
oBtn.message="这是ID为btn的message属性";
EventUtil.addHandler(oBtn,"click",function(e){
    handler.handleClick(e)
});

这个解决方案在 onclick 事件处理程序内使用了一个闭包直接调用 handler.handleClick() 。当然，这是特定于这段代码的解决方案。创建多个闭包可能会令代码变得难于理解和调试。因此，很多JavaScript 库实现了一个可以将函数绑定到指定环境的函数。这个函数一般都叫 bind() 。

function bind(fn,context){
    return function(){
        return fn.apply(context,arguments);
    }
}
//这里是绑定函数的代码；
var handler={
    message:"Event handler",
    handleClick:function(e){
        console.log(this.message+":"+ e.type);
    }
};
var oBtn=document.getElementById("btn");
oBtn.message="这是ID为btn的message属性";
EventUtil.addHandler(oBtn,"click",bind(handler.handleClick,handler));

handler.handleClick() 方法和平时一样获得了 event 对象，因为所有的参数都通过被绑定的函数直接传给了它。

ECMAScript 5 为所有函数定义了一个原生的 bind() 方法，进一步简单了操作。换句话说，你不用再自己定义 bind() 函数了，而是可以直接在函数上调用这个方法。

通过输出到控制台查看下；

console.dir(bind);

//这里是绑定函数的代码；
var handler={
    message:"Event handler",
    handleClick:function(e){
        console.log(this.message+":"+ e.type);
    }
};
var oBtn=document.getElementById("btn");
oBtn.message="这是ID为btn的message属性";
//EventUtil.addHandler(oBtn,"click",bind(handler.handleClick,handler));
EventUtil.addHandler(oBtn,"click",handler.handleClick.bind(handler));//原生的bind方法；

原生的 bind() 方法与前面介绍的自定义 bind() 方法类似，都是要传入作为 this 值的对象。支持原生 bind() 方法的浏览器有 IE9+、Firefox 4+和 Chrome。

只要是将某个函数指针以值的形式进行传递，同时该函数必须在特定环境中执行，被绑定函数的效用就突显出来了。它们主要用于**事件处理程序以及 setTimeout() 和 setInterval() **。然而，被绑定函数与普通函数相比有更多的开销，它们需要更多内存，同时也因为多重函数调用稍微慢一点，所以最好只在必要时使用。

函数柯里化

与函数绑定紧密相关的主题是函数柯里化（function currying），它用于创建已经设置好了一个或多个参数的函数。函数柯里化的基本方法和函数绑定是一样的：使用一个闭包返回一个函数。两者的区别在于，当函数被调用时，返回的函数还需要设置一些传入的参数

function add(arg1,arg2){
    return arg1+arg2;
}

function curriesAdd(num2){
    return add(5,num2);
}
console.log(add(2,3));//5
console.log(curriesAdd(5));//10

这段代码定义了两个函数： add() 和 curriedAdd() 。后者本质上是在任何情况下第一个参数为 5的 add() 版本。尽管从技术上来说 curriedAdd() 并非柯里化的函数，但它很好地展示了其概念

柯里化函数通常由以下步骤动态创建：调用另一个函数并为它传入要柯里化的函数和必要参数。下面是创建柯里化函数的通用方式。

function curry(fn){
    var args=Array.prototype.slice.call(arguments,1);
    return function (){
        var innerArgs=Array.prototype.slice.call(arguments);
        var finnalArgs=args.concat(innerArgs);
        console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
        return fn.apply(null,finnalArgs);
    }
}

function add(arg1,arg2){
    return arg1+arg2;
}

var curriedAdd = curry(add, 5);
console.log(curriedAdd(3)); //当调用 curriedAdd() 并传入3时，3会成为add()的第二个参数，同时第一个参数依然是5，最后结果便是和8。

也可以第一次直接把2个参数传进去；

var curriedAdd = curry(add, 5, 12);
console.log(curriedAdd()); //17 	在这里，柯里化的 add() 函数两个参数都提供了，所以以后就无需再传递它们了。

函数柯里化还常常作为函数绑定的一部分包含在其中，构造出更为复杂的 bind() 函数。

//这里是绑定函数的代码；
var handler = {
    message: "Event handled",
    handleClick: function(name, event){
        console.log(this.message + ":"+ name + ":"+ event.type);
    }
};
function bind(fn,context){
    var args=Array.prototype.slice.call(arguments,2);
    return function (){
        var innerArgs=Array.prototype.slice.call(arguments);
        var finnalArgs=args.concat(innerArgs);
        console.log("args->"+args+"  innerArgs->"+innerArgs+"   finnalArgs->"+finnalArgs);
        return fn.apply(context,finnalArgs);
    }
}

var oBtn=document.getElementById("btn");
EventUtil.addHandler(oBtn,"click",bind(handler.handleClick, handler, "btn"));

JavaScript 中的柯里化函数和绑定函数提供了强大的动态函数创建功能。使用 bind() 还是 curry()要根据是否需要 object 对象响应来决定。它们都能用于创建复杂的算法和功能，当然两者都不应滥用，因为每个函数都会带来额外的开销。