Detailed use of this in javascript

Source: Internet
Author: User

Document. write ("
* ************** 1. it refers to the current object ******************** "); function print (str) {document. write (str +"
") ;};/* This in javascript is the most confusing of all languages. People who study java or php in China will find it very confusing when learning javascript, because it is not object-oriented. the complexity is also one of the core aspects of javascript functional programming. remember the most important sentence. as follows: this in javascript may refer to the current object, or its simple analysis may not be as follows: 1. it refers to the current object 1. this indicates the current object. For example, this indicates the current dom object in form operations. 2. it refers to the current constructor instance 3. indicates the direct quantity of the current object. 4. global Object 2. indicates the current scope * // 1. it refers to the current Object var obj = new Object (); obj. name = "felayman1"; obj. getName = function () {return this. name;}; print (obj. getName (); // 2. it refers to the current constructor instance function Template () {this. name = "felayman2";} var instanll = new Template (); print (instanll. name); // point to the constructor instance // 3. it refers to the direct amount of var object = {"name": "felayman3", "age": 22, getName: function () {return this. name ;}, getAge: function () {return this. age }}; print (object. getName () + object. getAge (); // 4. it refers to the Global Object print (this); print ("******************** II. it refers to the current scope ********************************"); var func = function () {print (this) ;}; func (); // The object Windowprint (typeof func) is printed )); // at this time, it is functionprint (typeof func (); // window and undefined because the function does not belong to a certain type of document after it is called. write ************
"); Print (new func (); // objectprint (typeof (new func () will be printed; // here there are two objects, because of the specific reference object/* Analysis: when calling a function directly, the browser will directly parse the function into a common function call to execute the code inside the function, some people may think that this points to the func function, or a pointer or handle of it. Unfortunately, this is not related to the memory model of the javascript engine, we all know that javascript is interpreted rather than compiled. Therefore, all javascript code encountered by the Browser executes the code according to specific steps or sequence. After the engine loads a script, we will first extract the variables or functions declared by var (only in the global environment) and save the extracted variables in a temporary table. We can understand them as a memory area, then the code will be parsed line by line. During the parsing process, when a function call is encountered, the corresponding function will be searched in the temporary table. Of course, the engine is intelligent and can determine whether to execute the code. It is a common function call or object creation (for this example only). Therefore, in javascript, we can still separate functions from objects. In fact, we can understand this way, A function is a class template, and an object is an instance of the class template. the class template type belongs to the function, and the object type belongs to the object. this feature makes this a powerful function in function closures. example */print ("********************************* ***********"); function f () {return this;} // defines a nested literal var obj = {"name": "Object 0bj", "getThis": f (), "obj1": {"name": "Object obj1", "getThis": f (), "obj2": {"name": "Object obj2", "getThis ": f () }}; print (obj. obj1.obj2. name); // indicates that the obj pair can be obtained. Like Property // point the function of the Obj2 object to the transition to personprint (obj. getThis); // output windowprint (obj. obj1.getThis); // output windowprint (obj. obj1.obj2. getThis); // Output window/* for the above results, if we do not give an obvious comparison example, it may be difficult for us to understand what I want to express. Here, I will not explain the above example, but I will give the following example, generate a comparison to compare the similarities and differences between the two examples for analysis */print ("************************* *******************"); function ff () {return this;} var object = {"name": "object 0 bject", "getThis": ff, "object1": {"name ": "Object 0bject1", "getThis": ff, "object2": {"nam E ":" Object 0 bject "," getThis ": ff }}; print (obj. obj1.obj2. name); // indicates that the property of the obj object can be obtained. // transition the function of the Obj2 object to the personprint (object. getThis (); // output objectprint (object. object1.getThis (); // output objectprint (object. object1.object2. getThis (); // output object/*. The result is displayed. If you are not careful about the difference between the two examples, the difference is not great, however, the results are completely different. In the first example, when we add a method to a literal object, note that I write a method with parentheses, what is the meaning of braces? Function call. Here we need to understand the principle that a literal object is not a function. When the object is determined, all internal attributes and methods are stored in the memory block of the object, the executable code in the method is parsed by the parser and only the final result is saved. Therefore, the getThis method points to a function call, therefore, only the final result of the function is retained, and the result returned by the final result is exactly what we described in the first example. The returned value is a window global object. therefore, both the literal object and its property object getThis point to the window object. in the second example, getThis only copies a reference of the ff function, instead of pointing to the result of the ff function. At this time, the function prototype is extracted to the temporary table, it is not parsed by the browser, but will not be parsed until the function is called. When the js engine encounters an object. getThis () is used to execute the corresponding code. At this time, the environment has changed. When you execute the ff function, the returned this will point to the object that currently contains its environment, so different objects will be returned, and this feature is a powerful point of closure, we can build closure functions at different levels to change the object or Environment pointed to by this, so as to build a more complex function model. this is what we will talk about function programming later. */

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.