Skip to content

Function bind()

Why function.bind ?

Bind() is supported natively by most of the browsers nowadays. You may use it in the recent versions of Chrome, Firefox, Opera, Safari and 9th version and up of Internet Explorer.

When the function bind () method is called, the key generates a new function that is set to the specified value. When a new function is called, it is set to the value given with any given parameter or sequence of arguments.

Syntax:

function.bind(thisArr[, arr1[, arr2[, …]]])

thisArr : When the boundary function is called, this is the value that will replace the target function as a parameter. If the restriction in this function was created using the new operator, the value is ignored.
arr1, arr2 …. : arguments to be prepared when calling a function.


Let’s understand the logic with a small example.

        let user = {
            username: "alex",
            password: 123456,
            controlName : function(){
                return this.username;
            },
            controlPassword: function () {
                return this.password;
            }
        }

        let getUsername = user.controlName;
        let x = getUsername.bind(user);
        console.log("username: " + x());

        let getPassword = user.controlPassword;
        let y = getPassword.bind(user);
        console.log("password: " + y());

username: alex
password: 123456

or;


  let user = {
            controlName: function () {
                return this.username;
            },
            controlPassword: function () {
                return this.password;
            }
        }

        let info = {
            username: "alex",
            password: 123456,
        }

        let getUsername = user.controlName;
        let x = getUsername.bind(info);
        console.log("username: " + x());

        let getPassword = user.controlPassword;
        let y = getPassword.bind(info);
        console.log("password: " + y());

username: alex
password: 123456


JavaScript Function Bind() Examples

Example 1

    number = 10;
    let block = {
        num: 100,
        getNum: function () { 
            return this.num;
        }
    }

    getNum = block.getNum;
    let numPrint = getNum.bind(block);
    console.log( numPrint() )

output:

100


Example 2

        let print= function(num){
            console.log(this[num]);
        }

        let object = {
            x: 20,
            y: 30
        };

        object.log = print.bind(object);

        object.log("x");
        object.log("y");

output:

20
30


Example 3

        cars = ["bmw","audi","toyota"]

        function carType() {
            for (let i = 0; i < cars.length; i++) {
                console.log(this.cars[i])
            }        
        }

        let print = carType.bind();
        print();

output:

bmw
audi
toyota


Polyfill

if (!Function.prototype.bind) (function(){
  var ArrayPrototypeSlice = Array.prototype.slice;
  Function.prototype.bind = function(otherThis) {
    var thatFunc = this, thatArg = arguments[0];
    var args = ArrayPrototypeSlice.call(arguments, 1);
    var argLen = args.length;
    if (typeof thatFunc !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - ' +
             'what is trying to be bound is not callable');
    }
    return function(){
      args.length = argLen;
      args.push.apply(args, arguments);
      return thatFunc.apply(thatArg, args);
    };
  };
})();

partially function.bind () to run:

if (!Function.prototype.bind) (function(){
  var ArrayPrototypeSlice = Array.prototype.slice;
  Function.prototype.bind = function(otherThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var baseArgs= ArrayPrototypeSlice .call(arguments, 1),
        baseArgsLength = baseArgs.length,
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          baseArgs.length = baseArgsLength; // reset to default base arguments
          baseArgs.push.apply(baseArgs, arguments);
          return fToBind.apply(
                 fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
          );
        };

    if (this.prototype) {
      // Function.prototype doesn't have a prototype property
      fNOP.prototype = this.prototype; 
    }
    fBound.prototype = new fNOP();

    return fBound;
  };
})();

Browser Support

Chrome7
Edgeyes
Firefox4
Internet Explorer9
Opera11.6
Safari5.1
Android webview4
Chrome for Android18
Edge mobileyes
Firefox for Android4
Opera Android11.5

2 Comments »

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: