[译]箭头函数 vs .bind()

sewerganger 发布于2019-08-19 17:47 / 3529人阅读

摘要：在我们实际使用中经常用的箭头函数来代替提取对象的方法如果将一个对象的方法作为回调函数传入你需要定义一个确定的否则它将作为一个函数来执行值可能是也可能是全局对象例如另一种解决方案就是使用箭头函数译者注原文评论中也提到了的绑定运算符如下作为参数

在我们实际使用中,经常用ES6的箭头函数来代替Function.prototype.bind().

1.提取对象的方法

如果将一个对象的方法作为回调函数传入,你需要定义一个确定的this,否则它将作为一个函数来执行(this值可能是undefined, 也可能是全局对象).例如:

    obj.on("anEvent", console.log.bind(console))

另一种解决方案就是使用箭头函数:

    obj.on("anEvent", x => console.log(x))

译者注: 原文评论中也提到了ES7的绑定运算符, 如下:

    obj.on("anEvent", ::console.log)

2.this作为参数

下面的代码展示了一个小技巧:对于一些方法,你可能不需要用bind()来为回调函数绑定this,这类方法允许你在额外的参数中定义this的值..filter()就是这样一类方法:

    const as = new Set([1, 2, 3]);
    const bs = new Set([3, 2, 4]);
    const intersection = [...as].filter(bs.has, bs);
        // [2, 3]

如果说你使用了箭头函数,代码会更加清晰易读:

    const as = new Set([1, 2, 3]);
    const bs = new Set([3, 2, 4]);
    const intersection = [...as].filter(a => bs.has(a));
        // [2, 3]

3.部分赋值

bind()允许你设定一个函数部分参数的值,你可以藉由一个已有的函数,为它设定部分参数的值,然后创建一个新的函数:

    function add(x, y) {
        return x + y;
    }
    const plus1 = add.bind(undefined, 1);

再一次,我找到了使用箭头函数简化它的方法:

    const plus1 = y => add(1, y);

4.拓展阅读

Currying versus partial application (with JavaScript code)

Uncurrying this in JavaScript

GPU云服务器云服务器箭头函数 vs中c语言输出函数 linux下编译阿里 linux下编译运行

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78836.html

[译] React 组件中绑定回调

摘要：好的方案在构造函数中仍然使用，现在我们只要绕过每次渲染都要生成新的函数的问题就可以了。我们可以通过只在构造函数中绑定回调的上下问来解决这个问题，因为构造函数只会调用一次，而不是每次渲染都调用。原文：Binding callbacks in React components 在组件中给事件绑定处理函数是很常见的，比如说每当用户点击一个button的时候使用console.log打印一些...

Lin_R 2019-08-22 10:33 评论0 收藏0
【译】this 是什么？JavaScript 对象的内部工作原理

摘要：关键字会实例化一个新的对象实例，并在执行构造函数时将指向该实例。原文链接译是什么对象的内部工作原理原文链接：What is this? The Inner Workings of JavaScript Objects (需要梯子) 原文作者：Eric Elliott 译文永久链接：【译】什么是 this？JavaScript 对象的内部工作原理译者：士心翻译目的：函数动...

Hwg 2019-08-23 17:06 评论0 收藏0
深入理解JavaScript

摘要：深入之继承的多种方式和优缺点深入系列第十五篇，讲解各种继承方式和优缺点。对于解释型语言例如来说，通过词法分析语法分析语法树，就可以开始解释执行了。 JavaScript深入之继承的多种方式和优缺点 JavaScript深入系列第十五篇，讲解JavaScript各种继承方式和优缺点。写在前面本文讲解JavaScript各种继承方式和优缺点。但是注意：这篇文章更像是笔记，哎，再让我...

myeveryheart 2019-08-22 13:46 评论0 收藏0
[译]浅显易懂的 this 取值规则

摘要：遵循以下规则，按优先级排列。换句话说，当处于被调用函数的左边，则就是左边的对象。试一下通过两种不同的方式调用函数时的值。找到应用的规则很显然应用的是规则使用符号。在使用工具库时发现取值不符合上述规则时，请查看库文档。翻译自文章The Simple Rules to ‘this’ in Javascript。确定什么是 this 并非难事。总的来说，通过查找函数被调用时的位置（和方法...

X_AirDu 2019-08-22 16:27 评论0 收藏0
js

摘要：所以我们又可以得出一个结论原型的属性指向构造函数，构造函数又通过属性指回原型，但是并不是所有函数都具有这个属性，就没有这个属性。 1.原始类型 boolean number string null undefined symbol原始类型储存的都是值，是没有函数可以调用的，undefined.toString() 显示报错，但是1.toString() // 1 ；是因为1被强制转...

pubdreamcc 2019-08-23 15:32 评论0 收藏0