I wonder if several pieces of code are understood correctly?

function Foo(){
            getName=function(){alert(1);}
            console.log(this)
            return this;
        }
            Foo.getName=function(){alert(2);}
            Foo.prototype.getName=function(){alert(3);}
            var getName=function(){alert(4);}
            function getName(){alert(5);}
  1. Foo.getName (); / / 2 is it because the getName method in the constructor Foo does not have the this keyword, so it is not 1, but directly uses the external method, which means that the Foo object pops up when it calls getName?
  2. getName (); / / 4
  3. Foo (). GetName (); / / 1 Why is it 1 here? Because Foo returns the this object, the this object here is window, so the meaning of this sentence should not be equated with window.getName ()? That should be 4. Why 1
  4. getName (); / / 1 becomes 1 here because the step 3 Foo returns the this object, so the global function getName?? is changed. So return 1
  5. new Foo.getName (); / / 2
  6. new Foo (). GetName (); / / 3
  7. new new Foo (). GetName (); / / 3

5-7 is not well understood and cannot explain why. Is
5 the new keyword that doesn"t really work? It"s all just a call to a method?

Feb.28,2021

Foo.getName (); / / 2

calls Foo's own method directly, not the method of the Foo object. Foo's own method is alert (2) that, so pop up 2.

getName (); / / 4

there is nothing to say about this, the function declaration is improved.

Foo (). GetName (); / / 1

this is more subtle. If you take a closer look at the Foo function, its getName is not declared with var, so the getName is actually window, so the getName of window will be reassigned. And it finally returns this, because it's not called with new, so the this here is window.

to sum up, the final pop-up is 1.

getName (); / / 1

the getName of window was reassigned in the previous step, so 1 pops up here.

new Foo.getName (); / / 2

the new here has no effect. Because Foo doesn't have parentheses, it actually calls Foo.getName (), pop-up 2 first, and then goes to new its return result, which is undefined.

new Foo (). GetName (); / / 3

this is parenthesized, so new a Foo object first, and then call its getName method. The Foo object itself does not have a getName method, so go to its prototype, which is the one that pops up 3.

new new Foo (). GetName (); / / 3

the first new is meaningless, it actually looks like this: new (new Foo (). GetName ()) , the one in parentheses is the same as the previous one, and the final return value is undefined, so the first new has no practical meaning.


Let's talk about your code first. The statement getName=function () {alert (1);} in the Foo function actually declares a global variable getName, and assigns it to a function, so the setName in the function is neither a Foo method nor a local variable in Foo (because you don't use this, or var)
1.Foo.getName () / / Foo.getName=function () {alert (2); } the method that this statement adds to Foo, no problem.

2.getName (); / / there is a function promotion here, although the function getName () {alert (5);} statement is executed after the var getName=function () {alert (4);} statement, but because the function declaration has the effect of function promotion (referring to the scope front-end declaration), the getName function is rewritten by the var getName=function () {alert (4);} statement.

3.Foo (). GetName (); / / here is mentioned at the beginning, you declare a global getName variable, so the getName function is rewritten, which is equivalent to calling window.getName (), to get result 1, no problem

4.getName () / / because you rewrite the getName () function in step 3, the result here is the same as step 3, which is also window.getName ().

5.new Foo.getName (); / / here the new keyword has no effect, because there is no ().
6.new Foo (). GetName (); after Foo. / / it's more complicated here. You need to know what the new keyword in js actually does. Here, since your Foo is not a constructor (there is no statement such as this.getName =. ), there is no getName () method in the object returned by new, but there is a getName () method in the prototype of the returned object. Here, the getName () method in the Foo prototype is called, and the result is 3. No problem.

7. The previous new is meaningless, it is actually executed like this: new (new Foo (). GetName ()), and getName () is not a constructor, so this is equivalent to calling the getName () method in the Foo prototype, and the result is 3, no problem.

from your understanding of this question, I suggest you read more books related to js. "javascript Advanced course" and "essence of javascript language" are all good

Menu