Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Javascript UnderThe Hood
~ Object Oriented Javascript ~
Tran Duc Thang
FramgiaVietnam - Business Strategy Office - Human De...
“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 scope
closure
IIFE
prototype
fu...
Agenda
01
Review
‣ IIFE, Scope, Closure
‣ this keyword binding
02
03
04Function Constructor
new Keyword
Prototype
‣ Object...
Review
• https://viblo.asia/thangtd90/posts/WApGx3P3M06y
• First-class functions
• Function Statement vs Function Expressi...
Javascript Object
• Everything which is not primitive is object.
• Javascript variables only holds the reference to
the ob...
Javascript Object
Creating 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 ke...
Function Constructor
9
Prototype
object
propertiesPrototype
Prototype
Prototype
Prototype
Chain
10
Prototype
• [[Prototype]]
- Internal link to object’s prototype
• __proto__ (dunder proto)
- External link to object’s pro...
Prototype
• Function in Javascript has a property
named prototype
• Objects which are created by the function
constructor ...
Prototype
function’s prototype object has a property
named constructor, which points to the
function itself by default
13
Prototype
function’s prototype is a object, so it has its
own [[Prototype]]
14
Prototype
Overwrite a property in prototype
15
Prototype
Property in prototype is danger and not recommended
16
Prototype
Object.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 typeof
The instanceof operator tests whether an object has in its
prototype chain the prototype property of ...
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 object
2. object.__proto__ = Foo.prototype...
Object.create() vs new
25
new keyword
a 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,...
Object Oriented Javascript
• Class-based OOP Languages:The instantiated object
copies the behaviours from the class
• Java...
Object Oriented Javascript
• In Javascript, we can implement inheritance by
assigning an instance of the parent Function t...
Object Oriented Javascript
Simulating Encapsulation in Javascript
30
Object Oriented Javascript
Simulating Encapsulation in Javascript
31
References
‣ You don’t know JS (https://github.com/getify/You-Dont-
Know-JS)
‣ Speaking JS (http://speakingjs.com/)
‣ Expl...
Thank you for listening!
Q&A
For any discussion, you can refer this post on Viblo
https://viblo.asia/thangtd90/posts/ogBG2...
Upcoming SlideShare
Loading in …5
×

Javascript under the hood 2

2,615 views

Published on

Javascript Under The Hood 2 ~ Object Oriented Javascript ~
Demystifying Javascript's function constructor, new keyword, prototype.
Object Oriented fundamental in Javascript

Published in: Technology
  • Be the first to comment

Javascript under the hood 2

  1. 1. Javascript UnderThe Hood ~ Object Oriented Javascript ~ Tran Duc Thang FramgiaVietnam - Business Strategy Office - Human Development Section 1
  2. 2. “Javascript is the World's Most Misunderstood Programming Language!” ~ Douglas Crockford ~ 2
  3. 3. Too much to remember, too weird to understand? first-class functions lexical scope function scope closure IIFE prototype function statement function expression hoisting this function constructor new block scope 3
  4. 4. Agenda 01 Review ‣ IIFE, Scope, Closure ‣ this keyword binding 02 03 04Function Constructor new Keyword Prototype ‣ Object dunder proto ‣ Function Prototype Object Oriented Javascript ‣ Inheritance ‣ Encapsulation 44
  5. 5. Review • https://viblo.asia/thangtd90/posts/WApGx3P3M06y • First-class functions • Function Statement vs Function Expression • IIFE • Hoisting • Scope • Closure • this keyword binding 5
  6. 6. Javascript Object • Everything which is not primitive is object. • Javascript variables only holds the reference to the object. 6
  7. 7. Javascript Object Creating a new object • Object literal • Function Constructor • Object.create() function 7
  8. 8. 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
  9. 9. Function Constructor 9
  10. 10. Prototype object propertiesPrototype Prototype Prototype Prototype Chain 10
  11. 11. 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
  12. 12. 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
  13. 13. Prototype function’s prototype object has a property named constructor, which points to the function itself by default 13
  14. 14. Prototype function’s prototype is a object, so it has its own [[Prototype]] 14
  15. 15. Prototype Overwrite a property in prototype 15
  16. 16. Prototype Property in prototype is danger and not recommended 16
  17. 17. Prototype Object.prototype is the final destination of the prototype chain 17
  18. 18. Prototype Function.__proto__ vs Function.prototype Object.__proto__ vs Object.prototype 18
  19. 19. 19
  20. 20. instanceof vs typeof The instanceof operator tests whether an object has in its prototype chain the prototype property of a constructor. 20
  21. 21. instanceof vs typeof The typeof operator returns a string indicating the type of the unevaluated operand 21
  22. 22. Object.create() The Object.create() method creates a new object with the specified prototype object and properties 22
  23. 23. Object.create() vs new 23
  24. 24. Object.create() vs new Object.create(Foo.prototype) new Foo 1. Create new empty object 2. object.__proto__ = Foo.prototype 3. return object 1. Create new empty object 2. object.__proto__ = Foo.prototype 3. 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
  25. 25. Object.create() vs new 25
  26. 26. new keyword a trick to instantiate an object without repeating new keyword 26
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. Object Oriented Javascript Simulating Encapsulation in Javascript 30
  31. 31. Object Oriented Javascript Simulating Encapsulation in Javascript 31
  32. 32. 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
  33. 33. Thank you for listening! Q&A For any discussion, you can refer this post on Viblo https://viblo.asia/thangtd90/posts/ogBG2lJrRxnL 33

×