Foreword Javascript is a dynamic object-based language, that is, everything is an object, a very typical example is the function can also be regarded as an ordinary object. Javascript can be certain design patterns to achieve the object-oriented programming, which this 'pointer' is to achieve a very important object-oriented features. But this is a very easy to understand Javascript wrong, and then the wrong characteristics. In particular, especially for a relatively long time contact with static languages of comrades. Example that we first look at a simple example: \u0026 lt; script type = \u0026 quot; Nike Air Max text / javascript \u0026 quot; \u0026 gt; var name = \u0026 quot; Kevin Yang \u0026 quot ;; function sayHi () {alert (\u0026 quot; Hello, my name is \u0026 quot; + name);} sayHi (); \u0026 lt; / script \u0026 gt; This code is very simple, we define a global string object name and function objects sayHi. Run dialog box will pop Nike Basketball up a greeting, 'Hello, my name is Kevin Yang'. We put this code is slightly altered: \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var name = \u0026 quot; Kevin Yang \u0026 quot ;; function sayHi () {alert (\u0026 quot; Hello, my name is \u0026 quot; + this.name);} sayHi (); \u0026 lt; / script \u0026 gt; the difference between this code and the sections of the code is that sayHi function name when using this prefix is added. Operating results and exactly the same as above. This shows that the name is still the global target this.name references. We are not saying at the beginning of the function is ordinary objects, you can use it as an ordinary variable. We then the above code altered: script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var name = \u0026 quot; Kevin Yang \u0026 quot ;; function sayHi () {alert (\u0026 quot; Hello, my name is \u0026 quot; + this .name);} var person = {}; person.sayHello = sayHi; person.sayHello (); \u0026 lt; / script \u0026 gt; This time, we have created a global object person, and the person assigned sayHi function object object sayHello attribute. The result is as follows: the contents of this once greeted a bit nonsensical, and we found a this.name has become undefined. This shows that, in the implementation of the internal function sayHello already could not find the object of this.name. If we redefine the person object thereon with a name attribute what will happen? var person = {name: \u0026 quot; Marry \u0026 quot;}; Run the code found greet 'person' has changed: It is not see the point of it round after round? Determining the guiding principles of this pointer in Javascript inside, this indicator represents the current code execution object owner. In the example above, we can see, for the first time, we define a global function object sayHi and execution of this function, internal functions use this keyword, then execute this line of code objects is sayHi (everything is an object manifestation), sayHi is defined in the global scope. In fact, the so-called Javascript global object is simply to define an attribute in the window of the root object only. Therefore, sayHi owner is the window object. That is, in the global scope, you can go to the object referenced by directly using the name, you can also go to the same object referenced by window.name. Thus it can be translated as window.name this.name a. Let's look at an example of this in a second. We define a person object, and defines its sayHello attribute to point sayHi global object. So this time, when we run person.sayHello, the code belongs to the object this is where the sayHello (in fact, to be exact, sayHi and sayHello are only two similar pointer to the object is actually the same), and Owner sayHello object is a person. The first, person there is no name attribute, so the dialog box that is this.name reference is undefined objects (Javascript only declared but not all defined variables all point undefined objects); and the second time we define the person's When added to the name attribute, then naturally this.name point is that we define the string. After understanding the above mentioned, the last paragraph of the example above, we will be transformed into an object-oriented code. \u0026 Lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var Mens Nike Free 3.0 Nike Air Jordan 6 Women V2 Shoes Black Blue name = \u0026 quot; Kevin Yang \u0026 quot ;; function sayHi () {alert (\u0026 quot; Hello, my name is \u0026 quot; + this.name);} function Person ( name) {this.name = name;} Person.prototype.sayHello = sayHi; var marry = new Person (\u0026 quot; Marry \u0026 quot;); marry.sayHello (); var kevin Mens Nike Free 3.0 V2 Shoes Grey Green = new Person (\u0026 quot; Kevin \u0026 quot;); kevin. sayHello (); \u0026 lt; / script \u0026 gt; In the above code, we define a Person of the 'class' (actually or an object), then the equivalent of C ++ static member variables in this class prototype (class prototype concept) defined sayHello attribute to point to the global sayHi object. Run the code we can see, marry and kevin are successful to us to play out, 'hello.' There are two things to think about in Mens Nike Free 3.0 V2 Shoes Grey Orange this code, we are very familiar with the new one, but in Nike Zoom Kobe the end what has been done here new operating it? Another is that there's time to execute sayHello, this pointer points to why we can marry and kevin correct object? We come to operate the above definition, 'class' and an instance of the class object again 'translate' about: \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var name = \u0026 quot; Kevin Yang \u0026 quot ;; function sayHi () {alert ( \u0026 quot; Hello, my name is \u0026 quot; + this.name);} function Person (name) 2015 Nike Free 5.0 {var this; this.name = name; return this;} Person.prototype.sayHello = sayHi; var marry = Person ( \u0026 quot; Marry \u0026 quot;); marry.sayHello (); var kevin = Person (\u0026 quot; Kevin \u0026 quot;); kevin.sayHello (); \u0026 lt; / script \u0026 gt; of course, this code does not execute properly, but it can help you better The understanding of this process. When we use the new keyword to instantiate a 'class' when the object, Javascript engine will define a new object within the object and stored in this pointer. All this inside the object code are actually used this point to the new object. As this.name = name, is actually the name of the parameter objects assigned to this newly created object. Javascript engine would return after executing the function object this Nike Blazers object to you, so there will get marry variable object name is 'Marry', and the name of the object attribute kevin variables get really 'Kevin'. Explicit manipulate this pointer in object-oriented programming example above, we see that in the case of using the new operator, it seems to point and guiding principles we mentioned in the previous section, this is not consistent. this pointer and does not point to marry or kevin owner, but point to marry and kevin variable itself. In fact, if you understand what Ladies Nike Blazers High Tops Leopard Print YellowB is a pointer, then you will know, since it is a pointer, then of course you can change the object to which it points. Javascript engine just does not allow us to write their own code to do such a thing, that is to say, in Javascript, you can not directly write code like this = someObj. Javascript engine in two ways allows us to explicitly specify this pointer refers to an object: 1 using the new operator, Javascript engine will return this pointer is assigned to variable A (corresponding to the above example is to marry and kevin variables) this time A and this pointer references is the same object, and that A == this. Process see above pseudo-code. 2. prototyping Function.apply or Function.call, we can refer to this pointer to an object as a parameter passed, this time, the internal function uses this pointer is passed in parameter. Note that in the case of this explicitly specify this pointer to guide the principles mentioned in the previous section is no longer applicable. The case is easy to misuse understand this pointer, we look at some of the cases it is easy to misuse this pointer. Example 1-- inline binding Dom element event handler \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; function sayHi () {alert (\u0026 quot; the current click the Nike Basketball element is \u0026 quot; + this.tagName); } \u0026 lt; / script \u0026 gt; \u0026 lt; input id = \u0026 quot; btnTest \u0026 quot; type = \u0026 quot; button \u0026 quot; value = \u0026 quot; click I \u0026 quot; onclick = \u0026 quot; sayHi () \u0026 quot; \u0026 gt; In this example code, we bind button click event, expected in the dialog box to print out the label name Click the element. But the operation result is: is this pointer is not pointing input elements. This is because the event inside when using inline bindings Dom element handler, in fact equivalent to executing the following code: \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; document.getElementById (\u0026 quot; btnTest \u0026 quot;). onclick = function () {sayHi ();} \u0026 lt; / script \u0026 gt; in this case the ownership sayHi function object and no transfer occurred, or is it all window. Using the above set of guiding principles that we well understand why the this.tagName is undefined. So if we want to refer to the elements themselves how to do it? We know, onclick function belongs to btnTest element, then the inside of this function, this pointer is the point to this Dom objects, so we just need this as an argument sayHi can. \u0026 Lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; function sayHi (el) {alert (\u0026 quot; the current click the element is \u0026 quot; + el.tagName);} \u0026 lt; / script \u0026 gt; \u0026 lt; input id = \u0026 quot; btnTest \u0026 quot ; type = \u0026 quot; button \u0026 quot; value = \u0026 quot; click I \u0026 quot; onclick = \u0026 quot; sayHi (this) \u0026 quot; \u0026 gt; equivalent code is as follows: \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; document.getElementById (\u0026 quot ; btnTest \u0026 quot;) onclick = function () {sayHi (this);}. \u0026 lt; / script \u0026 gt; Example 2 - temporary variable due to this loss of pointer \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var Utility = { decode: function (str) {return unescape (str);}, getCookie: function (key) {// ... code omitted extract cookie string var value = \u0026 quot; i% 27m% 20a% 20cookie \u0026 quot ;; return this .decode (value);}}; alert (Utility.getCookie (\u0026 quot; identity \u0026 quot;)) \u0026 lt; / script \u0026 gt; we write a little size Js library time, usually their own package a Utility class, and then some Utility commonly used functions as an attribute class, such as the client often used getCookie function and decoding function. If every functions are independent of each other, so also easy to handle, the problem is that sometimes function references to each other. For example, and then return after getCookie above were decode function, will be extracted from document.cookie into the string. If we go through Utility.getCookie call, then there is no problem, we know, getCookie inside this pointer or Utility object, Utility object contains properties of decode. Code can be executed successfully. But individuals do not accidentally use this Utility object? \u0026 Lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; function showUserIdentity () {// save getCookie function into a local variable, as the following will often use var getCookie = Utility.getCookie; alert (getCookie (\u0026 quot; identity \u0026 quot;) );} showUserIdentity (); \u0026 lt; / script \u0026 gt; this time to run the code will throw an exception 'this.decode is not a function'. We use the guidelines mentioned above, well understood, because the Utility.getCookie object is assigned a temporary variable getCookie, and temporary variables belonging to the window object - but not directly referenced outside, visible only to the Javascript engine - So in getCookie function inside this pointer is the window object, while the window object does not define a decode function object, so it will throw this exception. This problem is due to the introduction of the temporary variable shift caused by this pointer. To resolve this issue there are several ways: without introducing temporary variables, use the Utility.getCookie each use getCookie internal function call using Utility.decode explicit reference decode object without implicit reference by this pointer (if Utility is an instance of the objects, that is generated by the new, so this method is not available) or use Funtion.apply Function.call function to specify this better than the previous two pointer understanding, the third need to mention. It is precisely because this pointer points to easily be transferred lost, so Javascript provides two functions apply similar and call to allow the function when calling again explicitly specified this pointer. Correction code is as follows: Nike Air Max 2011 Men \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; function showUserIdentity () {// save getCookie function to a local variable, as the following will often use var getCookie = Utility.getCookie; alert (getCookie.call (Utility, \u0026 quot; identity \u0026 quot;)); alert (getCookie.apply (Utility, [\u0026 quot; identity \u0026 quot;]));} showUserIdentity (); \u0026 lt; / script \u0026 gt; call and apply only differences in syntax, there is no function of difference. Example 3-- when the function parameter passing result of this loss of pointer we look at a problem Code: \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var person = {name: \u0026 quot; Kevin Yang \u0026 quot ;, sayHi: function Nike Air Jordan 6 Women ( ) {alert (\u0026 quot; Hello, I was \u0026 quot; + this.name);}} setTimeout (person.sayHi, 5000); \u0026 lt; / script \u0026 gt; This code is expected to hit the visitors Visitors enter the page after 5 seconds say hello. Mens Nike Free 3.0 V2 Shoes Grey Orange setTimeout function takes a function as a parameter, and perform this function at a specified trigger moment. But when we had to wait five seconds after, this.name pop-up dialog box that appears is undefined. In fact, this and the previous example the problem is similar, are caused because of the temporary variable. When we execute a function, if the function with parameters, so this time Javascript engine creates a temporary variable and passed parameter copy (attention, Javascript which are passed by value, does not refer to the concept of transitive) to Air Jordan Outlet this temporary variables. In other words, the whole process just above we define a temporary variable getCookie and then Utility.getCookie this temporary assignment to the same variable. Only in this case, it is easy to overlook the temporary variable cause of the bug. The Senate function object passed as a parameter to a function pointer is lost due to this problem, there are many frameworks already there are ways to solve. Prototype solutions - use before the Senate bind method will function package together, and returns the object encapsulated \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var person = {name: \u0026 quot; Kevin Yang \u0026 quot ;, sayHi: function () {alert (\u0026 quot; Hello, I was \u0026 quot; + this.name);}} var boundFunc = person.sayHi.bind (person, person.sayHi); setTimeout (boundFunc, 5000); \u0026 lt; / script \u0026 gt ; to achieve bind method actually uses Javascript another advanced feature - closures. Let's look at the source code: function bind () {if (arguments.length \u0026 lt; 2 \u0026 amp; \u0026 amp; arguments [0] === undefined) return this; var __method = this, args = $ A (arguments), object = args.shift (); return function () {return __method.apply (object, args.concat ($ A (arguments)));}} First, this pointer is stored in a temporary variable inside a function, then the function returns an object This temporary variable is referenced to form a closure. Microsoft Ajax library programs - Construction of the delegate object \u0026 lt; script type = \u0026 quot; text / javascript \u0026 quot; \u0026 gt; var person = {name: \u0026 quot; Kevin Yang \u0026 quot ;, sayHi: function () {alert (\u0026 quot; Hello, I is \u0026 quot; + this.name);}} var boundFunc = Function.createDelegate (person, person.sayHi); setTimeout (boundFunc, 5000); \u0026 lt; / script \u0026 gt; in fact essentially the prototype approach is the same. Extjs famous library solution uses the techniques and Microsoft is the same. DetailedJavascript in this indicator