The basic knowledge of JavaScript on This_

Introduced
This plays a very important role in all kinds of opposite object programming, and is primarily used to point to the object being invoked. However, in JavaScript, this is a significant difference in performance, especially in different execution contexts.

We know from the previous article that this is also a property in the execution context, and that all of it is destined to be irrelevant to the execution context.

Copy Code code as follows:

Activeexecutioncontext = {
VO: {...},
This:thisvalue};

In JavaScript, the value of this is dependent on the mode of the invocation. There are four types of call patterns: Method invocation mode, function call mode, constructor call pattern, and apply invocation pattern.

Call mode
Method invocation Pattern
When a function is saved as an attribute of an object, we call it a method. When a method is called, this is bound to the object, that is, this point in the method invocation pattern points to the calling object. This is very easy to understand, you are one of my methods, you belong to me, your this of course point to me.

Copy Code code as follows:

var myObject = {
value:0,
Increment:function (inc) {
This.value + = typeof Inc = = "Number"? Inc:1;
}
}
Myobject.increment ();
Console.log (Myobject.value); Output: 1
Myobject.increment (3);
Console.log (Myobject.value); Output: 4

Because you can access the object to which you belong through this, all the properties or methods in the object can be invoked and modified by it. As you can see from the previous article, this is a member of a property in the execution context that must be created when the context is created, and all this to the object's binding occurs at the time of the call, which is deferred binding. The high reusability of this can be achieved by delaying binding.

Copy Code code as follows:

function Showvalue () {
Console.log (This.value);
}
var a = {value: "a"};
var B = {value: "B"};
A.showvalue = Showvalue;
B.showvalue = Showvalue;
A.showvalue (); Output "a"
B.showvalue (); Output "B"

The function showvalue in the example above is deferred binding.

Function call pattern
When a function is not invoked as a method of an object, it is a function call. In function invocation mode, this is bound to the global object. (This is a mistake in language design)

Copy Code code as follows:

myobject.double = function () {
var that = this; Solving method
var helper = function () {
Console.log (That, ":", That.value); Output Object {value:4, increment:function, double:function} ":" 4
Console.log (This, ":", This.value); Output Window {Top:window, Window:window ...} ":" Undefined
}

Helper (); Called in function form
}

According to the normal idea, this point to the object to which the function belongs, as shown in line fourth, but the problem with the language design causes this to point to a global object. This, in turn, makes this a mystery and an elusive one. But as a developer, this situation is certainly not what we would like to see, do not follow the common sense of the card this is, fortunately, the remedial measures are also very simple, that is, in the example used to refer to this. In this way, invoking that in the helper method can be used as this and is simple and convenient. As for the function call pattern why this is so, the following is explained in detail when analyzing the reference type.

Constructor call pattern
Because JavaScript is based on prototype inheritance, its designers want it to be able to create objects with new and constructor functions like the traditional object-oriented language, and object-oriented programming. This does not seem to be a good idea, a little tiger painting is not the embarrassment of the anti-class dog. One is not to learn, but not necessary to learn. JavaScript's prototype inheritance mechanism is already powerful enough to accommodate the required inheritance polymorphism of object-oriented objects.

Gossip less, also line to talk about the constructor call mode. constructor invocation pattern This is very simple, it is just a function as a constructor, and then you intend to use the properties and methods to introduce the declaration. As follows

Copy Code code as follows:

function person (name, age) {
THIS.name = name;
This.age = age;
This.say = function () {
Console.log ("Name:%s, Age:%n", this.name, This.age);
}
}

var p1 = new Person ("Jink", 24);
P1.say (); Output Name:jink, age:24

var p2 = new Person ("John", 33);
P2.say ()//Output name: John, age:33

As we can see clearly in the example above, this is a point to the object created by new and constructor. Why is that? This is because when the constructor is called in JavaScript, the new operator invokes the internal [[construct]] method of the "person" function, and then, after the object is created, calls the internal [[call]] method. All the same function "person" sets the value of this to the newly created object.

Apply Call Mode
When all functions in JavaScript are created, they come with two methods: Apply and call. The specific use of these two methods, I do not want to elaborate on this, do not know the students can Baidu, very simple. With two methods, we can set this manually. Although this is not allowed to be modified at the time of creation, we set it manually before we create it, which is another matter. With this setting, you can get your object to call any method, as if you could sail the car in the sea, Africa like a Jaguar, and programmers play like a pianist. Haha imagination is always beautiful, call back to call, but the call can not realize the function of the other said.

Copy Code code as follows:

var programmer = {
Name: "Programmer",
Hand: "Flexible hands",
Programme:function () {
Console.log (this.name+ "+this.hand+" writes the code.) ");
}
}

var pianist = {
Name: "Pianist",
Hand: "Flexible hands",
Play:function () {
Console.log (this.name+ "+this.hand+") to play beautiful music. ");
}
}

var player = {
Name: "Athlete",
Foot: "Vigorous legs",
Run:function () {
Console.log (this.name+ "+this.foot+") in the arena Mercedes-Benz. ");
}
}

Rules
Programmer.programme (); Programmers use flexible hands to write code.
Pianist.play (); The piano is home to the nimble hands playing beautiful music.
Player.run (); The athlete is running on the athletic field with his vigorous legs.
Whimsical
Pianist.play.apply (programmer); The programmer uses the nimble hands to play the beautiful music.
Player.run.apply (programmer);   Programmers use undefined to run the game. Lacking of vigorous legs due to lack of self movement

Is it interesting to see that the first parameter of apply is the this point in the execution method. In this way we can borrow other people's way of their own private secretly use, is extremely convenient. Such techniques that are often used in some frameworks.

Summary
about this so much, I believe you have read, the decision of this in different situations have some understanding, was intended to discuss the next discussion of reference objects, The principle of this value in the method invocation pattern and function invocation pattern is expounded, but the fear of length is too long, so we decide to analyze the concept of reference object with a separate chapter.