artofgrittly

grittly

grittly_dev

by grittly

DATA TYPES

JS data type

object
T

F
0
1
1
1
0
0
0
1
1
a

0
b

1
c
d
e

array
f
n
u
l
l
u
n

boolean
d
e
fi
n
s

e
y

d
m
b
o
l

number

string

function

OBJECT

Empty Object Object with js data Object with another

types object

OBJECT ANATOMY

Internal Prototype
Reference

[[Prototype]]

Parent object

prototype property of
Parent (object)

PROTOYPE CHAIN

FUNCTION ANATOMY

"this" context

inactivated function
points to
Function.prototype
INPUT (arguments)

code inside the

function

FUNCTION

OUTPUT
activated function

"THIS"

Method Function Apply(), call(), bind()

"this"
object to which
context
the function is
attached to

function

Window Any object

object to be bound
to "this"

output value
(undefined by
default

Arrow function Constructor

new empty
object {}

constructor
(still just
a function)

Take value of
"this" from Object attached to

outside {} the constructor under

brackets "prototype" key

CLASS

constructor
(still just
a function)

Object attached to
the constructor under
"prototype" key

Function class Object class

constructor Function.prototype Object.prototype constructor

[[Prototype]] [[Prototype]]

PROTOYPE CHAIN PROTOYPE CHAIN {} Object attached

{} Object attached
to the constructor to the constructor
under "prototype" under "prototype"
property property

PROTOTYPE CHAIN

Child class and its

Scenario 3 prototype object

Parent class and its

prototype object

Scenario 2

Scenario 1

N D!ast
U l
FO the th
e
T
NOnull is
e nt
in

lem n
D ! e
ch
ai
UN
Initial
FO D !
object being
UN
FO
{ } object attached
called upon.
to the constructor
Instance of Property being
under "prototype" Since JS keeps looking
Child class looked up
property, with its for [[Prototype]] of

own set of each subsequent object,

[[Prototype]] points properties `null` doesn't have this
to its parent's property so `undefined`
prototype property is returned instead

CREATING A NEW OBJECT

object created by "new" and "this"

passed as "this" into the context

constructor function

constructor

Code inside (still just

constructor function a function)

that attaches
properties to "this"

Object attached to
the constructor under
"prototype" key

CLASS INHERITANCE - GOAL

What final object should look like

Instance Child class Parent class

variables from prototype prototype
Child class
Instance [[Prototype]] [[Prototype]]

variables from
Child class

[[Prototype]]
PROTOYPE CHAIN points to Parent PROTOYPE CHAIN

class' prototype
object
Parent.prototype

Object created
using Child
class

CLASS INHERITANCE - HOW TO

A closer look inside the

object created by "new" and
Child constructor. Here we
passed as "this" into the
call the Parent class'
constructor function
constructor and pass our
new object as "this". This
Code inside the
way the constructor
constructor.
attaches its instance
Colored blocks
variables to our new object
represent instance Instance
variables being variables
added via the added by
Child class Parent class
(orange)
constructor and
the Parent class
(blue) constructor

Child class constructor

Object created using Child Instance

class that contains instance variables
variables from both Child and added by
Parent constructors and Child class
[[Prototype]] points to
Child.prototype object under prototype key of
Chlild constructor. However,
this time the [[Prototype]] is
pointing to Parent.prototype,
thus extending the prototype
chain