結果不同的兩個例項

例項1

var user = 'HTML5學堂';
var newUser = user;
newUser = '碼匠';
console.log(user);
console.log(newUser);

例項2

var user = {
name: 'HTML5學堂'
};
var newUser = user;
newUser.name = '碼匠';
console.log(user.name);
console.log(newUser.name);
 

兩種例項的執行結果

例項1執行後，控制檯的列印結果為：

HTML5學堂

碼匠

例項2執行後，控制檯的列印結果為：

碼匠

碼匠

兩種例項不同結果的“根源”

導致這兩種不同結果的根源在於JavaScript中的變數型別分為兩大類：值型別和引用型別。不同型別的資料在“賦值”時機制並不相同。

歡迎溝通交流~~~HTML5學堂（碼匠）

值型別變數

值型別包括：數值、布林值、null、undefined、字串。

對於值型別變數，變數的交換（將一個變數賦值給另一個變數）相當於是建立了一個新的空間，把原有的變數值複製一份，並將其儲存在新空間當中，新空間與之前空間互不影響。

引用型別變數

引用型別包括：物件、陣列、函式。

引用型別變數的交換，並不會建立一個新的空間，而是讓新變數和之前的變數，同時指向一個原有空間（即同一個地址）。可以理解為C語言的指標。

以生活的例項來說，就如同原來一個人有家門的鑰匙，之後這個人結婚了，配了一把鑰匙給自己的妻子，這時候，兩個人共同有家的鑰匙，但是家還是一個家。

類似的程式碼案例

如果覺得已經弄明白了變數的兩種不同型別，可以檢視如下案例，測試一下自己是否已經掌握該知識了，如下的案例當中還會涉及到函式與引數的相關知識。

程式碼例項 - A

function changeName(username){
    username = '碼匠';
}
var username = 'HTML5學堂';
changeName(username);
console.log(username);
 

程式碼例項 - B

function changeName(username){
    username[0] = '碼匠';
}
var username = ['HTML5學堂'];
changeName(username);
console.log(username);