Javascript Under The Hood~ Object Oriented Javascript ~

Tran Duc ThangFramgia Vietnam - Business Strategy Office - Human Development Section

1

“Javascript is the World's Most Misunderstood

Programming Language!” ~ Douglas Crockford ~

2

Too much to remember, too weird to understand?

first-class functions

lexical scope

function scopeclosure

IIFE

prototypefunction statement

function expressionhoisting

this

function constructornew

block scope

3

Agenda

01 Review‣ IIFE, Scope, Closure ‣ this keyword binding

020304Function Constructor

new Keyword

Prototype‣ Object dunder proto ‣ Function Prototype

Object Oriented Javascript‣ Inheritance ‣ Encapsulation

44

Review• https://viblo.asia/thangtd90/posts/WApGx3P3M06y• First-class functions• Function Statement vs Function Expression• IIFE• Hoisting• Scope• Closure• this keyword binding

5

Javascript Object• Everything which is not primitive is object.

• Javascript variables only holds the reference to the object.

6

Javascript ObjectCreating a new object

• Object literal

• Function Constructor

• Object.create() function

7

Function Constructor• A Constructor is just a function which is

called with the new keyword• A function call with new keyword in front

of it is a constructor call• Constructor function should start with a

capital letter (just a convention)• Some Javascript’s Built-in constructors:

Object, Array, Number, Boolean, String,

RegExp, Function, Error, Math, Date …8

Function Constructor

9

Prototype

object

propertiesPrototype

Prototype

Prototype

PrototypeChain

10

Prototype• [[Prototype]]

- Internal link to object’s prototype

• __proto__ (dunder proto) - External link to object’s prototype.

- Supported in most modern browsers, but is not a standard until ES6.

- From ES6, Object.getPrototypeOf() should be used instead.

• prototype (property of a function)

11

Prototype• Function in Javascript has a property

named prototype

• Objects which are created by the function constructor will have the [[Prototype]] refers to the function’s prototype object

12

Prototypefunction’s prototype object has a property named constructor, which points to the function itself by default

13

Prototypefunction’s prototype is a object, so it has its own [[Prototype]]

14

PrototypeOverwrite a property in prototype

15

PrototypeProperty in prototype is danger and not recommended

16

PrototypeObject.prototype is the final destination of the prototype chain

17

Prototype

Function.__proto__ vs Function.prototype

Object.__proto__ vs Object.prototype

18

19

instanceof vs typeofThe instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor.

20

instanceof vs typeof

The typeof operator returns a string indicating the type of the unevaluated operand

21

Object.create()The Object.create() method creates a new object with

the specified prototype object and properties

22

Object.create() vs new

23

Object.create() vs new

Object.create(Foo.prototype) new Foo

1. Create new empty object2. object.__proto__ = Foo.prototype3. return object

1. Create new empty object 2. object.__proto__ = Foo.prototype3. result = Foo.call(object)4. if result is an object, return it, else

return object

new Foo is Object.create(Foo.prototype) with additionally running the constructor function

24

Object.create() vs new

25

new keyworda trick to instantiate an object without repeating new keyword

26

Object Oriented Javascript• Javascript is a Prototype-based Object Oriented

Programming language• Javascript has Object, which can contain its own

properties and methods

• Javascript does not have the ‘real’ class (like almost other OOP languages), but it has Function

Constructor to create objects. (actually, Javascript use Object to instantiate Object)

27

Object Oriented Javascript

• Class-based OOP Languages: The instantiated object copies the behaviours from the class

• Javascript: The instantiated object has a link to the prototype of the constructor function

28

Object Oriented Javascript

• In Javascript, we can implement inheritance by assigning an instance of the parent Function to the child Function’s prototype.

• The child function constructor does not have a copy of parent constructor, but has a link to its parent constructor

• The child can overwrite properties and methods from parents (can even modify them)

29

Object Oriented JavascriptSimulating Encapsulation in Javascript

30

Object Oriented JavascriptSimulating Encapsulation in Javascript

31

References

‣ You don’t know JS (https://github.com/getify/You-Dont-Know-JS)

‣ Speaking JS (http://speakingjs.com/)

‣ Exploring ES6 (http://exploringjs.com/es6/)

‣ http://www.2ality.com/ JavaScript and more

‣ Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/JavaScript)

‣ Douglas Crockford’s Javascript (http://javascript.crockford.com/)

32

Thank you for listening!

Q&A

For any discussion, you can refer this post on Viblo https://viblo.asia/thangtd90/posts/ogBG2lJrRxnL

33