Talking about the _javascript technique of Reference and copy (transmit value and address) in JS

Source: Internet
Author: User
Tags closure numeric value

It seems that few people talk about the reference and replication in JS, but figuring out this concept can help you understand a lot of things.

First of all, a very basic thing to see the JS in several types of data transmission of what

References: objects, arrays, functions

Copying: Numbers, Boolean

The string is described separately, because it is specific and cannot be determined whether to pass a reference or to copy a value (because the values of the string cannot be changed, so it is meaningless to tangle the problem) but for comparison it is obviously a passing-value comparison (a later point of comparison).

Let's talk about the concrete embodiment of the use

The most common use is to assign a value

var a = 1;
var b = A;  The copy value of a is assigned
B + +;
alert (a);  The modification of "1"  B does not affect a
/****************************************/
var a = [1];
var b = A;   The reference to A is 
b[0] + +;
alert (a); The modification of "2"  B is also valid for a  but of course B = [2]; This modification is useless to a.

Parameters of the function

Transfer of values: a copy of a numeric value passed to a function that is not visible outside of its modification

var a = 1;
var b = 2;
function Change (a,b) {
 var c = A;
 A = b;   Overwrite B = C with the new reference
 ;
 alert (a);  "2"     
 alert (b);  "1"
} change
(a,b);
alert (a);  "1"     
alert (b);  "2"

Pass: pass to a function is a reference to a value, the function of its properties are externally visible, but the new reference to overwrite it is not visible externally, such as

var a = [1, 2, 3];
var B = [5, 6];
function Change (a,b) {
 a[0] = 4;  The modification of its properties is visible outside of 
 var C = A;
 A = b;   Overwrite B = C with the new reference
 ;
 alert (a);  "5,6"     
 alert (b);  "4,2,3"
} Change
(a,b);
alert (a);  "4,2,3"
alert (b);   "5,6"

From the results, we can see that A and B are not interchangeable because the new reference is not visible externally because the function simply gets the reference and does not have the power to change the reference

That's different here.

var a = [1, 2, 3];
var B = [5, 6];
function Change () {
 var c = A;
 A[0] = 4;
 A = b;
 b = C;
};
Change ();
alert (a);  "5,6"
alert (b);  "4,2,3"

It's a successful swap here.

We have to mention the block-level scope of JS, this put some language must be to report undefined error, because JS does not block-level scope, so it can not find the variable in the change a,b will consciously go to the top to find, so here's a,b is a reference to global variables

And the above a,b is the change function of the variable, in the Call function passed the a,b of the reference to the two variables, but can not be changed in the overall situation of the a,b, here to change the name is probably better to understand more

This slightly mention some topic ....

Back to references and replication considerations in comparison operations

The comparison of the values compared with the comparison of the reference, the reference is different even if the value is the same

1 = 1;  True
1 = = 1;  True
[0] = = [0];//false
[0][0] = = [0][0];  True
[0][0] = = = [0][0];  True
[0].tostring () = = [0].tostring ();  

In the closure ....

Closure is probably the most tangled JS in our department interview the classic questions, often do not decline ah ....

Here I do not say the closure of the things, only to mention the transfer value and reference parts, and so on which day I decided to use clear regulations, concise language, vivid examples to thoroughly say that thing, and then detail this mention JS can not mention the guy ...

In closures, internal functions use a reference rather than a copy of the local variables of the external function

It's also a very important part of understanding closures that explain a classic closure phenomenon, which is used in many places when it comes to closures.

/* Constructs a function that sets the event handler for the nodes in the array, and when clicked on a node, alert out the serial number of the node
/var add_handlers = function (nodes) {
  var i;
  for (i = 0, L = nodes.length i < l; i + +) {
    Nodes[i].onclick = function (e) {
      alert (i);  Of course, the result here is that every alert is a total number of nodes ....
    }
  }
};

Why is it that each alert is a total number of nodes instead of the expected serial number, which is fairly easy to interpret with a copy and a quote?

Because internal functions use the reference instead of copying when using external variables, that is, when I set the OnClick event for each node, I passed the reference to alert, and when I clicked on the node to trigger the OnClick event, I became the total number of nodes ...

var add_handlers = function (nodes) {
  var i;
  for (i = 0, L = nodes.length I < L + +) {
 
    Nodes[i].onclick = function (i) {return
      function () {
      alert ( i);  
      }
 (i);
  }
;

This modification is correct because at this time is passed in the copy of the value of I, in fact, and ordinary functions are the same, do not because of the addition of the closure is confused, return to the source to think about it, the source is the above mentioned the transfer of the address

By the way, don't be fooled by this weird name for closures, in fact, it is the same as we usually use the principle of the function is the same, put aside those "longer life cycle" "Protection of private variables," such as the so-called characteristics, as a normal function (also can change the angle of the global function as a special closure), It's easy to understand.

The key is to put aside all the glitz, return to the most essential ... Again digress ...

This article on the reference and copy of JS (transfer value and access) is small to share all the content of everyone, hope to give you a reference, but also hope that we support the cloud habitat community.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.