Phuong Nguyen Phuong Nguyen - 1 month ago 5x
Javascript Question

What does "" mean?

I need your help. I got stuck with these code lines

var bind =;
bind(CC, Components);

I try to understand what they are and how they work but I cannot :-(

  1. Could someone help to explain clearly how they works? As I
    understand, "" will invoke a function which is
    bind to it via bind(). And "Function.bind" will return a function
    which is called by "". Also not sure how "bind(CC,
    Components)" works. Looks like Components will be bind to CC. Please
    correct me if I am wrong.

  2. In case I don't want to use Function constructor like that, what should I do to re-write the code above in another way but still keeps the same workflow/logic?

Thank you for your help.


1. What is Function#bind and standalone bind function?


A call to Function#bind creates a new function that is eternally bound to the context passed as the first argument. Function#bind operates as a method on a function. That is, you can only bind the function that Function#bind is invoked on.

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 is only different to Function#bind in that it executes the given function with a context and any other arguments given.

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


Passing a function by reference loses its context

When we pass a function by reference we lose its context. In this case, it means we cannot simply do var bind = Function.bind and call bind as a standalone function.

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


Creating a standalone function bind

The code that you shared creates a shorthand (standalone) function that is equivalent to Function#bind but accepts the function to bind as its first argument and the context to bind that function to as its second, rather than invoking the bind method as a member of the function that is being bound (e.g. fn.bind(ctx)).

// Create standalone `bind` function
let bind =;

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


2. How to achieve this functionality without Function#bind?

The above solution accepts a function and a second argument that defines the returned function's context (this). We can imitate this functionality quite simply with a helper function that accepts the same type of arguments and returns a function that when invoked executes the function with the given context and arguments using Function#call.

  1. The function to bind
  2. The context to bind the function to

For example:

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