Object Orientation JS Flashcards
// What does the below code print out?
console.log(this);The default value for this is the global object
The Global Object (window in a browser)
// What does the below code print out?
"use strict";
(function (){
console.log(this);
})();In use strict mode the default value of this is undefined
// What does the below code print out?
"use strict";
var animal = {
kind: "Cow"
which: function () {
console.log(this.kind);
}
};
animal.which();Cow
Yes, “this” in this situation points to the animal object itself
// What does the below code print out?
"use strict";
var animal = {
kind: "Cow"
which: function () {
console.log(this.kind);
}
};
var animalFunc = animal.which;
animalFunc();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
// What does the below code print out?
"use strict";
function sayHello(last_name) {
console.log("Hello " + this + " " + last_name);
}
sayHello("Hussain");In strict mode this defaults to undefined
Hello undefined Hussian
// What does the below code print out?
"use strict";
function sayHello(last_name) {
console.log("Hello " + this + " " + last_name);
}
sayHello.call("Asim","Hussain");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
// What does the below code print out?
"use strict";
function sayHello(last_name) {
console.log("Hello " + this + " " + last_name);
}
sayHello.apply("Asim",["Hussain"]);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
// What does the below code print out?
"use strict";
function sayHello(last_name) {
console.log("Hello " + this + " " + last_name);
}.bind("Asim");
sayHello("Hussain");Uncaught syntaxErro: unexpected Token
bind can only be used on functions after they have been created and assigned to a variable
// What does the below code print out?
"use strict";
var sayHello = function(last_name) {
console.log("Hello " + this + " " + last_name);
}.bind("Asim");
sayHello("Hussain");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
// What does the below code print out?
var device = {
kind:"music player"
};
var product = Object.create(device);
console.log(product.kind);music player
Javascript searches up the prototype chain to find the kind property on the device object.
How do you mimic a class in JS
Functional Constructor
// 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;
};
output: uncaught typeError: cannot set property ‘first_name’ undefined
this is global window object
// 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;
};
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");
Add function to this sudo class
function person(first_name, last_name) {
this.first_name = first_name;
this.last_name = last_name;
};
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;
};
};Add function to this sudo class using prototype
function person(first_name, last_name) {
this.first_name = first_name;
this.last_name = last_name;
};
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;
};
Advantage to using the prototype method
saves on memory
multiple instances all share the same prototype
Disadvantage to using the sudo internal class function
Adding the same full name function will repeat it for every time an instance is created. Bloat up the application
Advantage of using the sudo internal class function
private member variable
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
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;
};
};
the keyword class which version of JS
ES6
What does call in a function call Person.call(dude,”adam”,”Cadieux”)
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
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;
};
function Professional(title,first_name,last_name) {
person.call(this,first_name,last_name); //call the base
this.title = title;
}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;
}
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;
};
Create Person Object Prototype OO
with return full_name function
var Person = {
full_name: function() {
return this.first_name + ' ' + this.last_name;
}
}Prototype OO call Person Object
var adam = Object.create(Person);
Prototype OO
Add first_name and last_name to Person Object
call
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; } }
Prototype OO
create adam person and initialize with first and last name
var adam = Object.create(Person);
adam.init("adam","cadieux");Prototype OO
create adam person and initialize with first and last name without calling the init function (long way)
Can remove init for function
var adam = Object.create(Person,
{
first_name: {
value: 'adam'
},
last_name: {
value:'cadieux'
}
)};
Prototype OO
create adam person and initialize with first and last name Factory
function PersonFactory(first_name, last_name) {
var person = Object.create(Person);
person.first_name = first_name:
person.last_name = last_name;
return person;
}Prototype OO call person factory
var adam =PersonFactory(“adam”,”cadieux”);
// 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");var product = new Device(“music player”);
// 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();Music Player
// 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();Music Player
The printKind function is a closure, it refers to the kind argument passed into the function constructor (and not this.kind).
// 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();Music Player
Javascript looks for the printKind function and finds it on the prototype of the product object.
// 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);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’}
