View JavaScript pre-loading from function Definition

Source: Internet
Author: User

Defining a function in JavaScript can be written in two ways:

Function ftn () {}// first var ftn = function () {}// second

Some people say that these two methods are completely equivalent. However, before parsing, the previous write method will be automatically promoted to the Code header by the parser, which violates the principle defined and used by the function. Therefore, when defining a function, we recommend that you, all adopt the latter method.

After reading this sentence, I first felt that the two statements were completely consistent during use, but they were resolved differently. However, his explanation "the previous writing method will be automatically promoted to the Code header by the parser" left me confused.

If I have the following first test:

<Script type = "text/javascript"> function ftn () {alert ('Old');} var B = ftn; function ftn () {B (); alert ('new');} ftn (); // the browser reports memory overflow. </script>

Next I did the second test:

<Script type = "text/javascript"> var ftn = function () {alert ('Old');} var B = ftn; var ftn = function () {B (); alert ('new');} ftn (); // old, new pops up in sequence </script>

The explanation on the internet is as follows: the first method is to execute itself in it without actually redefining the ftn Function at the beginning. In the second way, ftn = function () is not executed here. The Code ftn has been redefined, so the redefinition here is effective.

If it is not clear, I will perform the following test:

<Script type = "text/javascript"> function ftn () {alert ('Old');} var B = ftn; function ftn () {B (); alert ('new');} alert (B); // The result is a redefined ftn content. </script>

The test results show that after the ftn is redefined, the content of B also changes. Next I did another two tests:

<Script type = "text/javascript"> var ftn = function () {alert ('Old');} var B = ftn; var ftn = function () {B (); alert ('new');} alert (B); // The result is the old ftn content. </script>

This is very interesting. In JavaScript, except for the basic data type, all other types are objects. The object exists in the heap, and its alias is the address in the stack, this principle can be clearly understood in the next test. So why does the previous test change with the definition of ftn?

I have a new explanation, but I don't know if it is correct. I will mention in all the JavaScript books that there is no way to reload JavaScript. the previously defined duplicate function will overwrite the previous function, var B = ftn; this statement points B and ftn references to the memory in the same heap, and after the function ftn () {} is redefined, the new function object overwrites the old object, while the heap address space referenced by B and ftn has not changed. If so, this method is reasonable:

<Script type = "text/javascript"> function ftn () {alert ('Old');} var B = ftn; var ftn = function () {B (); alert ('new');} alert (B); // old ftnalert (ftn); // new ftnftn (); // old, new </script>

In this way, the address of the new ftn in the stack is changed, pointing to the definition of the new function object. The original function is not overwritten and saved, so B is still the address referenced by the old ftn.

I have just written an article on understanding functions in JavaScript. I will go back and think about the content of my article. I think it is still a bit difficult to understand the test results, in fact, we need to think about the compilation and running principles. JavaScript is compiled only when code is executed. Therefore, the types defined by var can be variable. When encapsulated objects are added, attributes and methods are added, therefore, we can understand the problems caused by my title. The general javascript language, for example, defining a variable var obj = new Object (), is just a very initial process, in JavaScript, it is called pre-compilation. This pre-compilation capability is very weak, so you can change it without affecting program running. when an object is called, the JavaScript interpreter will compile and then run the Code. This is very different from java. java compiles the code first and runs it only when it is called. This is the characteristic of the script language, therefore, most scripting languages are unpleasant. But when you define a function like this: fonction ftn () {}, the code is compiled, that is, executed. This writing method is similar to the definition of java functions. This is my new explanation. I think this explanation is more reasonable.

JavaScript "Compilation" only checks whether there is any code error and does not run the code. You can try writing something in the function to test it. Pre-load: first function, then var. In the above Code, only demo1 and demo3 are affected. The source code sequence function-var-function of demo1 and demo3 is: function-var, complete pre-loaded code:

<Script type = "text/javascript"> // demo1function ftn () {alert ('Old');} function ftn () {B (); alert ('new');} var B = ftn; ftn (); // the browser reports memory overflow. </script>
<Script type = "text/javascript"> // demo3function ftn () {alert ('Old');} function ftn () {B (); alert ('new');} var B = ftn; alert (B); // The result is a redefined ftn content. </script>

This is probably the case for pre-loading.

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.