值类型和引用类型

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

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