Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan...
-
Upload
arron-mckinney -
Category
Documents
-
view
216 -
download
2
Transcript of Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan...
![Page 1: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/1.jpg)
Advanced JSThe World's Most Misunderstood Programming Language) Douglas Crockford(
Shimon Dahan
![Page 2: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/2.jpg)
• Basic JavaScript Overview• Closures• JavaScript Objects Model• Prototype• Inheritance• More OOP Concepts
Agenda
![Page 3: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/3.jpg)
Variables
• Variable names are case-sensitive.• Variables can be implicitly declared• JavaScript is a loosely typed language• Variables types• Variables scope • === VS ==
Basic JavaScript
![Page 4: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/4.jpg)
Functions • functions are objects
• special feature: invokable
• Can pass more argument (or less) that declared• arguments property
• The arguments of a function are maintained in an array-like object
• Functions always return something• this keyword – call & apply
![Page 5: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/5.jpg)
Functions• Functions can be defined inside of other
functions.
![Page 6: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/6.jpg)
• Primitive values• Undefined, Null, Boolean, Number, and String
• Reference values• Array or a user-defined object
• Parameters are always passed by value.• Note that if you pass an object, the address of the
object is passed by value, but changes we make affects the original object.
Reference & Value
![Page 7: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/7.jpg)
• An inner function has access to the variables and parameters of functions that it is contained within.
• The scope that an inner function enjoys continues even after the parent functions have returned
Closure
![Page 8: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/8.jpg)
• What’s an object?• a hash of key => value pairs• if a key (property) happens to be a function, we can call
it a method
• Object literal notation • { Wrapped in curly braces }• ,-delimited properties• key:value pairs
• The scope that an inner function enjoys continues even after the parent functions have returned
JavaScript Objects Model
![Page 9: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/9.jpg)
• Constructors• When invoked with new, functions return an object
known as this• You have a chance of modifying this before it's
returned
JavaScript Objects Model
![Page 10: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/10.jpg)
• A Public Method is a function that uses this to access its object
• This binding of this to an object happens at invocation time
• Use Closure for private fields
Encapsulation
![Page 11: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/11.jpg)
• A property of the Function objects• A prototype is an object from which other
objects inherit properties• The prototype chain
Prototype
![Page 12: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/12.jpg)
Inheritance via the prototype
var Dad = function () { this.family = “Levi"; }; var Kid = function () { }; Kid.prototype = new Dad(); var moti = new Kid();
![Page 13: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/13.jpg)
Class-based (Java)Prototype-based (JavaScript)
Class and instance are distinct entities.All objects are instances.
Define a class with a class definition; instantiate a class with constructor methods.
Define and create a set of objects with constructor functions.
Create a single object with the new operator.Same.
Construct an object hierarchy by using class definitions to define subclasses of existing classes.
Construct an object hierarchy by assigning an object as the prototype associated with a constructor function.
Inherit properties by following the class chain.Inherit properties by following the prototype chain.
Class definition specifies all properties of all instances of a class. Cannot add properties dynamically at run time.
Constructor function or prototype specifies an initial set of properties. Can add or remove properties dynamically to individual objects or to the entire set of objects.
![Page 14: Advanced JS The World's Most Misunderstood Programming Language ) Douglas Crockford( Shimon Dahan sdahan@jbh.co.il.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649d0b5503460f949dee12/html5/thumbnails/14.jpg)
:(תודה