/*
- Implicit Binding
- Explicit Binding
- new Bindidng
- window Binding
*/
//----------------------------------------------
// where is this function invoked?
//----------------------------------------------
// var sayName = function(name) {
// console.log('Hello, ' + name);
// };
// sayName('Vishnu!');
//----------------------------------------------
// Implicit Binding
// var me = {
// name: 'Vishnu',
// age: 25,
// sayName: function() {
// console.log(this.name);
// }
// }
// me.sayName(); // According to implicit binding, `this` keyword is targetting the element left i.e. on the left side of the dot(.), in this case `me`
//----------------------------------------------
// var sayNameMixin = function(obj) {
// obj.sayName = function() {
// console.log(this.name);
// }
// };
// var me = {
// name: 'Vishnu',
// age: 25
// };
// var you = {
// name: 'unknown',
// age: 21
// };
// sayNameMixin(me);
// sayNameMixin(you);
// me.sayName();
// you.sayName();
//----------------------------------------------
// var Person = function(name, age) {
// return {
// name: name,
// age: age,
// sayName: function() {
// console.log(this.name);
// },
// mother: {
// name: 'Mausi',
// sayName: function() {
// console.log(this.name);
// }
// }
// };
// };
// var jim = Person('Jim', 42);
// jim.sayName();
// jim.mother.sayName();
//----------------------------------------------
//----------------------------------------------
// Explicit Binding
// call, apply, bind
// var rand = {
// name: 'rand',
// age: 65,
// // sayName: function() {
// // console.log('My name is ' + this.name);
// // }
// };
// var sayName = function() {
// console.log('My name is ' + this.name);
// };
// sayName.call(rand);
//----------------------------------------------
// var rand = {
// name: 'rand',
// age: 65,
// // sayName: function() {
// // console.log('My name is ' + this.name);
// // }
// };
// var sayName = function(lang1, lang2, lang3) {
// console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', ' + lang3);
// };
// var languages = ['JS', 'C++', 'Python'];
// sayName.call(rand, languages[0], languages[1],languages[2]);
// // .apply is a similar thing as .call
// sayName.apply(rand, languages); // .apply()
//----------------------------------------------
// var rand = {
// name: 'rand',
// age: 65,
// // sayName: function() {
// // console.log('My name is ' + this.name);
// // }
// };
// var sayName = function(lang1, lang2, lang3) {
// console.log('My name is ' + this.name + ' and I know ' + lang1 + ', ' + lang2 + ', ' + lang3);
// };
// var languages = ['JS', 'C++', 'Python'];
// // sayName.call(rand, languages[0], languages[1],languages[2]);
// // .apply is a similar thing as .call
// // sayName.apply(rand, languages); // .apply()
// var newFn = sayName.bind(rand, languages[0], languages[1],languages[2]);
// console.log('HERE');
// newFn();
//----------------------------------------------
//----------------------------------------------
//----------------------------------------------
//----------------------------------------------
//----------------------------------------------
// new Binding
// var Animal = function(color, name, type) {
// this.color = color;
// this.name = name;
// this.type = type;
// }
// var Zebra = new Animal('black and white', 'Zorro', 'Zebra');
// console.log(Zebra);
//----------------------------------------------
// window Binding
var sayAge = function() {
console.log(this.age);
};
var me = {
age: 25
};
// sayAge.call(me);
sayAge();
window.age = 35;
sayAge();
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter