OOP in JavaScript
Create a custom object in JavaScript1
function Person( name, surname )2
{3
this.name = name;4
this.surname = surname;5
}6
7
var salvo = new Person( ‘Salvatore’, ‘Vetro’ );Add a Method in Object1
customeObject.prototype.newMethodName =function;2
// Specific case3
Person.prototype.Speak = function(){}例子1
function NewObject()2
{3
alert("I am a new object.");4
}5
6
NewObject.prototype = 7
{8
alert1: function(str){alert(str);}, //new method9
10
name: 'As you want', //new property11
12
alert2: function(){alert("Bye.");} //new method13
};14
15
var newObject = new NewObject();16
17
newObject.alert1("Ciao");18
19
newObject.name;20
21
newObject.alert2();每次JavaScript访问一个对象的属性时，将按这个顺序查询：
１．如果当前对象的属性是个值，要找的就是这个值了。
２．如果当前对象的属性没有值，就查找构造器的所有属性。
３．查找直到找到一个合适的属性（有一个值）。
原文：
If the property has a value assigned to the current (local) object, this is the value to use.
If there is no local value, check the value of the property’s prototype of the object’s constructor.
Continue up the prototype chain until either a match of the property is found (with a value assigned to it) or the search reaches the native Object object. Therefore, if you change the value of a constructor’s prototype property and you do not override the property value in an instance of that constructor, JavaScript returns the current value of the constructor’s prototype property.
Obsever in JavaScript：
Observer1
<html>2
<head>3
<script language="javascript">4
5
function ArrayList()6
{7
this.aList = []; //initialize with an empty array8
}9
10
ArrayList.prototype.Count = function()11
{12
return this.aList.length;13
}14
15
ArrayList.prototype.Add = function( object )16
{17
return this.aList.push( object ); //Object are placed at the end of the array18
}19
20
ArrayList.prototype.GetAt = function( index ) //Index must be a number21
{22
if( index > -1 && index < this.aList.length )23
return this.aList[index];24
else25
return undefined; //Out of bound array, return undefined26
}27
28
ArrayList.prototype.Clear = function()29
{30
this.aList = [];31
}32
33
ArrayList.prototype.RemoveAt = function ( index ) // index must be a number34
{35
var m_count = this.aList.length;36
37
if ( m_count > 0 && index > -1 && index < this.aList.length ) 38
{39
switch( index )40
{41
case 0:42
this.aList.shift();43
break;44
case m_count - 1:45
this.aList.pop();46
break;47
default:48
var head = this.aList.slice( 0, index );49
var tail = this.aList.slice( index + 1 );50
this.aList = head.concat( tail );51
break;52
}53
}54
}55
56
ArrayList.prototype.Insert = function ( object, index )57
{58
var m_count = this.aList.length;59
var m_returnValue = -1;60
61
if ( index > -1 && index <= m_count ) 62
{63
switch(index)64
{65
case 0:66
this.aList.unshift(object);67
m_returnValue = 0;68
break;69
case m_count:70
this.aList.push(object);71
m_returnValue = m_count;72
break;73
default:74
var head = this.aList.slice(0, index - 1);75
var tail = this.aList.slice(index);76
this.aList = this.aList.concat(tail.unshift(object));77
m_returnValue = index;78
break;79
}80
}81
82
return m_returnValue;83
}84
85
ArrayList.prototype.IndexOf = function( object, startIndex )86
{87
var m_count = this.aList.length;88
var m_returnValue = - 1;89
90
if ( startIndex > -1 && startIndex < m_count ) 91
{92
var i = startIndex;93
94
while( i < m_count )95
{96
if ( this.aList[i] == object )97
{98
m_returnValue = i;99
break;100
}101
102
i++;103
}104
}105
106
return m_returnValue;107
}108
109
110
ArrayList.prototype.LastIndexOf = function( object, startIndex )111
{112
var m_count = this.aList.length;113
var m_returnValue = - 1;114
115
if ( startIndex > -1 && startIndex < m_count ) 116
{117
var i = m_count - 1;118
119
while( i >= startIndex )120
{121
if ( this.aList[i] == object )122
{123
m_returnValue = i;124
break;125
}126
127
i--;128
}129
}130
131
return m_returnValue;132
}133
134
function Observer()135
{136
this.Update = function()137
{138
return;139
}140
}141
142
143
function Subject()144
{145
this.observers = new ArrayList();146
}147
148
Subject.prototype.Notify = function( context )149
{150
var m_count = this.observers.Count();151
152
for( var i = 0; i < m_count; i++ )153
this.observers.GetAt(i).Update( context );154
}155
156
Subject.prototype.AddObserver = function( observer )157
{158
if( !observer.Update )159
throw 'Wrong parameter';160
161
this.observers.Add( observer );162
}163
164
Subject.prototype.RemoveObserver = function( observer )165
{166
if( !observer.Update )167
throw 'Wrong parameter';168
169
this.observers.RemoveAt(this.observers.IndexOf( observer, 0 ));170
}171
172
</script>173
</head>174
<body bgcolor="#ff9900">175
<table width="100%" border="0">176
<tr>177
<td align="center"><INPUT style="color: #ff9900" id="BtnAdd" onclick="AddObserver()" type="button" value='Insert a new "Observer" checkbox'>178
</td>179
</tr>180
<tr>181
<td align="center" width="100%">Observable/Subject<INPUT id="MainCheckBox" type="checkbox" name="MainCheckBox">Checkbox</td>182
</tr>183
<tr>184
<td align="center">185
<div id="MainContainer"></div>186
</td>187
</tr>188
</table>189
<script language="javascript">190
191
function inherits(base, extension)192
{193
for (var property in base)194
{195
try196
{197
extension[property] = base[property];198
}199
catch(warning)200
{201
}202
}203
} 204
205
var cont = document.getElementById('MainContainer');206
207
var mainCheck = document.getElementById('MainCheckBox');208
209
inherits(new Subject(), mainCheck);210
211
mainCheck["onclick"] = new Function("mainCheck.Notify(mainCheck.checked)");212
213
214
function AddObserver()215
{216
var check = document.createElement("INPUT");217
check.type = 'checkbox';218
219
inherits(new Observer(), check)220
221
check.Update = function(value)222
{223
this.checked = value;224
}225
226
mainCheck.AddObserver(check);227
228
cont.appendChild(check);229
}230
231
</script>232
</body>233
</html>.jpg)
浙公网安备 33010602011771号