Constructing a binding object does not result in the creation of a valid object

Question

Constructing a binding object does not result in the creation of a valid object

I attempted to bind a constructor object:

"use strict";
    
let Person = function(name){
  this.name = name;
}

let age = {
  age: 128
}

let AgedPerson = Person.bind(age)
console.log(new AgedPerson("John"))

Expecting bind to set up a context with this pointing to an object and new to initialize and return it, I anticipated the output to be:

{
  age: 128,
  name: "John"
}

However, the output was:

{
  name: "John"
}

Why does the age field disappear after creating the object?

javascript

Answer 1

Answer №1

By utilizing the new keyword before a function, it ensures that the function is invoked with a fresh empty object assigned to the this value, even if .bind() was previously applied (essentially disregarding any prior this setting).

In cases where your function does not have a return statement and the new keyword is used, the default behavior is for the function to return the updated this value after execution. In this scenario of calling AgedPerson, the this context is initialized as an empty object {} due to the presence of new. As the function progresses, the name property is added to this object and ultimately returned implicitly, resulting in {name: "John"}.

The use of .bind() becomes relevant when the function is called through other methods like (), or with .call() and .apply(), but not applicable when employing new. For example:

"use strict";

const person = function(name) {
  this.name = name;
}

const age = { age: 128 };

const agedPerson = person.bind(age)
agedPerson("John"); // modifies the age object by reference
console.log(age); // { age: 128, name: "John" }

Answer 2

By utilizing the new keyword before a function, it ensures that the function is invoked with a fresh empty object assigned to the this value, even if .bind() was previously applied (essentially disregarding any prior this setting).

In cases where your function does not have a return statement and the new keyword is used, the default behavior is for the function to return the updated this value after execution. In this scenario of calling AgedPerson, the this context is initialized as an empty object {} due to the presence of new. As the function progresses, the name property is added to this object and ultimately returned implicitly, resulting in {name: "John"}.

The use of .bind() becomes relevant when the function is called through other methods like (), or with .call() and .apply(), but not applicable when employing new. For example:

"use strict";

const person = function(name) {
  this.name = name;
}

const age = { age: 128 };

const agedPerson = person.bind(age)
agedPerson("John"); // modifies the age object by reference
console.log(age); // { age: 128, name: "John" }

Answer 3

Answer №2

Keep in mind that when following Nick Parsons' advice, simply invoking a constructor on an object does not transform the object into a genuine instance of Person. To rectify this, you should establish its prototype.

In addition, utilizing Function::call() allows you to meld the binding and invocation processes into a single step.

"use strict";

const Person = function(name) {
  this.name = name;
}

const age = { age: 128 };

Person.call(age, 'John');
Object.setPrototypeOf(age, Person.prototype);

console.log('age is Person:', age instanceof Person);
console.log(age); // { age: 128, name: "John" }

Answer 4

Keep in mind that when following Nick Parsons' advice, simply invoking a constructor on an object does not transform the object into a genuine instance of Person. To rectify this, you should establish its prototype.

In addition, utilizing Function::call() allows you to meld the binding and invocation processes into a single step.

"use strict";

const Person = function(name) {
  this.name = name;
}

const age = { age: 128 };

Person.call(age, 'John');
Object.setPrototypeOf(age, Person.prototype);

console.log('age is Person:', age instanceof Person);
console.log(age); // { age: 128, name: "John" }

Constructing a binding object does not result in the creation of a valid object

Answer №1

Answer №2

Similar questions

What is the proper way to retrieve a function from an angular module?

Choosing a specific option from a list of multiple choices with javascript

Pass a data variable to an HTML file using express's sendfile function (quick inquiry)

What is the best method to retrieve the current time in minutes using the Timer component?

Error: JQuery's on() function is not defined

Navigating using TypeScript with React Navigation

The JavaScript functionality is not functioning properly within the webView that has been loaded from the

Having trouble executing an npm script - getting an error message that reads "Error: spawn node_modules/webpack/bin/webpack.js EACCES"

Is there a way to prompt the native browser message for HTML5 form validation on a custom element?

Connecting to Travel Events in a Page

Stop the inheritance of CSS and JavaScript in ASCX files

Guide on utilizing automatic intellisense in a standard TextArea within a web application

What is the method to generate a list where every item is a list within AngularJS?

What are the best strategies for addressing security risks in Axios versions 1.0.0 to 1.5.1 and those greater than or equal to 1.3.2?

Guide to filtering out cookies using express-winston

Accessing Array of Objects Transferred via AJAX in JSP

Display the total combined hours of all events for each day in FullCalendar

Launching a personalized Mailchimp form

How can I save a value in JavaScript once the page has finished loading?

Affixing a navigation bar to the top while scrolling