Summary of the use of self and this in javascript

  • 2020-03-30 01:38:09
  • OfStack

A, cause
That day, I used prototype.js, so I opened it and looked at it. After just a few lines, I got confused. The reason was that I was not very familiar with js object orientation.
Prototype.js code snippet

The code is as follows:
Var Class = {
      Create: function () {
              Return the function () {
                      This. The initialize. Apply (this, the arguments);
              }
      }
}
// Class is used as follows
Var A = Class. The create ();
A. prototype = {
      The initialize function (v) {
              This. Value = v;
      }
      ShowValue: function () {
              Alert (enclosing value);
      }
}
Var a = new a (' helloWord! ');
A. showValue (); // pop-up dialog box helloWord!

What is l initialize?
What does the apply method do?
L arguments variable?
L why is the initialize method executed after new A?
Looking for answers:

The code is as follows:


var ClassName = function(v){ 
    this.value=v; 
    this.getValue=function(){ 
        return this.value; 
    } 
    this.setValue=function(v){ 
        this.value=v; 
    } 
}

So what's the difference between a function and a class in JS?
It's the same thing, ClassName is just a function that is used as a constructor to construct an object when it appears after new.
Such as

The code is as follows:
Var objectName1 = new ClassName(" a "); // gets an object

Where objectName1 is the object after executing the ClassName constructor, and this in the ClassName function refers to the object after new, so objectName1 will have one property and two methods. You can call them by:

The code is as follows:
ObjectName1. SetValue (" hello ");
Alert (objectName1. GetValue ()); // dialog box hello
Alert (objectName1. Value); // dialog box hello

then

The code is as follows:
Var objectName2 = ClassName (" b "); // gets an object

So what does object name e2 get? This is obviously the return value of the method, where ClassName is treated as a normal function (albeit capitalized). But there's no return value in the ClassName that we wrote before, so objectName2 is going to be undifinded and then to whom is the "b" assigned? Instead of generating an object here, it simply executes the method, so the "b" is assigned to the window of the object calling the method, as evidenced by the following:
Var objectName2 = ClassName (" b "); // gets an object
Alert (window. The value); // dialog box b
So all functions in JS are the same, but the purpose may be different (to construct an object or to execute a procedure).
It's time to go back to the topic what does initialize do?

The code is as follows:


var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this , arguments); 
        } 
    } 
} 
var A = Class.create();

This code is constructing A function and copying it to A, and this function is

The code is as follows:


function() { 
    this.initialize.apply(this , arguments); 
}

And the latter method is used to do the constructor. When an object is constructed using this constructor, the initialize variable of the constructed object is made to perform the apply() method. This contacts initialize when the object is initialized (it depends on apply).
then

The code is as follows:


A.prototype={ 
    initialize:function(v){ 
        this .value=v; 
    } 
    showValue:function(){ 
        alert(this.value); 
    } 
}

What does that mean?
'Prototype' means' original '. A is A function (), so a. prototype, A variable in function, is actually an object. What method does the object have, so what method does the object generated by function have
Var a = new a (' helloWord! ');
A. showValue (); // pop-up dialog box helloWord!
Therefore, object a will also have an initialize method. Not only that, every object constructed by object a will have an initialize method. As mentioned above, the constructor will be called when it is constructed, and the constructor will let initialize to call the apply method, so in new a (' helloWord! ') when initialize goes back to call the apply method. This is just calling an initialization method.

3. Call () and apply()
Now I started to study apply(), found a few materials on the Internet, and combined with my own research, I learned about the functions of call() and apply(). Function (). Call (object,{},{}...) Or the function (). The apply (object, [...] The function of) is that the object object calls funciton() here. The difference is that the call parameter is passed to funciton from the second, and can be separated by ", ". Apply has only two arguments, and the second is an array that stores all the arguments passed to function.
This. The initialize. Apply (this, the arguments);
What does that mean?
The first this here is the object that was generated after the constructor was called with new, which is the previous a, so the second this should of course be the same object. The argument is the arguments object (an array of arguments), so when the constructor is executed, object a will initialize the initialize method to match the meaning of the word "initialize".
So how are the parameters that execute the initialize method passed in?

Arguments object
This code says it all:

The code is as follows:


function test(){ 
    alert(typeof arguments); 
    for(var i=0; i<arguments.length; i++){ 
        alert(arguments[i]); 
    } 
} 
test("1","2","3"); 
test("a","b");

Alert (typeof arguments) after execution; Object is displayed to indicate that arguments are an object. And then I'm going to type 1, 2, 3. Arguments is the set of real arguments to the calling function.

The code is as follows:


var Class = { 
    create: function() { 
        return function() { 
            this.initialize.apply(this , arguments); 
        } 
    } 
}

Arguments is the set of arguments to the constructor returned by create
Var a = new a (' helloWord! ');
When "helloWord! 'is a set of real arguments (although only a single string), passed to the method apply, and then passed as an argument to the initialize function initialize when the initialize is called.


Related articles: