'This'

The

keyword

In JavaScript, the thing called this, is the object that "owns" the JavaScript code.

'this'

The value of this, when used in a function, is the object that "owns" the function.

'this'

The value of this, when used in an object, is the object itself.

'this'

The this keyword in an object constructor does not have a value. It is only a substitute for the new object.

'this'

The value of this will become the new object when the constructor is used to create an object.

'this'

'this' is not a variable. It is a keyword. You cannot change the value of 'this'.

'this'

'this' 4 ways

1. Invoking a Function as a Function

function myFunction(a, b) {
    return a * b;
}
myFunction(10, 2);
// myFunction(10, 2) will return 20



function myFunction(a, b) {
    return a * b;
}
window.myFunction(10, 2);
// window.myFunction(10, 2) will also return 20

'this' 4 ways

1. Invoking a Function as a Function

function myFunction() {
    return this;
}
myFunction();
// Will return the window object

'this' 4 ways

1. Invoking a Function as a Function

function myFunction() {
    "use strict";
    return this;
}
myFunction();
// Will return undefined

'this' 4 ways

2 Invoking a Function as a Method

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this.firstName + " " + this.lastName;
    }
}
myObject.fullName();
// Will return "John Doe"

'this' 4 ways

2 Invoking a Function as a Method

var myObject = {
    firstName:"John",
    lastName: "Doe",
    fullName: function () {
        return this;
    }
}


myObject.fullName();
// Will return [object Object] (the owner object)

'this' 4 ways

4. Invoking a Function with a Function or aRRay prototype Method

1. Function.prototype.apply( thisArg, argArray )
2. Function.prototype.call( thisArg [ , arg1 [ , arg2, ... ] ] )
3. Function.prototype.bind( thisArg [ , arg1 [ , arg2, ... ] ] )
4. Array.prototype.every( callbackfn [ , thisArg ] )
5. Array.prototype.some( callbackfn [ , thisArg ] )
6. Array.prototype.forEach( callbackfn [ , thisArg ] )
7. Array.prototype.map( callbackfn [ , thisArg ] )
8. Array.prototype.filter( callbackfn [ , thisArg ] )

       (9. JavaScript eval() Function)

'this' 4 ways

4. Invoking a Function with a Function or aRRay prototype Method

var add = function (x, y) {
      this.val = x + y;
    },
    obj = {
      val: 0
    };


add.apply(obj, [2, 8]);
console.log(obj.val); 
// 10


add.call(obj, 2, 8);
console.log(obj.val); 
// 10

'this'

Quiz

'this' Quiz

var brand = 'Nissan';
var myCar = {brand: 'Honda'};

var getBrand = function() {
  console.log(this.brand);
};

myCar.getBrand = getBrand;
myCar.getBrand();
// What would be the output here?

getBrand();
// What would be the output here?

'this' Quiz

var brand = 'Nissan';
var myCar = {brand: 'Honda'};

var getBrand = function() {
  console.log(this.brand);
};

myCar.getBrand = getBrand;
myCar.getBrand();
// output: Honda

getBrand();
// output: Nissan

'this' Quiz

var car = {
  brand: "Nissan",
  getBrand: function(){
    console.log(this.brand);
  }
};

var el = document.getElementById("btn");
el.addEventListener("click", car.getBrand);

//What will be loged when "btn" is clicked?

'this' Quiz

var car = {
  brand: "Nissan",
  getBrand: function(){
    console.log(this.brand);
  }
};

var el = document.getElementById("btn");
el.addEventListener("click", car.getBrand);

// log: undefined



// What will work?
el.addEventListener("click", car.getBrand.bind(car));

'this' Quiz

var car = {
  brand: "Nissan",
  getBrand: function(){
    var closure = function(){
      console.log(this.brand);
    };
    return closure();
  }
};

car.getBrand();
// What would be the output here?

'this' Quiz

var car = {
  brand: "Nissan",
  getBrand: function(){
    var closure = function(){
      console.log(this.brand);
    };
    return closure();
  }
};

car.getBrand();
// output: undefined

var car = {
  brand: "Nissan",
  getBrand: function(){
    var closure = function(){
      console.log(this.brand);
    }.bind(this);
    return closure();
  }
};
car.getBrand();
// output: Nissan

var car = {
  brand: "Nissan",
  getBrand: function(){
    var self = this;
    var closure = function(){
      console.log(self.brand);
    };
    return closure();
  }
};

car.getBrand();
// output: Nissan

What will work :

'this' Quiz

function warrior(speed, strength){
  console.log(
    "Warrior: " + this.kind +
    ", weapon: " + this.weapon +
    ", speed: " + speed +
    ", strength: " + strength
  );
}

var warrior1 = {
  kind: "ninja",
  weapon: "shuriken"
};

var warrior2 = {
  kind: "samurai",
  weapon: "katana"
};

warrior.call(warrior1, 9, 5);
warrior.apply(warrior2, [6, 10]);

// Will this work? Why/Why not?

'this' Quiz

function warrior(speed, strength){
  console.log(
    "Warrior: " + this.kind +
    ", weapon: " + this.weapon +
    ", speed: " + speed +
    ", strength: " + strength
  );
}

var warrior1 = {
  kind: "ninja",
  weapon: "shuriken"
};

var warrior2 = {
  kind: "samurai",
  weapon: "katana"
};

warrior.call(warrior1, 9, 5);
warrior.apply(warrior2, [6, 10]);

// Yes it works. By using .call() or .apply you use
// the warrior function within the context of the 
// warrior1 and warrior2 objects.