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

Unable to locate the variable named StyleSheet

Undefined is returned after resolving - React - JavaScript API

Stripping the prefix from a string using the .split function leads to an error message stating "Unexpected

What is the best way to define file paths in a webpage to ensure that the same file works seamlessly on both server and

Setting up multiple base tags in AngularJS for different modules

Tap on the HTML5 video to exit the fullscreen mode

Uncovering the Mystery: Extracting a Video Thumbnail from Brightcove Videos

Is it possible to generate a PNG blob using binary data stored in a typed array?

What is the best way to make a JSONP request using jQuery?

Struggling to Implement Middleware on Router in ExpressJS?

Translate CSS into JavaScript while maintaining selector understanding

provide a hyperlink to the icon located in front of the navigation bar

Tips for incorporating ajax to load a new webpage into a specific div container

Retrieving JSON information using JavaScript

Troubleshooting: The Google Analytics Universal Event Tracking Code is not functioning as

dynamic jquery checkbox limit

When does the ng-disable function become activated?

What is the best way to execute multiple Protractor test suites simultaneously?

What is the best way to set the page title on a server-rendered component when using the Next.js app router?

Attempting to transmit checkbox data in jade