值类型和引用类型

初衷：

上一篇原始类型中说到JS目前有七种数据类型，其中六种基本数据类型，一种复杂数据类型。这篇可以再具体一点。

内容：

1.区别：

  • 基本数据类型：

    • 就是将内容直接存储在栈内的简单数据段，数据大小确定，内存空间大小可以分配，按值访问，可以操作保存在变量中的实际的值;
    • 基本数据类型的赋值就是复制；
    • 使用typeof检测数据的类型。

  • 复杂数据类型：

    • 将内容存储在堆中的对象，每个空间大小不一样，要根据情况进行特定的配置，堆所对应的栈中记录的是指针(堆的地址)，外部访问时先引出地址，再通过地址去找到值所存放的位置;
    • 复杂数据类型的赋值是地址引用；
    • 使用instanceof检测数据类型。

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。现在重新回过头来看这道题的话，才知道这用值类型和引用类型来解释的话，会是如此简单明了。

内部函数在使用外部变量i的时候，用的是引用，而非复制。意思就是给每个节点设置onclick事件的时候，将i的引用传递给了alert，当再点击节点触发onclick的时候，i的值已经变成了nodes.lenght++,即5。

优化后：

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.结语

多多看一些文章、书籍，理解理解，原来一切并没有想象中的那么难。今年开始，文章先发表在了掘金主页了哟，因此博客园就滞后点了~

posted @ 2019-05-08 18:07  郑叶叶  阅读(347)  评论(0)  编辑  收藏  举报