值類型和引用類型

時間 2019-11-06

標籤類型引用简体版

原文原文鏈接

初衷：

上一篇原始類型中說到JS目前有七種數據類型，其中六種基本數據類型，一種複雜數據類型。這篇能夠再具體一點。javascript

內容：

1.區別：

基本數據類型：
- 就是將內容直接存儲在棧內的簡單數據段，數據大小肯定，內存空間大小能夠分配，按值訪問，能夠操做保存在變量中的實際的值;
- 基本數據類型的賦值就是複製；
- 使用typeof檢測數據的類型。
複雜數據類型：
- 將內容存儲在堆中的對象，每一個空間大小不同，要根據狀況進行特定的配置，堆所對應的棧中記錄的是指針(堆的地址)，外部訪問時先引出地址，再經過地址去找到值所存放的位置;
- 複雜數據類型的賦值是地址引用；
- 使用instanceof檢測數據類型。html
  
  2.一些面試題

2.1.構造一個函數，給數組中的節點設置事件處理程序，當點擊一個節點時，alert出節點的序號(這道題更多的出如今閉包知識上)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <title>點擊btn彈出序號</title>
</head>
<body>
   <button onclick="clickme()" class="btn">Click Me</button>
   <button onclick="clickme()" class="btn">Click Me</button>
   <button onclick="clickme()" class="btn">Click Me</button>
   <button onclick="clickme()" class="btn">Click Me</button>
   <button onclick="clickme()" class="btn">Click Me</button>
</body>
</html>

var nodes = document.getElementsByClassName("btn");

var click_handlers = function(nodes){
    var i;
    for (i = 0, l = nodes.length; i < l; i ++) {
        nodes[i].onclick = function (e) {
           alert(i);    
        }
    }
};

click_handlers(nodes);

其實這道題目在關於閉包的知識點中，應該是特別熟悉的一道題。而我也認可，以前真的是似懂非懂，只知道上面寫的，只能彈出最後一個節點的數字：5。如今從新回過頭來看這道題的話，才知道這用值類型和引用類型來解釋的話，會是如此簡單明瞭。java

內部函數在使用外部變量i的時候，用的是引用，而非複製。意思就是給每一個節點設置onclick事件的時候，將i的引用傳遞給了alert，當再點擊節點觸發onclick的時候，i的值已經變成了nodes.lenght++,即5。

優化後：node

var click_handlers = function(nodes){
    var i;
    var helper = function(i){
        return function(){
            alert(i);
        }
    }
    for (i = 0, l = nodes.length; i < l; i ++) {
        nodes[i].onclick = helper(i);
    }
};

這裏是由於傳遞進去的是i的值的複製。

2.2.看下面的

function function(person) {
    person.age = 25;
    person = {
        name: "John",
        age: 50
    };

    return person;
}
var p1 = {
    name: "Alex",
    age: 30
};
var p2 = function(p1);
console.log(p1); // -> ?{name: "Alex", age: 25}
console.log(p2); // -> ?{name: "John", age:50}

2.3.請寫出下列輸出：

var a = {"x": 1};
var b = a;
a.x = 2;
console.log(b.x);//2
a = {"x": 3};
console.log(b.x);//2
a.x = 4;
console.log(b.x);//2

a和b指向同一個地址，其中一個改變，另一個也會跟着改變。故第一個b.x=2;而當a = {"x":3}後，a被賦值了一個新的對象，地址也就變成了一個新的地址，因而與原來的就沒什麼關係了，a、b便變成了指向兩個不一樣地址的對象:a指向x=3，b指向x=2。面試

2.4.請寫出下列輸出：

var a = {n:1}; 
var b = a;  
a.x = a = {n:2}; 
console.log(a.x);//?
console.log(b.x);//?

關於js的賦值運算符

3.結語

多多看一些文章、書籍，理解理解，原來一切並無想象中的那麼難。今年開始，文章先發表在了掘金主頁了喲，所以博客園就滯後點了~數組

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。