JavaScript 高级函数

🌙
手机阅读
本文目录结构

JS是一种极其灵活的语言,具有多种使用风格。一般来说,编写 JavaScript 要么使用过程方式,要么使用面向对象方式。然而,由于它天生的动态属性,这种语言还能使用更为复杂和有趣的模式。这些技巧要利用 ECMAScript 的语言特点、BOM扩展和 DOM 功能来获得强大的效果。

高级函数

函数是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 对象响应来决定。它们都能用于创建复杂的算法和功能,当然两者都不应滥用,因为每个函数都会带来额外的开销。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了