绑定函数而不是闭包来注入额外的参数

2024-01-22

看来不是

{  onClick: function(event){  someHandler('clicked', event); }  }

你可以写

{  onClick: someHandler.bind(null, 'clicked'); }

看起来更简洁,感觉更“实用”。

这有什么缺点吗?不创建闭包是否会带来性能提升?有没有办法保持this关闭会收到什么?


它不是一个“闭包”,它只是一个匿名函数。

我个人更喜欢bind版本,因为正如你所说,它更简洁。然而,根据这个 jsperf (http://jsperf.com/anonymous-function-vs-bind http://jsperf.com/anonymous-function-vs-bind),慢了十倍,这让我非常惊讶,特别是因为bind这里用的好像是原生的。一个假设是bind,或者更确切地说,它生成的函数,需要查看传入的参数并构造一个参数列表以传递给被调用的函数。

维持this,你需要一个变体bind比如下划线的_.partial,或者你可以自己写一个:

function partial(fn) {
    var slice = Array.prototype.slice,
        args = slice.call(arguments, 1);
    return function() {
        return fn.apply(this, args.concat(slice.call(arguments, 1)));
    };
}

不幸的是,使用的变化partial ({ onClick: partial(someHandler, 'clicked'); })仍然比匿名函数慢十倍。

jsperf 中的另一个测试用例支持参数列表处理导致速度变慢的假设,该测试用例定义了partial1它只预定义了底层函数的两个参数中的第一个:

function partial1(fn, a) {
    return function(b) {
        return fn.call(this, a, b);
    };
}

使用该方法不需要创建和合并参数列表,只会导致速度降低 25-35%,而不是 90%。

如果我们不在乎路过this,这使我们能够避免使用Function#call:

function partial2(fn, a) {
    return function(b) {
        return fn(a, b);
    };
}

那么减速幅度仅为 10%。

然而,如果我们真的想通过this,那么我们需要将匿名函数版本写为

{ onClick: function(event) { someHandler.call(this, 'clicked', event); }  }

这也导致比原始版本慢 20-25%,大概是由于调用的成本Function#call。所以从这个意义上说,假设你do想要通过this,匿名函数和我们自制函数的性能partial1,根据参数数量定制,大致相同,这并不奇怪,因为它们本质上做的是相同的工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

绑定函数而不是闭包来注入额外的参数 的相关文章

  • Angular $http.get:如何捕获所有错误?

    我发送一个表单到nodejs进行身份验证 使用 http get在以下函数中并添加promise gt then 在生产中 这是否可以处理我可能从服务器收到的所有错误 我还需要向此功能添加其他内容吗 MyApp controller Log
  • 单击时获取元素的 id(php、jquery、ajax、javascript)

    抱歉 这是我的第一个项目 我学到了很多东西 因此 如果有人可以帮助我 我将不胜感激 我的项目中有这个侧边栏 其中包含 rss 链接 我必须使用 ajax 因此每次用户单击任何 rss 链接时 提要都会出现在屏幕上 这是我的侧边栏代码 div
  • 在使用 jQuery 拖动时向元素添加 CSS 类

    是否可以在元素被拖动到特定区域时向其添加 CSS 类 并在元素被删除后替换该类 我并不是到处寻找这个功能 而是只在特定区域寻找这个功能 是的 这当然有可能 jQuery UI 提供了一些方便的选项和事件来执行此操作 对于初学者来说 可拖动元
  • 少吞咽然后缩小任务

    我必须在 gulp 中执行 2 个步骤 减少 css 文件格式 缩小生成的 css 文件 这是我的吞咽文件 var gulp require gulp watch require gulp watch less require gulp l
  • 非常基本的 JS 编码,是否有 SoundManager2?

    我想在我的网站上包含一个具有以下属性的音频 可能的视频播放器 必须可通过 div 通过 CSS 设计样式 可以读取所有ID3信息 可以从数据库中提取文件 可能是 GoDaddy 的 Easy Database 无闪光 可转移至智能手机等 我
  • 使用智能菜单jquery打印json

    menu name Computers children name Notebook children name Apple name Windows name Tablets children name Apple name Androi
  • 获取 pdf 第 1 页(共 2 页)的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我
  • 将 javascript 放在 header 之外有多糟糕?

    这个问题几乎已经说明了一切 我开始添加一些功能到我的周末项目 http www my clock net 对于我和几个朋友来说 这是一个小应用程序 因为我们是交换生 所以它对我们来说有点有用 但事情是这样的 我在 php 中执行此操作并使用
  • 尝试使用 CasperJS 跟踪 iframe 中的链接

    我正在尝试使用CasperJS http casperjs org index html跟踪 iframe 中的链接 但我似乎无法获取 iframe 的文档 这是使用我找到的 iframe 示例页面进行的测试 第三个 iframe 有一个名
  • 使用 Javascript 对象模型在 SharePoint 任务上设置“分配给”

    我想创建一个共享点任务并将其分配给我自己 当前用户 在 javascript 对象模型中 我有下面的代码 但我认为我需要设置 spusercollection 对象 而不是设置特定用户 但是 我似乎无法在任何地方找到如何执行此操作的任何示例
  • 从对象获取数据 - 我看到数据但无法保存它们

    正如你所看到的 我是新来的 我确实尝试过搜索 但没有找到解决我问题的方法 所以这是我的问题 如果我这样做 console log grid data kendoGrid data 这在控制台中显示如下 所以我明白这一点 有一个数组和一个带有
  • 我什么时候应该使用内联和外部 Javascript?

    我想知道什么时候应该包含外部脚本或将它们与 html 代码内联编写 就性能和易于维护而言 这方面的一般做法是什么 真实场景 我有几个需要客户端表单验证的 html 页面 为此 我使用了一个包含在所有这些页面上的 jQuery 插件 但问题是
  • Facebook 登录无法在移动浏览器中使用

    我使用 react facebook login 在我的网站中实现了 facebook 登录module https github com keppelen react facebook login 我在 ComponentDidMount
  • React JS“this”没有按预期工作

    我有下面的代码 save function var this this console log this refs itemText this setState isEditing false function console log In
  • 上传前如何检查图片的宽度和高度

    对于图片上传 我编写了以下 html 代码
  • 元素在主体内找不到足够的空间 - JavaScript 样式

    相关信息 该页面包含两个元素 An
  • 使用 jQuery 更改 SVG 元素的“xlink:href”属性

    我正在尝试使用单击事件更改 xlink href 属性 到目前为止它部分有效 这就是我正在做的 HTML a href class ui btn ui corner all ui shadow editIcon style text ali
  • 根据数据更改图例颜色高图表

    我可以根据数据动态设置列的颜色 但无法弄清楚如何更改图例中的颜色 请注意 jsfiddle 最新的条形图是绿色的 但图例是蓝色的 有没有办法改变列颜色也会改变图例颜色 这是我用于列颜色的代码 jsfiddle http jsfiddle n
  • 谷歌浏览器如何启动桌面应用程序?

    我真的不知道术语 所以我将从一个例子开始 如果我点击磁力链接 Google Chrome 会询问我是否要启动 torrent 客户端 我单击 确定 chrome 启动该应用程序 该应用程序根据链接执行一些操作 现在有办法查看应用程序如何从
  • Modernizr 未将类应用于 html 标签

    我目前正在构建一个网站 我需要使用 Modernizr 但由于某种原因 它没有将类应用到 html 标签 因为它应该 我的代码如下所示

随机推荐