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

Chrome	7
Edge	yes
Firefox	4
Internet Explorer	9
Opera	11.6
Safari	5.1
Android webview	4
Chrome for Android	18
Edge mobile	yes
Firefox for Android	4
Opera Android	11.5