{"id":10192,"date":"2016-04-08T10:23:59","date_gmt":"2016-04-08T15:23:59","guid":{"rendered":"http:\/\/jianmingli.com\/wp\/?p=10192"},"modified":"2018-01-16T15:58:46","modified_gmt":"2018-01-16T20:58:46","slug":"object-oriented-javascript","status":"publish","type":"post","link":"https:\/\/jianmingli.com\/wp\/?p=10192","title":{"rendered":"Object Oriented JavaScript"},"content":{"rendered":"
\n

Contents<\/h2>\n
    \n\t
  1. \n\t\tIntroduction<\/a>\n\t\t
      \n\t\t\t
    1. \n\t\t\t\tVariables<\/a>\n\t\t\t<\/li>\n\t\t\t
    2. \n\t\t\t\tVariable Scope<\/a>\n\t\t\t<\/li>\n\t\t\t
    3. \n\t\t\t\tPrimitive Data Types<\/a>\n\t\t\t<\/li>\n\t\t\t
    4. \n\t\t\t\tLogical Operators<\/a>\n\t\t\t<\/li>\n\t\t\t
    5. \n\t\t\t\tComparisons<\/a>\n\t\t\t<\/li>\n\t\t\t
    6. \n\t\t\t\tArrays<\/a>\n\t\t\t<\/li>\n\t\t\t
    7. \n\t\t\t\tConditions and Loops<\/a>\n\t\t\t<\/li>\n\t\t\t
    8. \n\t\t\t\tFunctions<\/a>\n\t\t\t\t
        \n\t\t\t\t\t
      1. \n\t\t\t\t\t\tPrivate Functions<\/a>\n\t\t\t\t\t<\/li>\n\t\t\t\t\t
      2. \n\t\t\t\t\t\tPredefined Functions<\/a>\n\t\t\t\t\t<\/li>\n\t\t\t\t<\/ol>\n<\/ol>\n\t\t\t
      3. \n\t\t\t\tObjects<\/a>\n\t\t\t\t
          \n\t\t\t\t\t
        1. \n\t\t\t\t\t\tDefine JavaScript Objects<\/a>\n\t\t\t\t\t\t
            \n\t\t\t\t\t\t\t
          1. \n\t\t\t\t\t\t\t\tUse Object Literal<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
          2. \n\t\t\t\t\t\t\t\tUse Constructor Function to Define Object<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ol>\n\t\t\t\t\t
          3. \n\t\t\t\t\t\tAccess Object Properties<\/a>\n\t\t\t\t\t\t
              \n\t\t\t\t\t\t\t
            1. \n\t\t\t\t\t\t\t\tWith Square Brackets<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
            2. \n\t\t\t\t\t\t\t\tWith Dot Notation<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ol>\n\t\t\t\t\t
            3. \n\t\t\t\t\t\tBuilt-in Objects<\/a>\n\t\t\t\t\t\t
                \n\t\t\t\t\t\t\t
              1. \n\t\t\t\t\t\t\t\tObject<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
              2. \n\t\t\t\t\t\t\t\tArray<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
              3. \n\t\t\t\t\t\t\t\tFunction<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ol>\n<\/ol>\n\t\t\t\t\t
              4. \n\t\t\t\t\t\tInheritance<\/a>\n\t\t\t\t\t\t
                  \n\t\t\t\t\t\t\t
                1. \n\t\t\t\t\t\t\t\tExample<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ol>\n\t\t\t\t\t
                2. \n\t\t\t\t\t\tJavaScript Namespaces<\/a>\n\t\t\t\t\t\t
                    \n\t\t\t\t\t\t\t
                  1. \n\t\t\t\t\t\t\t\tOverview<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
                  2. \n\t\t\t\t\t\t\t\tCreate Namespace<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
                  3. \n\t\t\t\t\t\t\t\tSub-namespace<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
                  4. \n\t\t\t\t\t\t\t\tUsage<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ol>\n\t\t\t\t\t
                  5. \n\t\t\t\t\t\tJavaScript Modules<\/a>\n\t\t\t\t\t\t
                      \n\t\t\t\t\t\t\t
                    1. \n\t\t\t\t\t\t\t\tSimple Module<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t
                    2. \n\t\t\t\t\t\t\t\tHide\/Publish Module<\/a>\n\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ol>\n\t\t\t\t\t
                    3. \n\t\t\t\t\t\tReferences<\/a>\n\t\t\t\t\t<\/li>\n<\/ol>\n<\/ol>\n<\/div>\n
                       <\/div>\n

                      Introduction<\/h2><\/span>\n

                      * JavaScript uses class-less, prototype-oriented, or instance-based programming.
                      \n* JavaScript is case sensitive.<\/p>\n

                      Variables<\/h3><\/span>\n

                      * Examples:<\/p>\n

                      \r\n\/\/ Declare variable\r\nvar v1;\r\nvar V2 = 1;\r\nvar v3, v4 = 'Hello', V5;\r\n<\/pre>\n
                      Variable Scope<\/h3><\/span>\n
                      * JavaScript variables are defined in function scope<\/em>, Not <\/strong>block scope:
                      \n– variable defined within a function (called a local variable) is not<\/em> visible outside the function.
                      \n– variable defined in code blocks such as if <\/em>or for <\/em>blocks, it is<\/em> visible outside the block.
                      \n* variables defined outside any function are called global variables<\/em> (limit global variables to avoid naming collisions).
                      \n* variables declared without var <\/em>is automatically assigned a global scope (avoid this!).
                      \n* Variable hoisting:<\/p>\n
                      \r\nvar v1 = 123;\r\nfunction f() {\r\n  alert(v1); \/\/ Undefined since v1 points to local v1.\r\n  var v1 = 1;\r\n  alert(v1);\r\n};\r\n<\/pre>\n
                      is hoisted to:<\/p>\n
                      \r\nvar v1 = 123;\r\nfunction f() {\r\n  var v1; \/\/ All local variables are hoisted to top of the function\r\n  alert(v1);\r\n  v1 = 1;\r\n  alert(v1);\r\n};\r\n<\/pre>\n
                      Primitive Data Types<\/h3><\/span>\n
                      – Use typeof <\/em>to find out about variable type
                      \n* Number<\/p>\n
                      \r\n\/\/ Number\r\nvar n1 = 1;\r\nvar n2 = 1.23;\r\nvar n3 = 0123; \/\/ octal\r\nvar n4 = 0xff; \/\/ hex\r\nvar n5 = ce+3; \/\/ exponent\r\nvar n6 = Infinity;\r\nvar n7 = NaN;\r\n<\/pre>\n
                      * String<\/p>\n
                      \r\nvar s1 = 'Hello world!';\r\n<\/pre>\n
                      * Boolean<\/p>\n
                      \r\nvar b1 = true, b2 = false;\r\n\/\/ Following all evaluate to false:\r\nfalse\r\n\"\"\r\nnull\r\nundefiend\r\n0\r\nNaN\r\n<\/pre>\n
                      * Undefined
                      \n* Null<\/p>\n
                      Logical Operators<\/h3><\/span>\n
                      * Not: !
                      \n* And: &&
                      \n* Or: ||<\/p>\n
                      Comparisons<\/h3><\/span>\n
                      * Loose equal: ==
                      \n* Strict equal: ===
                      \n* Not equal: !=
                      \n* Strict not equal: !==
                      \n* Others: <\/p>\n
                      \r\n>\r\n>=\r\n<\r\n<=\r\n<\/pre>\n
                      Arrays<\/h3><\/span>\n
                      * Zero index based.
                      \n* Elements can mix and match, e.g. numbers and strings.<\/p>\n
                      \r\n\/\/ Declare\r\nvar a1 = [];\r\nvar a2 = [1,2,3];\r\nvar a3 = ['array of arrays', a1,a2];\r\n\/\/ Assign element\r\na[0] = 1;\r\na[1] = 'hi';\r\n\r\n\/\/ Delete element\r\ndelete a2[3];\r\n<\/pre>\n
                      Conditions and Loops<\/h3><\/span>\n
                      * if<\/p>\n
                      \r\n\/\/ if\r\nvar level = 9;\r\nvar s1;\r\nif (level > 5) {\r\n  s1 = 'hi';\r\n}else if (level >9){\r\n  s2 = 'hi yo';\r\n}else{\r\n  s3 = 'I'm not worthy!';\r\n}\r\n<\/pre>\n
                      * switch<\/p>\n
                      \r\nvar v1 = '1', s1 = '';\r\nswitch (v1) {\r\ncase 1:\r\n  s1 = 'One';\r\n  break;\r\ncase 2:\r\n  s1 = 'Two';\r\n  break;\r\ndefault:\r\n  s1 = 'Not sure';\r\n  break;\r\n}\r\n<\/pre>\n
                      * Loops<\/p>\n
                      \r\n\/\/ while\r\nvar i = 0;\r\nwhile (i < 10) {\r\n  i++;\r\n}\r\n\r\n\/\/ do while\r\ni = 0;\r\ndo {\r\n  i++;\r\n}while(i < 10);\r\n\r\n\/\/ for\r\nfor (var k = 0; k < 10; k++){\r\n  \/\/ do something\r\n}\r\n\r\n\/\/ for in\r\nvar a1 = ['a', 'b', 'c'];\r\nfor (var l in a1){\r\n  \/\/ do something\r\n}\r\n<\/pre>\n
                      Functions<\/h3><\/span>\n
                      * JavaScript functions always return values.
                      \n- Function returns undefined <\/em>if it does not explicitly returning a value.
                      \n* Functions can be defined as either named functions or anonymous functions:<\/p>\n
                      \r\n\/\/ Named function\r\nfunction f1(){\r\n  alert('Named function. The name is f1');\r\n}\r\nvar v1 = f1(); \/\/ invoked f1\r\n\r\n\/\/ Anonymous function\r\nvar v2 = function (){\r\n  alert('Anonymous function');\r\n}\r\nv2(); \/\/ invoked anonymous function. Note the ()\r\n<\/pre>\n
                      * Functions are invoked with ()<\/em><\/strong>
                      \n* Function arguments are kept in special built-in variable named: arguments<\/em><\/p>\n
                      \r\n\/\/ Implicitly defined special value: arguments\r\nfunction f2() {\r\n  var r = 0;\r\n  for (var i = 0; i < arguments.length; i++) {\r\n    r += arguments[i];\r\n  }\r\n  return r;\r\n}\r\n\r\nvar sum1 = f2(1,2); \/\/ sum1 = 3\r\nalert(sum1);\r\nvar sum2 = f2(1,2,3); \/\/ sum2 = 6\r\nalert(sum2);\r\n<\/pre>\n
                      * JavaScript functions are considered data <\/em>which:
                      \n- contain code
                      \n- can be invoked
                      \n- can be passed as parameters
                      \n- can be returned from other functions
                      \n* Function can be assigned to a variable<\/p>\n
                      \r\n\/\/ Anonymous function assigned to a variable\r\nvar v1 = function (){\r\n  alert('hi');\r\n}\r\n<\/pre>\n
                      * Anonymous function can be:
                      \n- passed as a parameter to another function (as callback function).<\/p>\n
                      \r\n\/\/ Function that take function as parameters\r\nfunction sum1(a, b) {\r\n  return a() + b();\r\n}\r\n\r\n\/\/ Pass anonymous function as parameters\r\nvar p1 =  function(){\r\n    return 1;\r\n};\r\n\r\nvar r1 = sum1(p1,\r\n  \/\/ anonymous function as parameter on the fly\r\n  function(){\r\n    return 2;\r\n  }\r\n); \r\nalert(r1); \/\/ r1 = 3\r\n<\/pre>\n
                      * Anonymous functions are executed right away (as immediate function)<\/p>\n
                      \r\n(function(name){\r\n alert('Hello ' + name); \r\n})('world!');\r\n<\/pre>\n
                      Private Functions<\/h4><\/span>\n
                      * Functions defined within a function are private to the parent function<\/p>\n
                      \r\nfunction outerf(name) {\r\n  function innerf(){\r\n    alert('Hello ' + name + ' from inner function!');\r\n  };\r\n  alert ('Hello ' + name + ' from outer function!');\r\n  innerf();\r\n}\r\n\r\nouterf('world');\r\n<\/pre>\n
                      * Private functions can be used to mimic Java getter\/setter methods:<\/p>\n
                      \r\n        function c1(p) {\r\n            var self = this;\r\n            self.getVal;\r\n            self.setVal;\r\n            (function () {\r\n                var name = p;\r\n\r\n                self.getVal = function () {\r\n                    return name;\r\n                };\r\n\r\n                self.setVal = function (v) {\r\n                    name = v;\r\n                };\r\n            }());\r\n        };\r\n\r\n        var v1 = new c1('hello');\r\n        alert(v1.getVal());\r\n        v1.setVal('world');\r\n        alert(v1.getVal());\r\n<\/pre>\n
                      Predefined Functions<\/h4><\/span>\n
                      * parseInt()<\/em>: string to int<\/p>\n
                      \r\nvar s1 = '123';\r\nvar n1 = parseInt(s1) \/\/ n1 = 123\r\n\r\nvar n2 = parseInt('FF', 16); \/\/ n2 = 255\r\n\r\nvar n3 = parseInt('0377', 8); \/\/ n3 = 255\r\nvar n4 = parseInt('0x377'); \/\/ n4 = 887\r\n<\/pre>\n
                      * parseFloat()<\/em>: string to float<\/p>\n
                      \r\nvar s2 = '1.23';\r\nvar n2 = parseFloat(s2) \/\/ n2 = 1.23\r\n<\/pre>\n
                      * isNaN()<\/em>
                      \n* isFinite()<\/em>
                      \n* encodeURI()<\/em>: encode full URI
                      \n* decodeURI()<\/em>
                      \n* encodeURIcomponent()<\/em>: encode partial URI
                      \n* decodeURIComponent()<\/em><\/p>\n
                      \r\nvar url1 = 'http:\/\/my.com\/hello world';\r\nvar e1 = encodeURIComponent(url1); \/\/ e1 = 'http:\/\/my.com\/hello%20world'\r\n<\/pre>\n
                      * eval()<\/em>: do not use
                      \n* alert()<\/em><\/p>\n
                      Objects<\/h2><\/span>\n
                      * JavaScript object contains:
                      \n- properties (name value pairs)
                      \n- methods
                      \n* Use this <\/em><\/strong> keyword to access properties within object
                      \n* JavaScript objects are passed by reference<\/em>.
                      \n- also equal by reference like Java<\/p>\n
                      Define JavaScript Objects<\/h3><\/span>\n
                      Use Object Literal<\/h4><\/span>\n
                      * Define a simple object just like Java map or C# dictionary<\/p>\n
                      \r\n\/\/ Define an object\r\nvar Book1 = {\r\n\t\ttitle: '', \/\/ property\r\n\t\tauthor: { \/\/ nested object\r\n\t\t\t\tfirstname: '',\r\n\t\t\t\tlastname: ''\r\n\t\t},\r\n\t\tdescription: '',\r\n\t\tsayhi: function(name) { \/\/ method\r\n\t\t\t\treturn 'Hello ' + name + ' from ' + this.author.firstname;\r\n\t\t}\r\n};\r\n\r\n\/\/ Set property values\r\nBook1.title = 'Book One';\r\nBook1.author.firstname = 'John';\r\nBook1.author.lastname = 'Doe';\r\nBook1.description = 'This is book one.';\r\n\r\n\/\/ Access object\r\nBook1.title; \/\/ Dot notation, title has to be an explicit string. It cannot be a variable\r\nBook1['title']; \/\/ Property notation. Property name can be a variable\r\n\r\nBook1.author.firstname; \/\/ Again, both author and firstname have to be explicit strings\r\nBook1['author']['firstname'];\r\n\r\nBook1.sayhi('world');\r\n<\/pre>\n
                      Use Constructor Function to Define Object<\/h4><\/span>\n
                      * Constructor function name is capitalized by convention.
                      \n* Use new <\/em><\/strong>keyword to instantiate constructor object.
                      \n* Special property named constructor <\/em> holds the reference to constructor function used to construct the object.
                      \n* Once constructed, this<\/em> object points to the newly construct object.
                      \n- best practice: use var self = this;<\/em> to remember constructed object.
                      \n- See this <\/a>article for more details on this <\/em>object<\/p>\n
                      \r\nfunction Author(firstname, lastname) {\r\n\t\tvar self = this;\r\n\t\tself.firstname = firstname;\r\n\t\tself.lastname = lastname;\r\n\t\tself.fullname = function () {\r\n\t\t\t\treturn self.firstname + ' ' + self.lastname;\r\n\t\t};\r\n};\r\n\r\nfunction Book(author,title){\r\n\t\tvar self = this;\r\n\r\n\t\tself.title = title;\r\n\t\tself.author = author;\r\n\t\tself.sayhi = function () {\r\n\t\t\t\treturn 'Hello from ' + self.author.fullname();\r\n\t\t};\r\n};\r\n\r\nvar author1 = new Author('john', 'doe');\r\nauthor1.constructor; \/\/ Show constructor function\r\nauthor1 instanceof Author; \/\/ Test instance of. Returns true\r\n\r\nvar book1 = new Book(author1, 'Book One');\r\nbook1.sayhi(); \/\/ Hello from john doe\r\n\r\n\/\/ Pass by reference\r\nauthor1.firstname = 'jane';\r\nbook1.sayhi(); \/\/ Hello from jane doe\r\n<\/pre>\n
                      * More examples:<\/p>\n
                      \r\nfunction JustName(name) {\r\n\tvar self = this; \/\/ Remember this object\r\n\tself.name = name;\r\n};\r\n\r\nJustName.prototype.title = \"Mr.\";\r\nJustName.prototype.hi = function() {\r\n\tvar self = this;\r\n\treturn \"Hello \" + this.title + \" \" + this.name; \/\/ Note use 'this' instead of 'self' object here!\r\n}\r\n\r\nvar name1 = new JustName('Name1');\r\nname1.hi(); \/\/ Hello Mr. Name1\r\n\r\nvar name2 = new JustName('Name2');\r\nname2.hi(); \/\/ Hello Mr. Name2\r\n\r\n\/\/ Switch this object to name2 with call or apply functions\r\n\/\/ Reads name1.hi function called by name2 object\r\nname1.hi.call(name2); \/\/ Hello Mr. Name2\r\nname1.hi.apply(name2); \/\/ Hello Mr. Name2\r\n\r\n\/\/ Switch this object to name2 with bind function:\r\nname1.hi.bind(name2)(); \/\/ Hello Mr. Name2\r\n<\/pre>\n
                      Access Object Properties<\/h3><\/span>\n
                      * In JavaScript, all property keys are strings!<\/p>\n
                      With Square Brackets<\/h4><\/span>\n
                      * Evaluates the first complete expression with square brackets in a statement
                      \n* Runs toString() on it to convert it into a string
                      \n* And then uses that value for the next bracket expression
                      \n* Untill it runs out of bracket expressions.<\/p>\n
                      With Dot Notation<\/h4><\/span>\n
                      * Can only be used to access explicit key name of a property
                      \n* Can NOT used non-string value, such as variables or numbers, in the dot notation<\/p>\n
                      Built-in Objects<\/h3><\/span>\n
                      * Data wrapper objects:
                      \n- Object
                      \n- Array
                      \n- Function
                      \n- Boolean
                      \n- Number
                      \n- String
                      \n* Utility objects
                      \n- Math
                      \n- Date
                      \n- RegEXP
                      \n* Error objects
                      \n- Error<\/p>\n
                      Object<\/h4><\/span>\n
                      * Methods:<\/p>\n
                      \r\nvar o = new Object();\r\no.constructor;\r\no.toString()\r\no.valueOf()\r\n<\/pre>\n
                      Array<\/h4><\/span>\n
                      * Array properties and methods:<\/p>\n
                      \r\nvar a = [1, 2, 'three'];\r\nalert(a); \/\/ 1,2,three\r\nalert(a.length); \/\/ 3\r\n\r\na.push('four');\r\nalert(a); \/\/ 1,2,three,four\r\n\r\na.sort();\r\nalert(a); \/\/ 1,2,four,three\r\n\r\na.join(', '); \/\/ returns comma delimited string\r\nalert(a); \/\/ 1,2,four,three\r\n\r\nvar b = a.slice(1, 3);\r\nalert(a); \/\/ 1,2,four,three\r\nalert(b); \/\/ 2,four\r\na.splice(1, 3);\r\nalert(a); \/\/ 1\r\n<\/pre>\n
                      Function<\/h4><\/span>\n
                      * Properties:<\/p>\n
                      \r\nfunction F(name) {\r\n\t\treturn 'hi ' + name;\r\n}\r\nvar f1 = new F();\r\nF.constructor; \/\/ constructor property\r\nF.length; \/\/ Length of input parameters, i.e. 1\r\n<\/pre>\n
                      * Prototype property
                      \n- every function has a prototype <\/em>property which contains an object
                      \n- prototype chain is live<\/em> (meaning changes to prototype affects all constructors)
                      \n- properties and methods can be added to function via prototype
                      \n- properties and methods are searched up the prototype chain
                      \n- reset <\/em>constructor when you overwrite the prototype as in inheritance<\/p>\n
                      \r\nfunction F1() {\r\n\t\tvar self = this;\r\n\t\tself.name = 'John';\r\n\t\tself.say = function () {\r\n\t\t\t\treturn 'I\\'m ' + self.name;\r\n\t\t};\r\n};\r\n\r\n\/\/ Add property and methods to F1 function via prototype\r\nF1.prototype.title = 'Mr.';\r\nF1.prototype.properHi = function () {\r\n\t\treturn 'Hi ' + this.title + ' I\\'m ' + this.name;\r\n};\r\n\r\nvar f3 = new F1();\r\nalert(f3.properHi()); \/\/ Hi Mr. I'm John\r\n\r\n\/\/ Reset constructor\r\nF1.prototype.constructor = F1; \/\/ Used in inheritance\r\n<\/pre>\n
                      * Methods:
                      \n- call<\/em>: used to \"borrow\"<\/em> a method from another function, e.g.:<\/p>\n
                      \r\nvar f1 = {\r\n\t\tname: 'john',\r\n\t\tsay: function (who) {\r\n\t\t\t\treturn 'hi ' + who + ' i\\'m ' + this.name;\r\n\t\t}\r\n};\r\nalert(f1.say('world')); \/\/ hi world i'm john\r\n\r\nvar f2 = {\r\n\t\tname: 'jane'\r\n};\r\n\/\/ Borrow f1's say method, i.e. f1.say method is called by f2 with parameter of 'Mars':\r\nalert(f1.say.call(f2, 'Mars')); \/\/ hi Mars i'm jane\r\n<\/pre>\n
                      - apply<\/em>: similar to call except all parameters are passed in an array<\/p>\n
                      Inheritance<\/h2><\/span>\n
                      * JavaScript uses function prototype to implement inheritance.<\/p>\n
                      Example<\/h3><\/span>\n
                      \r\n\/\/ A helper function to extend parent constructor\r\nfunction extend(Child, Parent) {\r\n    \/\/ Use a dummy function to break prototype chain\r\n    \/\/ so changes from child won't affect parent's\r\n    var F = function () { };\r\n    F.prototype = Parent.prototype;\r\n    Child.prototype = new F();\r\n\r\n    \/\/ Reset constructor\r\n    Child.prototype.constructor = Child;\r\n\r\n    \/\/ Remember parent (super) prototype \r\n    \/\/ so child can access parent functions\r\n    Child.uber = Parent.prototype;\r\n};\r\n\r\n\/\/ Define Shape parent function\r\nfunction Shape() { };\r\n\/\/ Use prototype to define a common name property\r\nShape.prototype.name = 'Shape';\r\n\/\/ Use prototype to define a common toString property\r\nShape.prototype.toString = function () {\r\n    return this.constructor.uber\r\n        ? this.constructor.uber.toString() + ', ' + this.name\r\n        : this.name;\r\n};\r\n\r\n\/\/ Define TwoDShape child function\r\nfunction TwoDShape() { };\r\n\/\/ which extends from Shape parent function\r\nextend(TwoDShape, Shape);\r\n\/\/ Override name property\r\nTwoDShape.prototype.name = 'Two D Shape';\r\n\r\n\/\/ Define Triangle child function\r\n\/\/ It has its own properties\r\nfunction Triangle(side, height) {\r\n    this.side = side;\r\n    this.height = height;\r\n};\r\n\/\/ Triangle function extends from TwoDShape\r\nextend(Triangle, TwoDShape);\r\n\/\/ Override the name property\r\nTriangle.prototype.name = \"Triangle\";\r\n\/\/ It can implement its own method\r\nTriangle.prototype.getArea = function () {\r\n    return (this.side * this.height) \/ 2;\r\n};\r\n\r\n\/\/ Usage\r\nvar tri1 = new Triangle(10, 10);\r\nalert('triangle name: ' + tri1.name); \/\/ Triangle\r\nalert('triangle area: ' + tri1.getArea()); \/\/ 50\r\n<\/pre>\n
                      JavaScript Namespaces<\/h2><\/span>\n
                      Overview<\/h3><\/span>\n
                      * JavaScript namespace is just a POJO (plain old JavaScript object<\/em>) used as a container\/qualifier for all:
                      \n- variables
                      \n- methods
                      \n- functions
                      \n* No different to other JavaScript functions
                      \n* Used to avoid name conflicts
                      \n* By convention, namespaces are all caps?<\/p>\n
                      Create Namespace<\/h3><\/span>\n
                      * Root namespace:<\/p>\n
                      \r\nvar MYAPP = MYAPP || {};\r\n<\/pre>\n
                      * Equivalent to:<\/p>\n
                      \r\nif (typeof MYAPP == \"undefined\") {\r\n  var MYAPP = MYAPP {};\r\n}\r\n<\/pre>\n
                      Both:
                      \n- check whether namespace is already defined
                      \n- if yes, use the existing global object
                      \n- if no, create an empty global object<\/p>\n
                      Sub-namespace<\/h3><\/span>\n
                      \r\nvar MYAPP = MYAPP || {},\r\n    MYAPP.event = MYAPP.event || {},\r\n    MYAPP.event.mouse = MYAPP.event.mouse || {};\r\n<\/pre>\n
                      * Or<\/p>\n
                      \r\nvar MYAPP = MYAPP || {};\r\nMYAPP = {\r\n  MODEL: {\r\n    product: function(price) {\r\n      this.price = price;\r\n      this.getPrice = function () {\r\n        return this.price;\r\n      };\r\n    }\r\n  },\r\n  LOGIC: {\r\n    calculateVat: function(base) {\r\n      return base * 1.21;\r\n    },\r\n    calculate: function() {\r\n      var p = new MYAPP.MODEL.product(100);\r\n      alert9this.calculateVat(p.getPrice());\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
                      Usage<\/h3><\/span>\n
                      * Think of namespaces as name qualifiers
                      \n* In the following example, we define a namespace named MYAPP<\/em> and qualify all related variables, functions, classes, etc. with it.<\/p>\n
                      \r\nvar MYAPP = MYAPP || {};\r\nMYAPP.Person = function(name) {\r\n  this.name = name;\r\n  if (this.name != null) {\r\n    console.log(\"Person object named: \" + this.name + \" has been instantiated.\");\r\n    this.aliasName = name;\r\n  } else {\r\n    console.log(\"Person object has been instantiated.\");\r\n    this.aliasName = \"unknown\";\r\n  }\r\n};\r\n\r\nMYAPP.Person.prototype.sayHello = function() {\r\n    console.log(\"Hello \" + this.aliasName);\r\n};\r\n\r\nvar p1 = new MYAPP.Person(\"John\");\r\nconsole.log(\"p1 aliasName: \" + p1.aliasName);\r\np1.sayHello();\r\n<\/pre>\n
                      JavaScript Modules<\/h2><\/span>\n
                      Simple Module<\/h3><\/span>\n
                      \r\n\/\/ Only expose MyModule in global scope\r\nvar MyModule = (function (){\r\n  var _firstName = \"John\";\r\n  var _lastName = \"Doe\";\r\n  \r\n  \/* Private function *\/\r\n  function fullName() {\r\n    return _firstName + \" \" + _lastName;\r\n  }\r\n  \r\n  function sayHi(name) {\r\n    var tmpName = name || \"Stranger\";\r\n    alert(\"Hi \" + tmpName + \" from \" + fullName());\r\n  }\r\n  \r\n  \/* Public function *\/\r\n  return {\r\n    sayHi: sayHi\r\n  };\r\n})();\r\n\r\n\/\/ Use My Module:\r\nMyModule.sayHi(\"Jane\");\r\n<\/pre>\n
                      Hide\/Publish Module<\/h3><\/span>\n
                      \r\n\/\/ Hide MyModule from global scope\r\n(function(win, doc){\r\n\tvar MyModule = (function (){\r\n\t\tvar _firstName = \"John\",\r\n\t\t_lastName = \"Doe\";\r\n\t\t\r\n\t\t\/* Private function *\/\r\n\t\tfunction fullName() {\r\n\t\t\treturn _firstName + \" \" + _lastName;\r\n\t\t}\r\n\t\t\r\n\t\tfunction sayHi(name) {\r\n\t\t\tvar tmpName = name || \"Stranger\";\r\n\t\t\talert(\"Hi \" + tmpName + \" from \" + fullName());\r\n\t\t}\r\n\t\t\r\n\t\t\/* Public function *\/\r\n\t\treturn {\r\n\t\t\tsayHi: sayHi\r\n\t\t};\r\n\r\n\t\t\/\/ Expose MyModule as public module win.MyModule\r\n\t\tif (!win.MyModule) win.MyModule = MyModule;\r\n\t})(window, document);\r\n})();\r\n\r\n\/\/ Use My Module:\r\nwindow.MyModule.sayHi(\"Jane\");\r\n<\/pre>\n
                      References<\/h2><\/span>\n
                      * Introduction to Object-Oriented JavaScript<\/a>
                      \n*                       JavaScript Namespaces and Modules<\/a>
                      \n*                       Standard built-in JavaScript objects
                      \n<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
                      Introduction * JavaScript uses class-less, prototype-oriented, or instance-based programming. * JavaScript is case sensitive. Variables * Examples: \/\/ Declare variable var v1; var V2 = 1; var v3, v4 = ‘Hello’, V5; Variable Scope * JavaScript variables are defined in … Continue reading →<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":true,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[18],"tags":[496,686],"class_list":["post-10192","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript-2","tag-oop"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8cRUO-2Eo","_links":{"self":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/10192","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10192"}],"version-history":[{"count":17,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/10192\/revisions"}],"predecessor-version":[{"id":12108,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/10192\/revisions\/12108"}],"wp:attachment":[{"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10192"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10192"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jianmingli.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10192"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}