Parse the Object type and scope in the JavaScript object-oriented concept, and parse criptobject

Parse the Object type and scope in the JavaScript object-oriented concept, and parse criptobject

Reference Type

The reference types include Object, Array, Date, RegExp, and Function.

When using the reference type, you need to generate an object (Instance) from them ). That is to say, the reference type is equivalent to a template. When we want to use a reference type, we need to use this template to generate an object for use. Therefore, the reference type is also called the object definition.

For example, if we need to generate a person Object to define a person's personal information and behavior, we need to rely on the Object type:

var person = new Object();person.name = "jiangshui";person.sayName = function(){  console.log(this.name);}

The person Object above is defined using the "template" of the Object type through the new operator. Then you can add the property name and method sayName to this object. Attributes and methods are the "functions" of the Object type. Therefore, this can be used for objects created by reference types such as objects.

You do not have to use the new operator to create objects. Some types can be simplified. For example, you can use the following two methods to create an Object of the same type as above:

var person = {};person.name = "jiangshui";person.sayName = function(){  console.log(this.name);}

Or

var person = {  name : "jiangshui",  sayName : function(){    console.log(this.name);  }};

The functions of the {} operator are the same as those of the new Object () operator, which simplifies operations. There are also some differences between the two methods. The first method is "APPEND", that is, to add attributes or methods in the previous definition. If an attribute method with the same name already exists, it will overwrite. The second is "replace", that is, whether or not the attributes and methods of the person object are defined earlier, this method will replace the previously defined content with the newly defined content. Because the object generated by the reference type is stored in a region in the memory, and its pointer is saved in a variable (person), the second method is to write, is to generate a new object (new memory area), and then point the person variable to the new memory area, so it replaces the previous. It is important to understand this point later.

The usage of other reference types is roughly the same. For example, for the Array type, you can use [] to generate an object or directly define it. After an Array object is generated, the information content can be stored in the Array format. In addition, the object will obtain the methods defined in the Array type, such as push, shift, and sort, you can call these methods, for example:

var colors = [];colors.push('red','green');console.log(colors);

The above Code creates an object of the Array type through the Array type, then calls the push method defined previously in the Array type, and adds the red and green values to the object, print it on the console.

Call and apply methods

These two methods are provided by the Function type, that is, they can be used on the Function. The function of the call and apply methods is the same as that of the function operation. The difference is that when using call, parameters passed to the function must be listed one by one, but the apply method does not. In this way, you can decide whether to use call or apply according to the requirements of your function.

What does extended function running scope mean? For example, you will understand.

As you can understand, a function is enclosed in a container (Scope). There are some variables or other things in the container. When the function runs and calls these variables, this will be found in the current container. This container actually contains a larger container. If the current small container does not exist, the function will look for it in the larger container, and so on, always find the largest container window object. However, if the function runs in the current small container, the small container contains corresponding variables, and so on, even in the large container, the function will still call the function in its own container.

The call and apply methods solve this problem and break through the container restrictions. In the preceding example:

var person = {  name : "jiangshui",  sayName : function(){    console.log(this.name);  }};

Open the Chrome Console, paste it in and execute it, and then execute person. sayName (). You can see

At this time, person is a container, and a sayName method (function) is created. During execution, it must be executed under the person scope. When executing directly at the bottom, that is, executing under the window scope will report the not defined error, because the sayName method is not defined under the window. The this pointer in it is a special thing. It points to the current scope, which means to call the name value under the current scope.

Next we will add a name attribute for the window object:

window.name = "yujiangshui";

Or directly

name = "yujiangshui";

Because the window is the largest container, the window can be omitted. All defined attributes or variables are attached to the window. If you do not believe them, you can check them:

Now we want to run the sayName method in the person small container under the large container of window. We need to use call or apply to expand the scope of the sayName method. Execute the following statement:

person.sayName.call(window);

Or

person.sayName.call(this);

The output results are the same. You can also use apply to check the effect. Because this demo is too simple to pass parameters, the call and apply functions have the same effect.

The code above explains that sayName is a Function-type instance first, and has the call and apply methods. The call and apply methods are Function-type methods, so we need to call person in this way. sayName. call (window) instead of the person. sayName (). call (window) and so on.

Then the parameters of the call and apply methods are a scope (object), which indicates that the previous function is run under the scope passed in. After the window object is passed in, this. name in the sayName method points to window. name, which expands the scope.

Why is the same effect for passing windows and this? Because we currently execute this function at the position of window, we have mentioned that this pointer points to the current scope, so this points to the window, so it is equal to the window.