Function call, apply and bind

Native functions

***************************************************************
*************************** CALL ******************************
***************************************************************

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 1 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

// We use `call` to stabilize the value of `this` (as this can be a window object or a caller object)

function hafeez(param1, param2) {
    console.log(this);
}

console.log(hafeez.name); // hafeez, because in javascript function is also an object and name is `one` of its predefined properties

hafeez.age = 16; // as we know function is also an object so we can set another property `age`;

console.log(hafeez.age); // 16

hafeez.call(); // it just calls the function. its as same as calling `hafeez()`

hafeez.call(7); // 7

console.log('******************************************************');

var hafeez = {
    checkThis: function() {
        function fullName() {
            // this -> window
            console.log(this); // hafeez - because we are passing object `hafeez` from 'fullName.call(this)' method
        }

        // this -> hafeez
        fullName.call(this);
    }
}

hafeez.checkThis();

console.log('******************************************************');

function a(b, c, d) {
    console.log(this);
    console.log(b);
    console.log(c);
    console.log(d);
}

a.call(4, 5, 6, 7); // passing params

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 2 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var person = {
	fullname:'Hafeez Syed',
	age: 35
}

var greeting = function() {
	console.log('Happy Birthday, ' + this.fullname + '. You are ' + this.age + ' years old today')
}

greeting.call(person);

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 3 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var fullName = 'Adam Guy';
var likes = 'eating';
var what = 'cookies';

function Person() {
    this.fullName = 'Hafeez Syed';
    this.likes = 'playing';
    this.what = 'cricket';

    this.display = function() {
        console.log(this.fullName + ' likes ' + this.likes + ' ' + this.what);
    };
}

var person = new Person();
person.display(); // Hafeez Syed likes playing cricket -> (this = Person) because `this` is construtor function `Person` 

var display = person.display;

display(); // Adam Guy likes eating cookies -> (this = global Object) because `display` has been declared globally so it has a
// global scope therefore `this` has become `global` now.

display.call(person); // Hafeez Syed likes playing cricket

***************************************************************
*************************** APPLY *****************************
***************************************************************

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 1 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

function a(b, c, d) {
    console.log(this); // 4
    console.log(b); // 5
    console.log(c); // 6
    console.log(d); // 7
}

a.apply(4, [5, 6, 7]);

console.log('**************************************');

function add() {
    console.log('Arguments length: ', arguments.length); // 3
    console.log('Argument 1: ', arguments[0]); // 5
    console.log('Argument 2: ', arguments[1]); // 6
}

add.apply(4, [5, 6, 7], 8);
console.log('\n');

function subtract() {
    console.log('Arguments length: ', arguments.length); // 2
    console.log('Argument 1: ', arguments[0]); // [5, 6, 7]
    console.log('Argument 2: ', arguments[1]); // 8
}

subtract.call(4, [5, 6, 7], 8);

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 2 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var companies = ['Magsnet', '360Training', 'VSL', 'Furphy Media', 'News Corp', 'Unico']

var appreciate = function(comp1, comp2, comp3, comp4, comp5, comp6) {
	console.log('Hey, ' + this.fullname + '. Its great to see you have worked for ' + comp1 + ', ' + comp2 + ', ' + comp3 + ', ' + comp4 + ', ' + comp5 + ', ' + comp6);
}

appreciate.apply(person, companies);

***************************************************************
*************************** BIND ******************************
***************************************************************

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 1 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var male = {
    age: 26,
    firstName: 'Hafeez',
    lastName: 'Syed'
};

var female = {
    age: 16,
    firstName: 'Jade',
    lastName: 'Allan'
};

var child = {
    age: 4,
    firstName: 'Andy',
    lastName: 'Penn'
}

var checkUnLockedBind = function() {
    // `this` here depends up on the object passed to the `bind` function 
    console.log('Hello ' + this.firstName + ' ' + this.lastName + '!. Congratulations on your ' + this.age + 'th birthday'); 
};

mFunc = checkUnLockedBind.bind(male);
mFunc();

fFunc = checkUnLockedBind.bind(female);
fFunc();

console.log('**************************************');

var checkLockedBind = function() {
    // `this` here depends up on the object passed to the `bind` function only when the `checkUnLockedBind` function was created.
    //  After `bind` is locked to the object, any futher binding afterwards will not work.
    console.log('Hello ' + this.firstName + ' ' + this.lastName + '!. Congratulations on your ' + this.age + 'th birthday'); 
}.bind(child);

aFunc = checkLockedBind.bind(male);
aFunc();

bFunc = checkLockedBind.bind(female);
bFunc();

console.log('**************************************');

// to stablize the value `this` inside the `checkThisAgain` function
// we will 
var hafeez = {
    checkThis: function() {
        console.log(this); // hafeez {}

        var checkThisAgain = function() {
            console.log(this);
        }.bind(this); // binding object `hafeez {}` to the function `checkThisAgain` to stablize the value `this` so
        // it will avoid `window` object

        checkThisAgain();
    }
 };
 
 hafeez.checkThis();

<<<<<<<<<<<<<<<<<<<<<<<<<<<<< 2 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

var itemPrice = {
	computer: 1500,
	workstation: 500
}

var gst = function() {
	var gst = 0.1;
	console.log('Price of Computer (inc. GST) is $' + parseInt(this.computer + (this.computer * gst), 10) + ', Price of workstation (inc. GST) is $' + parseInt(this.workstation + (this.workstation * 0.1), 10) )  
}

var total = gst.bind(itemPrice);