Some discoveries of JS prototype chain----from a pen test

1. Opening 1.1 Objective of this article

This is my true meaning of the blog, one is to record their own learning, and the second is to write a blog is also a kind of experience, their own a new attempt.

Needless to say, the reason for writing this article. JS's prototype chain is a headache for me, every time I encounter a number of related topics and code I am a little overwhelmed. A recent written test ran into a related topic, as expected, not answered. Come back to this dig a pass, constantly check data test code, finally have a point harvest, just recently started to play blog, so wrote this record.

PS: I base is not good, so this article may not be the kind of professional blog. If the great gods are fortunate enough to see this article, and let you see the mood is unhappy, but also hope forgive me. If you can still get the guidance of the Great God, it is really thank goodness.

2. Body 2.1 Code

Here is the code I encountered in this written test:

1 functionFun () {2     varGetName =function(){3Console.log (1);4     }5     return  This;6 }7Fun.getname =function(){8Console.log (2);9 }TenFun.prototype.getName =function(){ OneConsole.log (3); A } - varGetName =function(){ -Console.log (4); the } - functionGetName () { -Console.log (5); - } +          - Fun (). GetName (); + getName (); A Fun (); at getName (); - NewFun (). GetName (); - New NewFun (). GetName ();

2.2 My understanding

I'll post the results: 4 4 4 3 3

First Execution statement: Fun (). GetName ();

Here the result is 4, the statement first executes the fun () function, the return value of this, the This is the global object, and then call the GetName () function, output results.

The above step believes everyone knows, but why the output is 4 instead of 5, the call is var getName instead of function getName (), which I think should be recorded.

JS has a mechanism called declaration in advance, that is, all the variables in the function are "ahead" to the top of the function body. Combine the questions to see:

1 var function () {2     console.log (4); 3 }4function  getName () {5     console.log (5); 6 }7 Fun (). GetName ();

Well, as stated in advance, we should be putting Var getname to the front:

var GetName; //Be ahead of time  function () {    Console.log (4);} function GetName () {    Console.log (5);}

See here, I think for a long time, this should not be the function getName (), the output should not be 5? Think of my head is big, finally understand, this function getName () also should be ahead of Ah, because it is called function declaration, also declaration ...

So the right thing to be is this:

var GetName; function GetName () {//This is also to be advanced    Console.log (5function() {    Console.log ( 4);}

In fact, I also worry about a possibility, that is Funciton getName () and Var getName is not a thing, there is no cover does not cover things, then I said before is wasted? I verified that the entire Var getname have been deleted, and then run, found that the result of 4 of the place has become 5, I was a little relieved. If I think so is wrong, but also hope that Daniel correct me, do not let me astray wrong, thank you.

The second statement getname (), the third statement fun (), and the fourth statement getname ():

The GetName () here does not have to say much, and the first one is the same explanation. As for this third fun (), I do not know whether I remember the wrong, the written test can not use communication equipment, secretly also can not, so that I want to shoot down the opportunity to have no, the topic or I use the brain to remember, the third sentence of the meaning I did not want to understand, skip it. By the way, fun () This statement is not output, so finally there are only 5 output results.

Fifth statement new Fun (). GetName (), sixth statement new New Fun (). GetName ():

Okay, here's the play. When I was doing the written test, when I saw here, my heart was silent countless times, I I I go. Really, this is the first time I've seen two new put together ... Well, after all, the base is poor, and here's what I've tested for analysis:

Before that, I think we should mention some knowledge points, there is a word that everything is the object, and JS here are divided into two kinds, one is a common object, and the other is a function object . Yes, the function is a little bit, remember this. Another knowledge point, as long as the object, there will be _proto_ this property, and prototype this attribute, is only the function object . Here at the beginning will be involved in the prototype chain of things, I will say something I see, but not necessarily all, interested can find out for themselves.

Let's look at an example:

function Fun () {    varfunction() {        console.log (1);    }     return  This ;} var New Fun (); //Create an instance of the fun function
Console.log (typeof fun);
Console.log (typeof a);

The following are the browser tools:

OK, here we see a point, the third picture can be seen, fun is the function type, a is the object type. Looking at the first two graphs, the fun function has prototype and a variable is not, and the _proto_ attribute is two, which proves the correctness of the above knowledge point.

To see the most important point, have found thata _proto_ and fun prototype is the same. This is the most important thing I've found in my tests: by using new instances, it only inherits the prototype property of the function, which is a._proto_==fun.prototype.

Let's look at the following example:

1 functionFun () {2     varc = 1; //Add an internal variable C 3     varGetName =function(){4Console.log (1);5     }6     return  This;7 }8 varA =NewFun ();9Console.log (A.C);

Smart people should already know, the result of this example should be undefined, because a only inherit (it should be possible to inherit the word) the fun of the function of the prototype, and C variable is a fun function of the internal variables, not its prototype prototype properties, So the C variable is not defined in a. This can also be derived from another point of knowledge, that is, JS closure, there is an interest to check a ha. That's the problem, I'm going to use this variable C how to do, smart people should have known, return Ah elder brother, so variable C does not come out.

Finally, we can say back to our written question:

The second sentence executes new fun (). GetName (); The result is 3. We know that the new fun instance inherits only the prototype, and the title has a Fun.prototype.getName = function () {console.log (3);}, Replaced the prototype GetName, so that's why the output is 3. Look at the sixth sentence to execute new new fun (). GetName (); The execution order should be like this, first new out of the fun function of an instance, and then new a fun function instance of the GetName function, here we know getName function has been replaced by the result 3, New executes the code in the GetName function code console.log (3); the output, as for new New Fun (). GetName () Returns an instance of the GetName function. In fact, the fifth sentence means that the result of the return is different.

The most final example:

1 functionFun () {2     varGetName =function(){3Console.log (1);4     }5     return  This;6 }7 varA =NewFun ();8Fun.prototype.getName =function() {//Modify Fun () function prototype inside the GetName 9Console.log (6);Ten}

The results are as follows:

Fun.prototype.getName = function () {Console.log (6) not executed);}

After execution Fun.prototype.getName = function () {console.log (6);}

Well, the meaning is known, I will not say more.

3. Summary of 3.1 serious summary

This summary I do not know what is good to write, this is my first time to write a blog, three consecutive hours of all written out, but also satisfied with it. If you are lucky enough to be seen by Daniel or have a hint of help for the people you see, I am happy.

Reprint please indicate the source, fast turn fast turn, hahaha. Http://www.cnblogs.com/ChenYongHao/p/7716828.html

Some discoveries of JS prototype chain----from a pen test