confusing bind. how to bind an object to another?

Question

in this code,

var person = {
  first: 'person',
  last: 'sdfsd',
  full: function fullName() {return this.first +  ' ' + this.last;}
}

var john = {
    first:  'person',
    last : 'sdfsd'
}

how do I bind john to person such that something like

var Name = john.bind(person)

can call:

Name.full();

tried couple of things and getting: this.full is not a function OR Name.full is not a function;

I also want to understand whether bind can be used on objects like above or the object has to be a function object to use bind upon?

UPDATE

When I do this:

var person = {
  first: 'person',
  last: 'sdfsd',
  full: function fullName() {console.log(this.first +  ' ' + this.last);}
}

var john = {
    first:  'john',
    last : 'sdfsd',
  fl: function() {return this.full();}
}

var Name = person.full.bind(john);

Name();

I get

john sdfsd

So I infer:

• bind works only on functions. Is that correct?
• I thought that if I bind like var Name = john.fl.bind(person); then this would be, upon calling Name();, person and call console.log(person.first + ' ' + person.last); but instead I had to swap the 2 to get the right output. Could someone tell me what gets bound to what? in x.bind(y)??

---

UPDATE 2 A little bit of .bind function that Ive understood:

If I create something like this:

var jane = function (first, last) {
  if (first) {this.first = first;}
  if (last) {this.last = last;}
  return this.full();
}

And bind it to person fellow above:

var janeName = jane.bind(person);
janeName();

I get:

person sdfsd

in the console. However, the root of my problem was to get the first and last vars defined in Jane, if I would optionally:

janeName.call(jane, 'jane', 'austen');

this returns:

jane austen

Correct me if I am wrong. How this works is janeName is as usual, jane, but the this is bound to Person. BUT, calling with .call janeName is jane bound to person with optional args provided, here actually jane calls itself, with optional args provided, but in turn is bound to person as well, when looking up for .full function.

Answer 1

Simple:

john.full = person.full;
var name = john.full();

The bind way would look like this:

var name = person.full.call(john);  // call the full() function using john as context

var getName = person.full.bind(john);  // create a function to get the full name from john
var name = getName();

Answer 2

To set this to a variable that you can reference when you change context.

To Know More Detail bout Bind:

Click Here

So it must be

Here we set our john context to the Person. based on this it return the Context of John

 var person = {
      first: 'tatdsfds',
      last: 'sdfsd',
      full: function fullName() {
         document.write("content: "+this.first +  " " + this.last);
        return this.first +  ' ' + this.last;}
    }
    
    var john = {
        first:  'John',
        last : 'Mr'
    }
    
    var Name = person.full.bind(john); //set our john context to the Person
    
    Name();

Answer 3

Here's how I understood bind a little more clearly. Instead of thinking it in terms of class based method call .bind() , thinking in terms of dynamically scoped, in terms of this, and where this would bind to which function to produce what output:

var person = {
  first: 'person',
  last: 'sdfsd',
  full: function fullName() {console.log(this.first +  ' ' + this.last);}
}

var john = {
    first:  'john',
    last : 'sdfsd',
  fl: function() {return this.full();}
}

If I want john's output of first and last:

john sdfsd

the function that does that here is in Person, called full ;

If I bind full function to john, this refer's to john.

var Name = person.full.bind(john);

Name();

Similarly,

if I want person's output

john.fl.call(person);

I will have to bind john.fl to be called by person. Here,

this.full(); in john.fl is called by person => person.full()