在javascript中，使用function建立一個object時，用prototype來配置屬性，被建立的object會指向同一個prototype object，而使用this建立的，則會是獨立的屬性。
Example：
定義Tom和Mary二個人。
1
2
3
4
5
6
7
| function Tom(){
}
function Mary(){
}
|
使用prototype定義John的父母，分別為Tom和Mary。
1
2
3
4
5
6
| John.prototype = {
parents:{
dad:new Tom(),
mom:new Mary()
}
};
|
用this的方式定義John的父母。
1
2
3
4
5
6
7
| function John(){
this.parents = {
dad:new Tom(),
mom:new Mary()
};
}
|
然後用this和prototype的方式，各自建立1000000。
1
2
3
4
5
| var people = [];
for( var i = 0; i < 1000000 ; i++ ){
people.push( new John() );
}
|
結果如下：
this使用的記憶體為72.5m，而prototype的記憶體是25m，由此可知，使用prototype來建立多個object，會節省很多記憶體。
完整Prototype Example：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>use "prototype"</h1>
<button id="create">create children</button>
<div id="count">0</div>
<script type="text/javascript">
function Tom(){
}
function Mary(){
}
function John(){
}
John.prototype = {
parents:{
dad:new Tom(),
mom:new Mary()
}
};
var people = [],countElem = document.querySelector("#count");
document.querySelector("#create").addEventListener( "click", function(){
for( var i = 0; i < 1000000 ; i++ ){
people.push( new John() );
}
countElem.innerHTML = people.length;
});
</script>
</body>
</html>
|
完整This Example：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>use "this"</h1>
<button id="create">create children</button>
<div id="count">0</div>
<script type="text/javascript">
//define dad
function Tom(){
}
//define mom
function Mary(){
}
//define child
function John(){
this.parents = {
dad:new Tom(),
mom:new Mary()
};
}
var people = [],countElem = document.querySelector("#count");
//create children
document.querySelector("#create").addEventListener( "click", function(){
for( var i = 0; i < 1000000 ; i++ ){
people.push( new John() );
}
countElem.innerHTML = people.length;
});
</script>
</body>
</html>
|