Mar 23
Variables and Methods
- Private Variables
- Private Functions
- Privileged Methods
- Public Properties
- Public Methods
- Prototype Properties
- Static Properties
Private variables are declared with the var keyword inside the object, and can only be accessed by private functions and privileged methods.
Private functions are declared inside the object’s constructor, and may only be called by privileged methods.
Privileged methods are declared with this.methodName = function(){}, and may invoked by code external to the object.
Public properties are declared with this.variableName, and may be read/written from outside the object.
Public methods are defined by Classname.prototype.methodName = function(){}, and may be called from outside the object.
Prototype properties are defined by Classname.prototype.propertyName = someValue.
Static properties are defined by Classname.propertyName = someValue.
Normal Object
var name = 'Ling';
var city = 'Los Angeles';
var myObj = {
city: 'San Francisco',
go: function(name) {
// "this.city" refers to myObj.city('San Francisco'). "city" refers to 'Los Angeles'
var str = name + ' is going to ' + city + '.';
return str;
}
};
var obj = myObj;
obj.city = 'Seattle';
obj.do = function(name) {
var str = name + ' is watching the show in ' + this.city + '.';
return str;
}
console.log(obj.go('Ping')); => Ping is going to Los Angeles.
console.log(obj.do('Ping')); => Ping is watching the show in Seattle.
console.log(myObj); => {city:'Seattle', do:function(name){}, go:function(name){}}
Function Object and Prototype Property
- Example One
var name = 'Ling';
var city = 'Los Angeles';
var myObj = function() {
var city = 'San Francisco';
var go = function(name) {
var str = name + ' is going to ' + city + '.';
return str;
};
// Allow to access the method from outside the "myObj" object.
this.go = go;
};
myObj.prototype.do = function(name) {
// "this.city" refers to 'Seattle'. "city" refers to 'Los Angeles'.
var str = name + ' is watching the show in ' + city + '.';
return str;
};
var obj = new myObj();
obj.city = 'Seattle';
obj.come = function(name) {
var str = name + ' is coming back from ' + this.city + '.';
return str;
};
var newobj = new myObj();
console.log(obj.go('Ping')); => Ping is going to San Francisco.
console.log(obj.do('Ping')); => Ping is watching the show in Los Angeles.
console.log(obj.come('Ping')); => Ping is coming back from Seattle.
console.log(obj); => {city:'Seattle', come:function(name){}, do:function(name){}, go:function(name){}}
console.log(newobj); => function do(name) {}, function go(name) {}
var myObj = function(name) {
var city = 'San Francisco';
var go = function(name) {
var str = name + ' is going to ' + city + '.';
return str;
};
this.name = name;
this.go = go;
};
var obj = new myObj('Ling');
obj.name = 'Ping';
console.log(obj.go()); => Ling is going to San Francisco.
console.log(obj); => name:'Ping', function go() {}
Inheritance
- Method One: Via The Prototype Property
var parentObj = function() {
var name = 'Ling';
var city = 'San Francisco';
var go = function() {
var str = name + ' is going to ' + city + '.';
return str;
};
this.name = name;
this.go = go;
};
var childObj = function() {
var name = 'Ping';
var city = 'Los Angeles';
var come = function() {
// "this.name" refers to 'Ling'. "name" refers to 'Ping'.
var str = name + ' is coming back from ' + city + '.';
return str;
};
this.come = come;
};
childObj.prototype = new parentObj();
var obj = new childObj();
var newobj = new parentObj();
console.log(obj.go()); => Ling is going to San Francisco.
console.log(obj.come()); => Ping is coming back from Los Angeles.
console.log(obj); => name:'Ling', function come(){}, function go(){}
console.log(newobj); => name:'Ling', function go(){}
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.
var parentObj = {
name: 'Ling',
city: 'San Francisco',
go: function() {
var str = name + ' is going to ' + city + '.';
return str;
}
};
var childObj = function() {
var name = 'Ping';
var city = 'Los Angeles';
var come = function() {
var str = name + ' is coming back from ' + city + '.';
return str;
};
this.come = come;
};
childObj.prototype = parentObj;
var obj = new childObj();
var newobj = parentObj;
console.log(obj); => city:'San Francisco', name:'Ling', function come(){}, function go(){}
console.log(newobj); => city:'San Francisco', name:'Ling', function go(){}
function extend(parent, child) {
for (var key in parent) {
child[key] = parent[key]
return child;
}
var parentObj = {
name: 'Ling',
city: 'San Francisco',
go: function() {
var str = name + ' is going to ' + city + '.';
return str;
}
};
var childObj = {
name: 'Ping',
city: 'Los Angeles',
come: function() {
var str = name + ' is coming back from ' + city + '.';
return str;
}
};
var obj = extend(parentObj, childObj);
var newobj = parentObj;
console.log(obj); => {city:'San Francisco', name:'Ling', come:function(){}, go:function(){}}
console.log(newobj); => {city:'San Francisco', name:'Ling', go:function(){}}
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.
function begetObject(o) {
function F() {}
F.prototype = o;
return new F();
}
var parentObj = {
name: 'Ling',
city: 'San Francisco',
go: function() {
var str = name + ' is going to ' + city + '.';
return str;
}
};
var childObj = begetObject(parentObj);
childObj.name = 'Ping';
childObj.come = function() {
var str = name + ' is coming back from ' + city + '.';
return str;
}
var parentObj = function(name, city) {
var name = name;
var city = city;
var go = function() {
var str = name + ' is going to ' + city + '.';
return str;
};
this.go = go;
};
var childObj = function(name, city) {
var name = 'Ping';
var come = function() {
var str = name + ' is coming back from ' + city + '.';
return str;
};
this.come = come;
parentObj.call(this, name, city);
};
var obj = new childObj('Ling', 'San Francisco');
console.log(obj.go()); => Ping is going to San Francisco.
var parentObj = function(name, city) {
var name = name;
var city = city;
var go = function() {
var str = name + ' is going to ' + city + '.';
return str;
};
this.go = go;
};
var childObj = function(name, city) {
var name = 'Ping';
var come = function() {
var str = name + ' is coming back from ' + city + '.';
return str;
};
this.come = come;
parentObj.apply(this, arguments);
};
var obj = new childObj('Ling', 'San Francisco');
console.log(obj.go()); => Ping is going to San Francisco.
Related Posts
- Javascript Object Notations
- Javascript’s Class-less Objects
- Objectifying Javascript
- OOP In Javascript: Public/Private Variables and Methods
- OOP In Javascript: Inheritance
- Function.call()
- Function.apply()
- Create Advanced Web Applications With Object-Oriented Techniques
- Pass By Value Or By Reference
- Javascript Closures
