Javascript pointer/reference craziness. Can someone explain this?

前端 未结 5 1935
夕颜
夕颜 2020-11-30 18:14

Javascript passes objects by reference. This makes perfect sense. But once you start manipulating those objects, everything acts in a way that seem unintuitive. Let me offer

5条回答
  •  慢半拍i
    慢半拍i (楼主)
    2020-11-30 18:48

    :P You're descending into the knitty gritty details and I'm glad you asked, as you will be wiser by the end.

    Don't look at it in terms of pointers, because I think that is where you are getting confused. Think of it rather in terms of the heap (or just "memory" if you will) and the symbol table.

    Lets start by taking the first few lines of your code:

    var a, b;
    
    a = {}
    b = a;
    

    What you've done here is created one object on the heap and two symbols on the symbol table. It looks something like this:


    Symbol Table:

    +--------+-----------------+
    | Symbol | Memory Location |
    +--------+-----------------+
    |      a |        0x400000 |
    +--------+-----------------+
    |      b |        0x400000 |
    +--------+-----------------+
    

    Heap:

    +----------+-----------------+
    | Location | Value           |
    +----------+-----------------+
    | 0x400000 |   |
    +----------+-----------------+
    
    
    

    .


    Here's where things get interesting: Objects have their own "symbol tables" (usually these are just hash tables, but calling it a symbol table can make it clearer).

    Now, after your next statement, you have 3 things to consider: The global symbol table, 's symbol table, and the heap.

    Run the following line:

    a['one'] = {}
    

    And now things look like this:


    Global Symbol Table:

    +--------+-----------------+
    | Symbol | Memory Location |
    +--------+-----------------+
    |      a |        0x400000 |
    +--------+-----------------+
    |      b |        0x400000 |
    +--------+-----------------+
    

    's Symbol Table

    +--------+-----------------+
    | Symbol | Memory Location |
    +--------+-----------------+
    |    one |        0x400004 |
    +--------+-----------------+
    

    Heap:

    +----------+-----------------+
    | Location | Value           |
    +----------+-----------------+
    | 0x400000 |   |
    +----------+-----------------+
    | 0x400004 |   |     <---we created a new object on the heap
    +----------+-----------------+
    
    
    

    .


    Now you ran the following code:

    a = a['one'];
    

    This should hopefully seem to be a trivial change. The result is:


    Global Symbol Table:

    +--------+-----------------+
    | Symbol | Memory Location |
    +--------+-----------------+
    |      a |        0x400004 |
    +--------+-----------------+
    |      b |        0x400000 |
    +--------+-----------------+
    

    's Symbol Table

    +--------+-----------------+
    | Symbol | Memory Location |
    +--------+-----------------+
    |    one |        0x400004 |
    +--------+-----------------+
    

    Heap:

    +----------+-----------------+
    | Location | Value           |
    +----------+-----------------+
    | 0x400000 |   |
    +----------+-----------------+
    | 0x400004 |   | 
    +----------+-----------------+
    
    
    

    .


    Following the memory locations to the heap should hopefully make it clear why you got the output you did.

    Now things get even MORE interesting, because now you are doing:

    a['two'] = 2;
    

    Ok, so let's take this step by step.

    • a points to memory location 0x400004 which contains
    • is an empty object, thus its symbol table starts off empty
    • By running this line, we add the variable 'two' to 's symbol table.

      If you're not tired of looking at these diagrams yet, you will be. Things now look like this:


      Global Symbol Table:

      +--------+-----------------+
      | Symbol | Memory Location |
      +--------+-----------------+
      |      a |        0x400004 |
      +--------+-----------------+
      |      b |        0x400000 |
      +--------+-----------------+
      

      's Symbol Table

      +--------+-----------------+
      | Symbol | Memory Location |
      +--------+-----------------+
      |    one |        0x400004 |
      +--------+-----------------+
      

      's Symbol Table

      +--------+-----------------+
      | Symbol | Memory Location |
      +--------+-----------------+
      |    two |        0x400008 |
      +--------+-----------------+
      

      Heap:

      +----------+-----------------+
      | Location | Value           |
      +----------+-----------------+
      | 0x400000 |   |
      +----------+-----------------+
      | 0x400004 |   | 
      +----------+-----------------+
      | 0x400008 | 2 (literal val) |    <-- yes, even integers are stored on the heap
      +----------+-----------------+        in JavaScript.
      
      
      

      .


      If you diligently take the time to follow the memory locations, you will see that your browser displayed the correct output.

      提交回复
      热议问题