什么＆＃34; Function.call.bind（Function.bind）＆＃34;意思？

Question

我需要你的帮助。我被这些代码行困住了

var bind = Function.call.bind(Function.bind);
bind(CC, Components);

我试着了解它们是什么以及它们是如何工作的但是我不能： - （

1. 有人可以帮忙解释一下它们的工作原理吗？就像我一样 理解，＆＃34; Function.call.bind＆＃34;将调用一个函数 通过bind（）绑定它。和＆＃34; Function.bind＆＃34;将返回一个函数 由＆＃34; Function.call.bind＆＃34;调用。也不确定＆＃34;绑定（CC， 成分）＆＃34;作品。看起来组件将绑定到CC。请 如果我错了，请纠正我。
2. 如果我不想使用像这样的函数构造函数，我该怎样做才能以另一种方式重写上面的代码，但仍然保持相同的工作流/逻辑？

感谢您的帮助。

Answer 1

1。什么是Function#bind和独立bind功能？

Function#bind

对Function#bind的调用会创建一个新函数，该函数永远绑定到作为第一个参数传递的上下文。 Function#bind在函数上作为方法运行。也就是说，您只能绑定调用Function#bind的函数。

let str = 'Hello, World!'
let fn = () => console.log(this)

// Bind the `this` to be `str`
let boundFn = fn.bind(str)
boundFn() // => 'Hello, World!'

// Attempt re-bind:
boundFn = fn.bind('new str')
boundFn() // => 'Hello, World!'

______

Function#call

Function#call与Function#bind的不同之处在于执行给定的函数，其中包含上下文和任何其他参数。它不会返回新的绑定函数。

let str = 'Hello, '
let fn = (who) => console.log(this + who)
fn.call(str, 'World!') // => 'Hello, World!'

______

通过引用传递函数会丢失其上下文

当我们通过引用传递函数时，我们失去了它的上下文。在这种情况下，这意味着我们不能简单地var bind = Function.bind并将bind称为独立函数。

let log = () => console.log('Hello, World!')
let bind = Function.bind;    
bind(log) // => Uncaught TypeError: Bind must be called on a function

______

创建独立函数bind

您共享的代码创建了一个等同于Function#bind的速记（独立）函数，但接受函数绑定作为其第一个参数，并接受将该函数绑定为其第二个的上下文，而不是调用bind方法作为绑定函数的成员（例如fn.bind(ctx)）。

// Create standalone `bind` function
let bind = Function.call.bind(Function.bind);

let obj = { hello: 'World!' }
let log = () => console.log(this)
let boundFn = bind(log, obj)
boundFn() // => { hello: 'World!' }

______

2。如何在没有Function#bind的情况下实现此功能？

上述解决方案接受一个函数和第二个参数，它定义返回函数的上下文（this）。我们可以通过一个辅助函数非常简单地模仿这个功能，该函数接受相同类型的参数并返回一个函数，当被调用时，使用Function#call执行具有给定上下文和参数的函数。

1. 绑定函数
2. 将函数绑定到
的上下文

例如：

function bind (fn, ctx) {
    return function (...args) {
        fn.call(ctx, ...args);
    };
}

请注意，这与创建绑定函数不完全相同。你可以read about what happens during the creation of a bound function in 9.4.1.3 BoundFunctionCreate in the spec。

Answer 2

1. 函数的上下文取决于它的调用方式，因此为了使速记input[placeholder='Event Date']正常工作，您必须生成div.form-group.event-date > div.input-group > input[placeholder='Event Date']为bind的函数。 }。请注意this的签名：

   Function.bind

   因此，此执行返回绑定到call的函数。在您的特定情况下，它会将.call(thisArg[, arg1[, arg2[, ...]]]) 绑定到Function.bind，以便在您调用CC时，上下文（Components）将为CC()。

2. Per @BenjaminGruenbaum你可以做this