Maintain the functionality of an object even when it is created using the "bind" method

Question

Maintain the functionality of an object even when it is created using the "bind" method

I'm working with a function that has the following structure:


var tempFun = function() {
    return 'something';
}
tempFun.priority = 100;

My goal is to store this function in an array and bind another object to it simultaneously, like so:


var funArray = [];
var newObj = {};

funArray.push( tempFun.bind(newObj) );

After this process, I want to access the function's property as follows:


funArray[0].priority

However, when I try to do this, it returns undefined. Is there a way to retain the property of the function while binding a new object to it?

javascript function bind

Answer 1

Answer №1

No, however it is possible to create a custom function for this purpose;

Function.prototype.bindAndCopy = function () {
    var ret = this.bind.apply(this, arguments);

    for (var x in this) {
        if (this.hasOwnProperty(x)) {
            ret[x] = this[x];
        }
    }

    return ret;
};

... which can be utilized as follows;

var funArray = [];
var newObj = {};

funArray.push( tempFun.bindAndCopy(newObj) );

Answer 2

No, however it is possible to create a custom function for this purpose;

Function.prototype.bindAndCopy = function () {
    var ret = this.bind.apply(this, arguments);

    for (var x in this) {
        if (this.hasOwnProperty(x)) {
            ret[x] = this[x];
        }
    }

    return ret;
};

... which can be utilized as follows;

var funArray = [];
var newObj = {};

funArray.push( tempFun.bindAndCopy(newObj) );

Answer 3

Answer №2

When you use the bind method in JavaScript, it returns a new function that encapsulates the original one. In order to make sure all properties are maintained, you must manually copy them to the new function:

var boundFunction = originalFunction.bind(newObject);
boundFunction.priority = originalFunction.priority;

arrayOfFunctions.push(boundFunction);

To synchronize the properties between the two functions, you can define a getter and setter for each property like so:

Object.defineProperty(boundFunction, 'priority', {
  get: function() { return originalFunction.priority; },
  set: function(val) { originalFunction.priority = val; }
});

Answer 4

When you use the bind method in JavaScript, it returns a new function that encapsulates the original one. In order to make sure all properties are maintained, you must manually copy them to the new function:

var boundFunction = originalFunction.bind(newObject);
boundFunction.priority = originalFunction.priority;

arrayOfFunctions.push(boundFunction);

To synchronize the properties between the two functions, you can define a getter and setter for each property like so:

Object.defineProperty(boundFunction, 'priority', {
  get: function() { return originalFunction.priority; },
  set: function(val) { originalFunction.priority = val; }
});

Answer 5

Answer №3

Quoting MDN:

When the bind() method is used, it creates a brand new function that will have its this keyword set to the specified value. Additionally, any arguments provided will come before the ones passed when calling the new function.

Due to this behavior, using .bind() may not be the most effective approach for your current goal. Instead of resorting to jQuery mappers or restructuring your code to utilize .prototype, one potential solution could involve the following:

var obj = {};
for (var i in tempFun) {
    if (tempFun.hasOwnProperty(i)) obj[i] = tempFun[i];
}

Answer 6

Quoting MDN:

When the bind() method is used, it creates a brand new function that will have its this keyword set to the specified value. Additionally, any arguments provided will come before the ones passed when calling the new function.

Due to this behavior, using .bind() may not be the most effective approach for your current goal. Instead of resorting to jQuery mappers or restructuring your code to utilize .prototype, one potential solution could involve the following:

var obj = {};
for (var i in tempFun) {
    if (tempFun.hasOwnProperty(i)) obj[i] = tempFun[i];
}

Maintain the functionality of an object even when it is created using the "bind" method

Answer №1

Answer №2

Answer №3

Similar questions

How can I utilize the LED flash on a Windows Phone using WinJS?

Tips for embedding the <img> element inside the <a> element

Responsive Bar Chart using jQuery Mobile and ChartJS that appears on the screen only after resizing

Implementing jQuery getScript in a Ruby on Rails 3 application

Struggling to get the Ant design button to launch an external link in a new tab using React and NextJS

The gradual disappearance and reappearance of a table row

Ways to activate an event based on the dimensions (width/height) of

A useful Javascript function to wrap a string in <mark> tags within an HTML document

Do not use unnecessary variables for storing references in ES6

NextJS build problem causing all content to become static

What is the best way to save characters from different languages into variables?

The Express application appears to be unresponsive, but the data has been successfully saved to the MongoDB database. An error with the

Having trouble with React Testing Library throwing an error every time I try to use fireEvent on an input text?

Using Next-Image Relative Paths can lead to 404 errors when being indexed by web crawlers

The VueJS Chosen directive fails to refresh when new options are selected

What is the best way to retrieve variable data from a Node.js function in an external context?

"Challenges encountered when using map function to dynamically fill select dropdowns in React with Material UI

Various successful functions in Ajax

Issue with Jquery's .html() function not functioning properly when trying to select HTML

Chat application using Node.js without the need for Socket.IO