Home

Welcome to the Javascript-binding- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

The Javascript`s bind method should allow a function to get a new context. An example follows:

var emptyContext=
{
	Message: "I am the empty Context"
};

function Filled()
{
	console.log(this);
}

//Outputs the content of the "Window" object
//"Window" is in this case the global context/global object
console.log(Filled());

var FilledContext = Filled.bind(emptyContext);

//Outputs the content of the "emptyContext" object
console.log(FilledContext());

//Outputs the content of the "emptyContext" object
console.log(emptyContext);

📕 After using bind in the listing above, one could think that the bound method Filled should be callable by e.g. emptyContext.Filled(); or emptyContext["Filled"];, but it seems this is not the case.

The method bind could find its usefulness in Higher-order-functions like the Javascript method forEach.

An array of listings shall now follow:

Listing 1 - forEach - providing an optional argument for a receiver

---

var List =
{
  Content: [],
  Insert: function(element)
  {
  	this.Content.push(element);
  }
}

var newContent = [22, 44, 55, 66, 111];

//1.Argument = callback function/method 
//2.Argument = receiver
newContent.forEach(List.Insert, List);

//All "newContent" elements are now found in the "List" object
console.log(List.Content);

Even though forEach offers an optional receiver argument it is important to keep in mind that not all higher-order-functions do. A solution should be presented in the next listing.

---

Listing 2 - forEach - using a wrapper function to access receiver

---

var List =
{
  Content: [],
  Insert: function(element)
  {
  	this.Content.push(element);
  }
}

var newContent = [22, 44, 55, 66, 111];

//has a wrapper function as argument
newContent.forEach(function(element)
{
	List.Insert(element);
});

//All "newContent" elements are now found in the "List" object
console.log(List.Content);

This kind of approach in the second listing seems so common that it is supported by ES5 in the method bind which its use should be shown in the last listing.

---

Listing 3 - forEach - using method bind to avoid an own writen wrapper function

---

var List =
{
  Content: [],
  Insert: function(element)
  {
  	this.Content.push(element);
  }
}

var newContent = [22, 44, 55, 66, 111];

//Uses the "bind" method to define a receiver
newContent.forEach(List.Insert.bind(List));

//All "newContent" elements are now found in the "List" object
console.log(List.Content);

The List object`s method Insert is bound to the object List, but the receiver object does not have to be List.

---

Content

The user interaction part could look like the content as seen below by starting "index.html" in a web browser and interacting with its features.

• Clicking on a puzzle field will activate a stamp with a number on that field

• 🅱️ utton "GO" checks if the stamps on the puzzle fields are set correctly

• 🅱️ utton "RESET" resets all made stamps, so the player could beginn from start

• When the puzzle fields are marked correctly the result will be shown in the web browser

To use the project just download the files and execute "index.html". Note that all files(folders "wiki_images" and "PaintNET" excluded) should be placed in the same folder so that the functionality of the code is guaranteed.

The "PaintNet" folder contains .pdn files which can be opened and altered with PaintNET for simple picture editing.