Programming bind in js

Question

I have decided to recreate Function.prototype.bind as binding in order to exercise. Woefully, I have encountered some problems and can't understand the reason of undefined output. Here is my code:

var alex = {
  firstname: "alex",
  surname: "surname",
}
let nameyourself = function() {
  console.log(`${this.firstname} ${this.surname}`);
}


Function.prototype.binding = function(smth, ...params) {
  smth.__proto__.bindedfunct = this;

  return smth.bindedfunct;

}
nameyourself.binding(alex)();

Why is this happening?

You just end up calling (nameyourself)(), which resets this to undefined and alex isn't being passed to anything. — deceze
– deceze ♦, Commented Apr 30, 2020 at 15:11
A proper implementation does not need to fiddle around with smth.__proto__.bindedfunct = this; — Peter Seliger
– Peter Seliger, Commented Apr 30, 2020 at 15:15
smth is alex. You assign nameyouyself to a property on alex.__proto__. You then return that which you assigned. For all intents and purposes, binding just does return this with the side effect of adding a property to alex' __proto__. That doesn't "bind" anything. — deceze
– deceze ♦, Commented Apr 30, 2020 at 15:18

Moritz Roessler · Accepted Answer · 2020-04-30 15:17:27Z

3

Your function binding doesn't do what you expect. You're just returning the function you pass it.

In order to achieve a similar functionality as bind you need to use Function.prototype.call/apply to call the function with a thisBinding.

Here's a sample implementation using .apply;

var alex={
    name:"alex",
    surname:"surname",
}
let nameyourself = function(){
   console.log(`${this.name} ${this.surname}`);
}

Function.prototype.binding = function (thisBinding, ...args) {
    return (..._args) => {
        this.apply(thisBinding, [...args, ..._args]);
    }
}

nameyourself.binding(alex)()

answered Apr 30, 2020 at 15:17

Moritz Roessler

8,67329 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Peter Seliger · Accepted Answer · 2020-04-30 16:16:17Z

A more detailed explanation is given beneath the example code.

const alex = {
  firstname: "Alex",
  surname: "Surname",
}

function nameYourself(...args) {
  console.log(`${this.firstname} ${this.surname}`);
  console.log('args : ', args);
}

Function.prototype.binding = function(target, ...boundArgs) {

  // the function to be bound.
  const boundFunction = this;

  // the binding wrapper-function.
  return function (...args) {
  
    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
    boundFunction.apply(target, [...boundArgs, ...args])
  }
}

nameYourself.binding(alex, 'Hello')(alex.firstname, alex.surname);

.as-console-wrapper { max-height: 100%!important; top: 0; }

Since the custom bind functionality binding should be implemented via Function.prototype it will be called itself as a method of every function object. Thus, a binding's this context will be a function.

The latter then shall be executed within a custom this context. For the OP's example this context is intended to be the target object alex.

In order to achieve the OP's task the binding implementation needs to return a wrapper function that inside its function body does delegate the bound function to the target object via a functions apply method.

Collectives™ on Stack Overflow

Programming bind in js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related