• 值类型和引用类型


    初衷:

    上一篇原始类型中说到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
    

    ab指向同一个地址,其中一个改变,另外一个也会跟着改变。故第一个b.x=2;而当a = {"x":3}后,a被赋值了一个新的对象,地址也就变成了一个新的地址,于是与原来的就没什么关系了,ab便变成了指向两个不同地址的对象:a指向x=3b指向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.结语

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

  • 相关阅读:
    怎样用OpenScales发布这些瓦片地图?
    mysql在linux下命令备份数据库
    jQuery EasyUI
    JQuery遮罩层登录
    C#通过线程完成定时执行事件
    JS中showModalDialog 详细使用
    sql时间函数
    asp网页设计流量统计代码
    Rational Rose、PowerDesign、visio的比较
    win环境下eclipse安装指引
  • 原文地址:https://www.cnblogs.com/zhengyeye/p/10833522.html
Copyright © 2020-2023  润新知