2009
Mar
23




Variables and Methods

Private Variables

Private variables are declared with the var keyword inside the object, and can only be accessed by private functions and privileged methods.

Private Functions

Private functions are declared inside the object's constructor, and may only be called by privileged methods.

Privileged Methods

Privileged methods are declared with this.methodName = function(){}, and may invoked by code external to the object.

Public Properties

Public properties are declared with this.variableName, and may be read/written from outside the object.

Public Methods

Public methods are defined by Classname.prototype.methodName = function(){}, and may be called from outside the object.

Prototype Properties

Prototype properties are defined by Classname.prototype.propertyName = someValue.

Static Properties

Static properties are defined by Classname.propertyName = someValue.

Normal Object

Example
  1. var name = 'Ling';
  2. var city = 'Los Angeles';
  3. var myObj = {
  4. city: 'San Francisco',
  5. go: function(name) {
  6. // "this.city" refers to myObj.city('San Francisco'). "city" refers to 'Los Angeles'
  7. var str = name + ' is going to ' + city + '.';
  8. return str;
  9. }
  10. };
  11.  
  12. var obj = myObj;
  13. obj.city = 'Seattle';
  14. obj.do = function(name) {
  15. var str = name + ' is watching the show in ' + this.city + '.';
  16. return str;
  17. }
  18.  
  19. console.log(obj.go('Ping')); => Ping is going to Los Angeles.
  20. console.log(obj.do('Ping')); => Ping is watching the show in Seattle.
  21. console.log(myObj); => {city:'Seattle', do:function(name){}, go:function(name){}}

Function Object and Prototype Property

Example One

Example
  1. var name = 'Ling';
  2. var city = 'Los Angeles';
  3. var myObj = function() {
  4. var city = 'San Francisco';
  5. var go = function(name) {
  6. var str = name + ' is going to ' + city + '.';
  7. return str;
  8. };
  9. // Allow to access the method from outside the "myObj" object.
  10. this.go = go;
  11. };
  12. myObj.prototype.do = function(name) {
  13. // "this.city" refers to 'Seattle'. "city" refers to 'Los Angeles'.
  14. var str = name + ' is watching the show in ' + city + '.';
  15. return str;
  16. };
  17.  
  18. var obj = new myObj();
  19. obj.city = 'Seattle';
  20. obj.come = function(name) {
  21. var str = name + ' is coming back from ' + this.city + '.';
  22. return str;
  23. };
  24. var newobj = new myObj();
  25.  
  26. console.log(obj.go('Ping')); => Ping is going to San Francisco.
  27. console.log(obj.do('Ping')); => Ping is watching the show in Los Angeles.
  28. console.log(obj.come('Ping')); => Ping is coming back from Seattle.
  29. console.log(obj); => {city:'Seattle', come:function(name){}, do:function(name){}, go:function(name){}}
  30. console.log(newobj); => function do(name) {}, function go(name) {}

Example Two

Example
  1. var myObj = function(name) {
  2. var city = 'San Francisco';
  3. var go = function(name) {
  4. var str = name + ' is going to ' + city + '.';
  5. return str;
  6. };
  7. this.name = name;
  8. this.go = go;
  9. };
  10.  
  11. var obj = new myObj('Ling');
  12. obj.name = 'Ping';
  13. console.log(obj.go()); => Ling is going to San Francisco.
  14. console.log(obj); => name:'Ping', function go() {}

Inheritance

Method One: Via The Prototype Property

Example
  1. var parentObj = function() {
  2. var name = 'Ling';
  3. var city = 'San Francisco';
  4. var go = function() {
  5. var str = name + ' is going to ' + city + '.';
  6. return str;
  7. };
  8. this.name = name;
  9. this.go = go;
  10. };
  11.  
  12. var childObj = function() {
  13. var name = 'Ping';
  14. var city = 'Los Angeles';
  15. var come = function() {
  16. // "this.name" refers to 'Ling'. "name" refers to 'Ping'.
  17. var str = name + ' is coming back from ' + city + '.';
  18. return str;
  19. };
  20. this.come = come;
  21. };
  22.  
  23. childObj.prototype = new parentObj();
  24.  
  25. var obj = new childObj();
  26. var newobj = new parentObj();
  27. console.log(obj.go()); => Ling is going to San Francisco.
  28. console.log(obj.come()); => Ping is coming back from Los Angeles.
  29. console.log(obj); => name:'Ling', function come(){}, function go(){}
  30. console.log(newobj); => name:'Ling', function go(){}

Method Two: Singleton

Purpose: If you have several constructor functions that willl inherit parentObj objects, you may create new parentObj() every time, but it's not necessary. Another way to do the same would be to create one (singleton) normal object and use it as a base for the other objects.

Example
  1. var parentObj = {
  2. name: 'Ling',
  3. city: 'San Francisco',
  4. go: function() {
  5. var str = name + ' is going to ' + city + '.';
  6. return str;
  7. }
  8. };
  9.  
  10. var childObj = function() {
  11. var name = 'Ping';
  12. var city = 'Los Angeles';
  13. var come = function() {
  14. var str = name + ' is coming back from ' + city + '.';
  15. return str;
  16. };
  17. this.come = come;
  18. };
  19.  
  20. childObj.prototype = parentObj;
  21.  
  22. var obj = new childObj();
  23. var newobj = parentObj;
  24. console.log(obj); => city:'San Francisco', name:'Ling', function come(){}, function go(){}
  25. console.log(newobj); => city:'San Francisco', name:'Ling', function go(){}

Method Three: Copy Properties

Example
  1. function extend(parent, child) {
  2. for (var key in parent) {
  3. child[key] = parent[key]
  4. return child;
  5. }
  6.  
  7. var parentObj = {
  8. name: 'Ling',
  9. city: 'San Francisco',
  10. go: function() {
  11. var str = name + ' is going to ' + city + '.';
  12. return str;
  13. }
  14. };
  15.  
  16. var childObj = {
  17. name: 'Ping',
  18. city: 'Los Angeles',
  19. come: function() {
  20. var str = name + ' is coming back from ' + city + '.';
  21. return str;
  22. }
  23. };
  24.  
  25. var obj = extend(parentObj, childObj);
  26. var newobj = parentObj;
  27. console.log(obj); => {city:'San Francisco', name:'Ling', come:function(){}, go:function(){}}
  28. console.log(newobj); => {city:'San Francisco', name:'Ling', go:function(){}}

Method Four: Crockford's Beget Object

Idea: Create a temp constructor so you can use the prototype functionality, the idea is that you create a new object, but instead of starting fresh, you inherit some functionality from another, already existing, object. Then augment the new object with more functionality.

Example
  1. function begetObject(o) {
  2. function F() {}
  3. F.prototype = o;
  4. return new F();
  5. }
  6.  
  7. var parentObj = {
  8. name: 'Ling',
  9. city: 'San Francisco',
  10. go: function() {
  11. var str = name + ' is going to ' + city + '.';
  12. return str;
  13. }
  14. };
  15.  
  16. var childObj = begetObject(parentObj);
  17. childObj.name = 'Ping';
  18. childObj.come = function() {
  19. var str = name + ' is coming back from ' + city + '.';
  20. return str;
  21. }

Method Five: Function.call() and Function.apply()

Example
  1. var parentObj = function(name, city) {
  2. var name = name;
  3. var city = city;
  4. var go = function() {
  5. var str = name + ' is going to ' + city + '.';
  6. return str;
  7. };
  8. this.go = go;
  9. };
  10.  
  11. var childObj = function(name, city) {
  12. var name = 'Ping';
  13. var come = function() {
  14. var str = name + ' is coming back from ' + city + '.';
  15. return str;
  16. };
  17. this.come = come;
  18. parentObj.call(this, name, city);
  19. };
  20.  
  21. var obj = new childObj('Ling', 'San Francisco');
  22. console.log(obj.go()); => Ping is going to San Francisco.
Example
  1. var parentObj = function(name, city) {
  2. var name = name;
  3. var city = city;
  4. var go = function() {
  5. var str = name + ' is going to ' + city + '.';
  6. return str;
  7. };
  8. this.go = go;
  9. };
  10.  
  11. var childObj = function(name, city) {
  12. var name = 'Ping';
  13. var come = function() {
  14. var str = name + ' is coming back from ' + city + '.';
  15. return str;
  16. };
  17. this.come = come;
  18. parentObj.apply(this, arguments);
  19. };
  20.  
  21. var obj = new childObj('Ling', 'San Francisco');
  22. console.log(obj.go()); => Ping is going to San Francisco.

Related Posts


回應 (Leave a comment)