JavaScript talking about the This

Source: Internet
Author: User
Tags call back constructor inheritance

  This article mainly introduces this in JavaScript, and friends who need it can refer to the

This article plays a very important role in all kinds of opposite object programming, and is mainly 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.     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.   Calling pattern 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:F Unction (inc) {             this.value + = typeof Inc = = "Number"? Inc:1   &NB Sp   &NBSP}    }     myobject.increment (); Console.log (Myobject.value);  //output: 1 myobject.increment (3); Console.log (Myobject.value);  /output: 4     Because you can access the object that you belong to by 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 above example functions Showvalue is deferred binding.   Function call Mode when a function is not called as a method of an object, it is a function call. In function invocation mode, this is bound to the global object. (This is an error on the language design) the code is as follows: Myobject.double = function () {    var that = this;  //workaround     var helper = function () {        Console.log (That, ":", That.value); Output Object {value:4, increment:function, double:function} ":" 4         Console.log (This, ":", T His.value); Output  window {Top:window, Window:window ...} ":" Undefined    }       helper (); Call in function   according to normal thinking, this points to the object that the function belongs to, 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. Thus, invoking that in the helper method can be used as this, JaneSingle convenience. As for the function call pattern why this is so, the following is explained in detail when analyzing the reference type.   constructor invocation pattern because JavaScript is based on prototype inheritance, its designers want it to be able to create objects through new and constructors 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, but also 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. The following   code is as follows: function person (name, age) {        this.name = name;        . Age = age;         This.say = function () {            Console.log ("Name:%s, Age: %n ", this.name, This.age);       &NBSP}   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 above example, this is a point to the object created through 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 JavaScript when all functions 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.     Code as follows: var programmer = {      Name: "Programmer",     hand: "Flexible hands",      Programme:function () {          Console.log (this.name+) write code with "+this.hand+". ");    }   var pianist = {      Name: "Pianist",     hand: "Flexible hands",    &nbs P Play:function () {          Console.log (this.name+ "+this.hand+" to play beautiful music. ");    }   var player = {      Name: "Athlete",     foot: "Vigorous legs",    &nbsp ; Run:function () {          Console.log (this.name+ "+this.foot+" in the arena. ");    }  //Obey 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.   Because of the lack of its own movement, no vigorous legs       Above look is not very interesting, apply the first parameter is the execution method of this point. 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 to say so much, I believe you have seen, on the different situations of this decision have some understanding, was going to discuss the next discussion of reference objects, the method call pattern and function call pattern of this value principle, but afraid of length, So I decided to use a separate chapter to analyze the concept of reference object.    

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.