JavaScript中變數的儲存方式

基本原理

在js中變數包含5中基本型別以及一個複雜資料型別Object，當然常用的函數和陣列都是物件。對於基本類型和複雜類型，對應著兩種不同的儲存方式–棧儲存和堆疊儲存。為什麼要實現兩種儲存方式的理由很簡單，就是基本型別一旦初始化則記憶體大小固定，存取變數就是存取變數的記憶體上實際的數據，稱之為按值存取。而物件類型說不定什麼時候就會增加自身的大小，記憶體大小不固定。例如動態加入物件的屬性、動態增加陣列的大小等等都會使變數大小增加，無法在堆疊中維護。所以js就把物件類型的變數放到堆中，讓解釋器為其按需分配內存，而透過物件的引用指針對其進行訪問，因為物件在堆中的記憶體位址大小是固定的，因此可以將記憶體位址保存在堆疊記憶體的參考中。這種方式稱之為按引用存取。 嗯，理解這一點很重要，在以後的程式設計中可以避免很多問題。 我們來看下如下的程式碼：

var a = 'I am a string.';   //a,b,c的变量中保存的都是实际的值，因为他们是基本类型的变量
var b = 1010;
var c = false;
var d = a;    //d中保存着和“a值一样的副本，它们互不影响”
a = 'I am different from d';
alert(d);    //输出'I am a string'

以上程式碼很好理解，就是說按值存取的變數複製「你的就是你的，我的就是我的，咱們都有副本，互不影響。」而對於依照引用存取則稍有不同：

var e = {
name : 'I am an object',
setName : function(name){
this.name = name;
}
};
var f = e;    //赋值操作，实际上的结果是e,f都是指向那个对象的引用指针
f.setName('I am different from e,I am object f.');
alert(e.name);    //对f进行操作，e的值也改变了！

對於引用型別的賦值，說穿了，就是把那個物件的指標複製了過去，兩個指標指向的都是同一個實體對象，不存在副本，原本的物件還是只有一個！好。以上就是基本型別和引用型別的最大最根本的差異！我用一張圖來形象的表示下：

*棧內存中存放基本類型變量，以及對象的指針；堆中存放對象實體

中的情況

引用類型引發的問題

1.使用原型模型創建對象的問題

我們都知道，在JavaScript OO（Object Oriented）中，使用原型模式創建對象的最大的好處就是可以讓對象實例共享原型(prototype)所包含的屬性和方法。這樣就避免了建構函式模式的缺陷，即每個物件都會有每個方法的副本，每個方法都會在每個實例上重新創建一遍，方法重複使用無意義的問題。

嗯，使用原型模式是為所有實例共享了方法，但是當原型中有引用類型值的屬性的時候，問題就來了：

var Person = function(){
};
Person.prototype = {
constructor : Person,
name : 'Hanzongze',
hobby : ['basketable', 'swiming', 'running'],    //注意，这里包含着一个引用类型的属性
sayName : function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.hobby.push('music');
alert(person2.hobby);    //输出为'basketable', 'swiming', 'running','music'
alert(person1.hobby === person2.hobby);    //true

由於hobby屬性是引用類型的值，所以由Person構造函數創建出來的實例的hobby屬性，都會指向這個引用實體，實例物件間的屬性互相干擾。這不是我們想要的結果，為避免這類問題，解決方案就是組合使用構造函數模型和原型模型：

var Person = function(){
this.name = 'Hanzongze';
this.hobby = ['basketable', 'swiming', 'running'];    //对引用类型的值使用构造函数模式
};
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.hobby.push('music');
alert(person2.hobby);   //输出 'basketable', 'swiming', 'running'，说明对person1的修改没有影响到person2
alert(person1.hobby === person2.hobby);    //false

2.原型繼承中的問題

這個問題與上一個的本質其實是一樣的，只不過是發生在了原型繼承的背景中。來看一個原型鏈繼承的問題：🎜

var Person = function(){
this.name = 'Hanzongze';
this.hobby = ['basketable', 'swiming', 'running'];
};
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
};
//子类型Student
function Student(){
}
Student.prototype = new Person();    //Student继承了Person
var student1 = new Student();
var student2 = new Student();
student1.hobby.push('music');    //对子类实例student1的引用属性做了改动
var student3 = new Student();
alert(student2.hobby);    //输出'basketable', 'swiming', 'running', 'music'
alert(student3.hobby);    //输出'basketable', 'swiming', 'running', 'music'

🎜在這段程式碼中，可以看到，子類別Student繼承自父類別Person。但由於使用的是原型繼承，也就是說父類別的實例作為了子類別的原型，那麼實例中的引用類型屬性也就繼承在了子類別的原型prototype中去了。則子類別的實例共用該引用屬性，相互影響。 🎜🎜解決方案，那就是使用借用構造函數方案（但是也不是理想的方案，理想的方案是組合使用原型鍊和借用構造函數。涉及到了比較多的繼承模式，這裡簡單描述，以後會寫一篇詳細的文章）：🎜

var Person = function(){
this.name = 'Hanzongze';
this.hobby = ['basketable', 'swiming', 'running'];
};
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
};
function Student(){
//借用构造函数,继承了Person
Person.call(this);
}
var student1 = new Student();
var student2 = new Student();
student1.hobby.push('music');
alert(student2.hobby);    //输出'basketable', 'swiming', 'running', 'music'

🎜🎜🎜