call(), apply(), bind(), new(),
Wed Mar 23 2022 18:14:19 GMT+0000 (Coordinated Universal Time)
Saved by @atkumarvishnu #javascript
/* - 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();
Practice for call(), apply(), bind(), new(),
Comments