Bind() method in javascript

 Bind is a function that helps you create another function that you can execute later with the new context of this that is provided.


The bind function creates a copy of a function with a new value to the this present inside the calling function.

Here is the syntax for the bind function:

func.bind(thisObj, arg1, arg2, ..., argN);

Where,

  • func is a function that needs to be invoked with a different this object
  • thisObj is an object or a value that needs to be replaced with the this keyword present inside the function func
  • arg1, arg2…argN – you can pass 1 argument to the calling function or more than that, similar to the call function.

The bind function then returns a new function that consists of a new context to the this variable present inside the calling function:

func(arg1, arg2);

Now this function func can be executed later with the arguments.

Example:-

var pokemon = {

    firstname: 'Pika',

    lastname: 'Chu ',

    getPokeName: function() {

        var fullname = this.firstname + ' ' + this.lastname;

      console.log(fullname) ;

    }

};

var output=pokemon.getPokeName;

output(); //undefined undefined

// undefined because in a recent javascript version the window object has property called name which has a value equal to empty string ""


// we want this point to pokeman object not to window object 

//we can apply bind method to point object pokemon inplace of window

var output=pokemon.getPokeName.bind(pokemon);

output(); // Pika Chu 

example

const person = {

  firstName:"John",

  lastName: "Doe",

  fullName: function () {

console.log(this.firstName + " " + this.lastName);

  }

}


const member = {

  firstName:"Hege",

  lastName: "Nilsen",

}

person.fullName.call(member);//Hege Nilsen


var output=person.fullName;

output(); //undefined undefined

// i want  it point to person object in place of global object

var output2=person.fullName.bind(person);

output2();//John Doe


let output3=person.fullName.bind(member);

output3();//Hege Nilsen


example

var person={

    name:"john",

    ask:function()

    {

        console.log(this);

    }

}

new(person.ask.bind(person)) ();  // ask {}

// it point to person object

// bind create a new function var person={

    name:"john",

    ask:function()

    {

        console.log(this);

    }

}

new(person.ask.bind(person)) ();  // ask {}

// it point to person object 

// new object used to crteate object var person={

    name:"john",

    ask:function()

    {

        console.log(this);

    }

}

new(person.ask.bind(person)) ();  // ask {}

// it point to person object 

// new object used to crteate object

// bind create a new function

// after that you call it 

// then you get output ,point to person object

// bind create a new function ; using the new ‘keyword’.






explain through Html ,Css,Javascript


<!DOCTYPE html>

<html>

<body>


<h1>JavaScript Function bind()</h1>


<p>This example creates 2 objects (person and member).</p>

<p>The member object borrows the fullname method from person:</p> 


<p id="demo"></p>


<script>

const person = {

  firstName:"John",

  lastName: "Doe",

  fullName: function() {

    return this.firstName + " " + this.lastName;

  }

}


const member = {

  firstName:"Hege",

  lastName: "Nilsen",

}


let fullName = person.fullName.bind(member);


document.getElementById("demo").innerHTML = fullName();

</script>


</body>

</html>

//output 

//This example creates 2 objects (person and member).

The member object borrows the fullname method from person:

Hege Nilsen


Comments

Post a Comment

Popular posts from this blog

Two Sum II - Input Array Is Sorted

 Given a 1-indexed array of integers numbers that is already sorted in non-decreasing order , find two numbers such that they add up to a specific target number. Let these two numbers be numbers[index1] and numbers[index2] where 1 <= index1 < index2 <= numbers.length. Return the indices of the two numbers, index1 and index2, added by one as an integer array [index1, index2] of length 2. The tests are generated such that there is exactly one solution. You may not use the same element twice. Your solution must use only constant extra space .   Example 1: Input: numbers = [2,7,11,15], target = 9 Output: [1,2] Explanation: The sum of 2 and 7 is 9. Therefore, index1 = 1, index2 = 2. We return [1, 2]. Example 2: Input: numbers = [2,3,4], target = 6 Output: [1,3] Explanation: The sum of 2 and 4 is 6. Therefore index1 = 1, index2 = 3. We return [1, 3]. Example 3: Input: numbers = [-1,0], target = -1 Output: [1,2] Explanation: The sum of -1 and 0 is -1. Therefore index1 = 1,...
Read more

Comparable Vs. Comparator in Java

  In Java , Comparable and Comparator both are interfaces used to sort objects. Comparable It defines  natural ordering  within a class. It is implemented  inside  the class being sorted. It uses the compareTo() method. It allows sorting  by one one . Comparable provides a  single sorting sequence . In other words, we can sort the collection on the basis of a single element such as id, name, and price. Comparable  affects the original class , i.e., the actual class is modified. Comparable is present in  java.lang  package. We can sort the list elements of Comparable type by  Collections.sort(List)  method. Only one compareTo() method can be implemented, restricting flexibility. Comparator It defines  custom sorting logic It is implemented  in a separate class  or using lambda expressions . It uses the compare() method. It allows sorting  by multiple criteria . The Comparator provides  multiple sorting...
Read more

Increasing Triplet Subsequence

 Given an integer array nums, return true if there exists a triple of indices (i, j, k) such that i < j < k and nums[i] < nums[j] < nums[k]. If no such indices exists, return false.   Example 1: Input: nums = [1,2,3,4,5] Output: true Explanation: Any triplet where i < j < k is valid. Example 2: Input: nums = [5,4,3,2,1] Output: false Explanation: No triplet exists. Example 3: Input: nums = [2,1,5,0,4,6] Output: true Explanation: The triplet (3, 4, 5) is valid because nums[3] == 0 < nums[4] == 4 < nums[5] == 6. Brute Force : Failed for some testcase class Solution {     public boolean increasingTriplet ( int [] nums ) {         int n = nums . length ;         int i = 0 ;         int j =i+ 1 ;         int k =j+ 1 ;         while (i <n && j<n && k<n)         {         if (nums...
Read more