(public).sospep.subjects ~ view article ~ 000-OOP-in-JS

<h1 style="text-align: center;">js - OOP</h1>
<h2>[WHAT]</h2>
<ol>
<li><strong>JavaScript - has support for OO programming - working with OOP methodologies in js.</strong></li>
<ol>
<li>[] javascript is a multi paradigm programming language and one of the programming paradigms it has support for is Object Oriented Programming or OOP.&nbsp;</li>
<li>[] everything in js is an object,&nbsp;the js language uses a prototypal inheritance model VS a classical inheritance model, although that hasn't stopped many from trying to emulate the classical inheritance model</li>
</ol>
<li><strong>[] js - everything is an object </strong></li>
<ol>
<li>[] including js native primitive types,&nbsp;<span style="text-decoration: underline;">LANGUAGE&nbsp;objects</span>,&nbsp;<span style="text-decoration: underline;">BROWSER objects</span>, <span style="text-decoration: underline;">DOM objects</span>, and your OWN objects</li>
</ol>
<li><strong>[] js - every&nbsp;object can have/does have</strong></li>
<ol>
<li>] properties -</li>
<li>] methods -</li>
<li>] events -</li>
<li>] constructors -</li>
</ol>
<li><strong>[] js - and inheiritance</strong></li>
<ol>
<li>] inheritance refers to reusing another objects props/methods by inheirting from that object,</li>
<li>] for example you may define a 'person' object, then inherit from that person object to create more specific types of person objects&nbsp;like a lawyer:person, doctor:person, ...</li>
<li>] there are no classes in js, js has no type system</li>
<li>] <a href="/view/article?id=2652" target="_blank">prototypal inheritance</a> -</li>
<li>] <a href="/view/article?id=2744" target="_blank">classical inheritance</a> -</li>
<li>] prototypal inheritance VS classical inheritance - pro's + cons of each method</li>
</ol>
<li><strong>] js - and polymorphism</strong></li>
<ol>
<li>] poly what you say? - poly morph ism - refers to changing the behaviour of an object by inheiriting a different interface</li>
<li>] EXAMPLE- a dog, a penguin and a duck may all inheirit from the animal object. the Animal object could&nbsp;define a "speak"interface, each of the individual objects could use&nbsp;the speak&nbsp;interface to define its own implementation of</li>
<li>] defining the&nbsp;speak interface on the parent object - &nbsp;</li>
<li>] implementing the speak interface on the child objects -&nbsp; dog (barks), duck(quacks), penguin(???)</li>
</ol>
<li><strong>] js objects -&nbsp;have no classes, no data types, everything is an object</strong></li>
<ol>
<li>vs c# - an object is an instance of a class, the class defines the objects properties and methods,</li>
</ol>
<li><strong>] js objects - consist simply of name/value pairs , js objects are dictionaries with string keys</strong></li>
<ol>
<li>{'person', id:3, nameFull:'donS'}</li>
<li>the above&nbsp;statement&nbsp;is&nbsp;a valid js object, the name of the object is person, the person object has 2 properties called id and nameFull, the current value of the id property is 3 and the current value of the nameFull property is donS&nbsp;</li>
</ol>
<li><strong>js objects&nbsp;&nbsp;- creating, </strong></li>
<ol>
<li><strong>] (id=697) <a title="697" href="/view/article?id=1679" target="_blank">object - literal</a> </strong></li>
<ol>
<li>var myObject = {id:"don"}</li>
</ol>
<li><strong>] (id=698) <a href="/view/article?id=1680" target="_blank">object -&nbsp;json</a>&nbsp;&nbsp;&nbsp;&nbsp;- </strong></li>
<ol>
<li>var myObject = {"id:":"don", "birthday:":"1999-01-29"&nbsp;}</li>
</ol>
<li><strong>] (id=699) <a href="/view/article?id=1681" target="_blank">object - constructor function () </a>- </strong></li>
<ol>
<li>function Person(name,birthday){this.id=name, this.birthday=birthday}</li>
<li>var myObject = new Person('don','2013-01-01')</li>
</ol>
<li><strong>] (id=703) object -prototype - adding properties and methods to your/a objects</strong></li>
<ol>
<li>date - ART adding properties of (monthName, ISO_8601) to the native Date object</li>
</ol></ol>
<li><strong>] js is a&nbsp;functional programming&nbsp;language like scheme/lisp, </strong><ol>
<li>] functions are first class citizens,</li>
<li>] function is really an object with executable code associated with it.</li>
<li>] create function 1 literally, ] create function 2&nbsp;define var, ] create function 3 using Function constructor&nbsp;</li>
<li>] using the Function constructor, the body of the function is just a String parameter to the Function constructor. ] That means you can construct arbitrary functions at run time.</li>
<li>] you can set or add properties to a function, just like you would to any other js objects</li>
<li>] As objects, functions can also be assigned to variables, passed as arguments to other functions, returned as the values of other functions, stored as properties of objects or elements of arrays, and so on</li>
<li>] Every function object has a method named call, which calls the function as a method of the first argument. That is, whichever object we pass into call as its first argument will become the value of "this" in the function invocation. This will be a useful technique for calling the base class constructor, as we&rsquo;ll see later.</li>
<ol>
<li>person.prototype.quote = "my quote is ..";</li>
<li>function displayQuote()</li>
<li>displayQuote.call(myperson);</li>
</ol></ol></li>
</ol>
<h2>[WHY]</h2>
<ol>
<li><strong>] cc OOP principles</strong></li>
<ol>
<li>] encapsulation - properties and methods of objects, modelling real world object properties/methods</li>
<li>] inheiritance - reuse of existing objects,interfaces by</li>
<li>] polymorphism - different behaviours for the same methods by implementing interface</li>
<li>] abstraction - &nbsp;private/public,</li>
</ol>
<li><strong>] ajax ui layer for sospep -</strong></li>
<ol>
<li>] single element updates VS entire page updates</li>
</ol></ol>
<h2>[WHERE]</h2>
<ol>
<li>] everywhere - 1 step at a time -</li>
</ol>
<h2>[WHEN]</h2>
<ol>
<li>]</li>
</ol>
<h2>[EXAMPLE]</h2>
<ol>
<li>]</li>
</ol>
<h2>[HOW-TO]</h2>
<ol>
<li>]</li>
</ol>
<h2>[REFERENCE]</h2>
<ol>
<li>] <a href="/view/article?id=1678" target="_blank">OOP in JS</a>&nbsp;(this) - an overview of the</li>
<li>] <a href="/view/chapters?id=184" target="_blank">OOP</a>&nbsp; -</li>
<li>] <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript</a>&nbsp;</li>
<li>]<span class="crayon-sy"> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects" target="_blank">https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects</a></span></li>
<li>] my art Date - has example of adding Properties to EXISTING native objects using the prototype property -</li>
<li>] <a href="http://msdn.microsoft.com/en-ca/magazine/cc163419.aspx">http://msdn.microsoft.com/en-ca/magazine/cc163419.aspx</a>&nbsp;</li>
<li><span class="crayon-sy">] <a href="http://javascriptissexy.com/javascript-objects-in-detail/" target="_blank">http://javascriptissexy.com/javascript-objects-in-detail/</a></span></li>
<li><span class="crayon-sy">] <a href="http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/" target="_blank">http://javascriptissexy.com/javascript-prototype-in-plain-detailed-language/</a></span></li>
<li><span class="crayon-sy">] <a href="http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/" target="_blank">http://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/</a>&nbsp;</span></li>
</ol><hr />
<h1 style="text-align: center;">developer implementation</h1>
<h2 style="text-align: left;">[.process]</h2>
<ol>
<li>
<div style="text-align: left;"><strong>] solid pattern knowledge and </strong></div>
</li>
<ol>
<li>
<div style="text-align: left;">] patterns= ] singleton, ] factory ] observer, ] iterator ,</div>
</li>
<li>
<div style="text-align: left;">] <a href="http://javascriptpatterns.org/">http://javascriptpatterns.org/</a>&nbsp;</div>
</li>
</ol>
<li>
<div style="text-align: left;"><strong>] architectural principles</strong></div>
</li>
<ol>
<li>
<div style="text-align: left;">] Test Driven Development</div>
</li>
<li>
<div style="text-align: left;">] write test first ,</div>
</li>
<li>
<div style="text-align: left;">] mock&nbsp;</div>
</li>
<li>
<div style="text-align: left;">] assert</div>
</li>
<li>
<div style="text-align: left;">] stubs return values</div>
</li>
<li>
<div style="text-align: left;">] mocks&nbsp;check messages</div>
</li>
</ol>
<li>
<div style="text-align: left;">] yui vs jq&nbsp;- uml diagram of &nbsp;</div>
</li>
<ol>
<li>
<div style="text-align: left;">] <a href="http://dsheiko.com/weblog/yui3-vs-jquery">http://dsheiko.com/weblog/yui3-vs-jquery</a></div>
</li>
</ol></ol>
<h2 style="text-align: left;">[.notes]</h2>
<ol>
<li>
<div style="text-align: left;">&nbsp;</div>
</li>
</ol>
<h2 style="text-align: left;">[.by_date]</h2>
<ol>
<li>
<div style="text-align: left;">]</div>
</li>
</ol><hr />
<h1 style="text-align: center;">status</h1>
<h2 style="text-align: left;">[===current===]</h2>
<ol>
<li>
<div style="text-align: left;">&nbsp;]</div>
</li>
</ol>
<h2 style="text-align: left;">[===next===]</h2>
<ol>
<li>
<div style="text-align: left;">]</div>
</li>
</ol>
<p style="text-align: left;">&nbsp;</p>
<hr />
<p>PolyMorphism - one behaviour/set of behaviours defined in an "interface", different object types all inherit/implement the same interface, each object type has its own implementation of the defined behaviours/methods in the "interface"</p>
<p>- IF = drive start(), stop(), forward(), reverse(), accelerate(),</p>
<p>- car <br />- motorcycle<br />- truck</p>
<p>- the ability to create a variable, a function, or an object that has more than one form.</p>
<p>- The purpose of polymorphism is to implement a style of programming called message-passing - in which objects of various types define a common interface of operations for users.</p>
<p>- In strongly typed languages, polymorphism usually means that type A somehow derives from type B, or type C implements an interface that represents type B. In weakly typed languages types are implicitly polymorphic.</p>
<p>&nbsp;</p>
<hr />
<h1 style="text-align: center;">edits 2019-12-04</h1>
<ol style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
<li><strong>] js - is a OO programming language - working with OOP methodologies in js.</strong></li>
<ol>
<li>] js is an oo programming language, everything in js is an object,&nbsp;the js language uses a prototypal inheritance model VS a classical inheritance model, although that hasn't stopped many from trying to emulate the classical inheritance model</li>
</ol></ol>
<p>&nbsp;</p>
<ol style="color: #000000; font-family: Verdana,Arial,Helvetica,sans-serif; font-size: 10px; font-style: normal; font-variant: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; -webkit-text-stroke-width: 0px; white-space: normal; word-spacing: 0px;">
<li><strong>[understanding how js works - under the hood]</strong></li>
<ol>
<li>] prototypal inheritance, -</li>
<li>] scope, -</li>
<li>] closures, -&nbsp;</li>
<li>] DOM interactions/browser repaints, -</li>
<li>] garbage collection, -</li>
<li>] compilation, -</li>
<li>] hoisting, -</li>
<li>] etc, etc -</li>
<li>]</li>
</ol></ol>
<p>&nbsp;</p>

~ view article ~ Chapter] ch-003-feature-OOP-in-js FROM [ Book] language-javascript IN [ libraries] technology-developer-www