Object Orientation JS

Question 1

// What does the below code print out?
    console.log(this);

Answer 1

The default value for this is the global object

The Global Object (window in a browser)

Question 2

// What does the below code print out?
    "use strict";
    (function (){
      console.log(this);
    })();

Answer 2

In use strict mode the default value of this is undefined

Question 3

// What does the below code print out?
    "use strict";
    var animal = {
      kind: "Cow"
      which: function () {
        console.log(this.kind);
      }
    };
    animal.which();

Answer 3

Cow

Yes, “this” in this situation points to the animal object itself

Question 4

// What does the below code print out?
    "use strict";
    var animal = {
      kind: "Cow"
      which: function () {
        console.log(this.kind);
      }
    };
    var animalFunc = animal.which;
    animalFunc();

Answer 4

It throws an error

Because we are in use strict mode and not calling the function directly from the animal object, this is now undefined

Question 5

// What does the below code print out?
    "use strict";
    function sayHello(last_name) {
      console.log("Hello " + this + " " + last_name);
    }
    sayHello("Hussain");

Answer 5

In strict mode this defaults to undefined

Hello undefined Hussian

Question 6

// What does the below code print out?
    "use strict";
    function sayHello(last_name) {
      console.log("Hello " + this + " " + last_name);
    }
    sayHello.call("Asim","Hussain");

Answer 6

Hello Asim Hussian

The first param to call is used as the this variable and the second and onwards are the params to the function being called

Question 7

// What does the below code print out?
    "use strict";
    function sayHello(last_name) {
      console.log("Hello " + this + " " + last_name);
    }
    sayHello.apply("Asim",["Hussain"]);

Answer 7

Hello Asim Hussian

The first param to the apply function is used as the “this” variable, the array is then used for each of the params to the function being called

Question 8

// What does the below code print out?
    "use strict";
    function sayHello(last_name) {
      console.log("Hello " + this + " " + last_name);
    }.bind("Asim");
    sayHello("Hussain");

Answer 8

Uncaught syntaxErro: unexpected Token

bind can only be used on functions after they have been created and assigned to a variable

Question 9

// What does the below code print out?
    "use strict";
    var sayHello = function(last_name) {
      console.log("Hello " + this + " " + last_name);
    }.bind("Asim");
    sayHello("Hussain");

Answer 9

Hello Asim Hussian

bind can be used on function expressions to fix the value of this regardless of how the function is called later on

Question 10

// What does the below code print out?
var device = {
  kind:"music player"
};
var product = Object.create(device);
console.log(product.kind);

Answer 10

music player

Javascript searches up the prototype chain to find the kind property on the device object.

Question 11

How do you mimic a class in JS

Answer 11

Functional Constructor

Question 12

// what is the output..

“use strict”;

var dude = person(‘adam’,’c’);

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

Answer 12

output: uncaught typeError: cannot set property ‘first_name’ undefined

this is global window object

Question 13

// what is the output..

“use strict”;

var dude = new person(‘adam’,’c’);

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

Answer 13

No errors

The ‘new’ keyword create a new object so doesn’t use the global window object

Similar to call function

var dude = {};
person.call(dude, "adam","cadieux");

Question 14

Add function to this sudo class

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

Answer 14

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
   this.full_name = function() {
         return this.first_name + ' ' + this.last_name;
   };
};

Question 15

Add function to this sudo class using prototype

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

Answer 15

notice .prototype

person.prototype.full_name_prototype = function() {
return this.first_name + ‘ ‘ + this.last_name;
};

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

Question 16

Advantage to using the prototype method

Answer 16

saves on memory

multiple instances all share the same prototype

Question 17

Disadvantage to using the sudo internal class function

Answer 17

Adding the same full name function will repeat it for every time an instance is created. Bloat up the application

Question 18

Advantage of using the sudo internal class function

Answer 18

private member variable

Question 19

How to set the first name so it is always the same

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

Only in:
sudo  internal class function

Answer 19

use closure

// remove this in function, it will get set in closure

function person(first_name, last_name) {

this. first_name = first_name;
this. last_name = last_name;

this.full_name = function() {
return first_name + ‘ ‘ + this.last_name;
};
};

Question 20

the keyword class which version of JS

Answer 20

ES6

Question 21

What does call in a function call Person.call(dude,”adam”,”Cadieux”)

Answer 21

Every function has a function called ‘call’ which calls the function (what that function will use as this) . Has to be first item in function call

Question 22

create function Professional using person

function person(first_name, last_name) {
   this.first_name = first_name;
   this.last_name = last_name;
};

person.prototype.full_name_prototype = function() {
return this.first_name + ‘ ‘ + this.last_name;
};

Answer 22

function Professional(title,first_name,last_name) {
   person.call(this,first_name,last_name); //call the base 
   this.title = title;
}

Question 23

add new function to Professional to get full name and title. (inheritance)

function Professional(title,first_name,last_name) {
   person.call(this,first_name,last_name); //call the base 
   this.title = title;
}

Answer 23

Professional.prototype = Object.create(Person.prototype);

creates a link from Professional prototype to Person prototype

Professional.prototype.professional_name = function() {
return this.title + ‘ ‘ + this.first_name + ‘ ‘ + this.last_name;
};

Question 24

Create Person Object Prototype OO

with return full_name function

Answer 24

var Person = {
    full_name: function() {
  return  this.first_name + ' ' + this.last_name;
   }
}

Question 25

Prototype OO call Person Object

Answer 25

var adam = Object.create(Person);

Question 26

Prototype OO

Add first_name and last_name to Person Object

call

Answer 26

var Person = {

init: function (first_name, last_name) {
this.first_name = first_name;
this.last_name = last_name;
return this;
};

full_name: function() {
   return  this.first_name + ' ' + this.last_name;    } }

Question 27

Prototype OO

create adam person and initialize with first and last name

Answer 27

var adam = Object.create(Person);
adam.init("adam","cadieux");

Question 28

Prototype OO

create adam person and initialize with first and last name without calling the init function (long way)

Answer 28

Can remove init for function

var adam = Object.create(Person, 
  {
   first_name: {
      value: 'adam'  
      },
  last_name: {
       value:'cadieux'
   }
  )};

Question 29

Prototype OO

create adam person and initialize with first and last name Factory

Answer 29

function PersonFactory(first_name, last_name) {
   var person = Object.create(Person);
   person.first_name = first_name:
    person.last_name = last_name;
    return person;
}

Question 30

Prototype OO call person factory

Answer 30

var adam =PersonFactory(“adam”,”cadieux”);

Question 31

// How would you create an instance of this pseudo-class using the constructor pattern?
    function Device(kind) {
      this.kind =  kind;
    }
    var product = new Device("music player");
    var product = Device("music player");
    var product = Device.call("music player");

Answer 31

var product = new Device(“music player”);

Question 32

// What would the below code print out?
    function Device(kind) {
      this.kind =  kind;
      this.printKind = function () {
        console.log(this.kind)
      }
    }
    var product = new Device("music player");
    product.printKind();

Answer 32

Music Player

Question 33

// What would the below code print out?
    function Device(kind) {
      this.kind =  kind;
      this.printKind = function () {
        console.log(kind)
      }
    }
    var product = new Device("music player");
    product.kind = "radio";
    product.printKind();

Answer 33

Music Player

The printKind function is a closure, it refers to the kind argument passed into the function constructor (and not this.kind).

Question 34

// What would the below code print out?
    function Device(kind) {
      this.kind =  kind;
    }
    Device.prototype.printKind = function () {
      console.log(this.kind);
    };
    var product = new Device("music player");
    product.printKind();

Answer 34

Music Player

Javascript looks for the printKind function and finds it on the prototype of the product object.

Question 35

// What does the below code print out?
    var Device = {
      kind:"Music Player"
    };
    var AppleProduct = Object.create(Device
     {
      name: "iPod"
    });
    var purchase = Object.create(AppleProduct);
    console.log(purchase.name);

Answer 35

Uncaught TypeErrorL

The second param to the Object.create function is an object literal that described the properties we want to create on the object. So the value should be something like {name: { value: ‘iPod’ }} and not {name:’iPod’}