This point of JavaScript OOP

Today to share a JavaScript oop in the resolution of this point to the object of the small tricks, very practical yo!

Let's look at a piece of code first:

We can judge the Func (); and Obj.func (); Is this the two sentences?

first of all, we all know that the point of this is the object that ultimately calls the function. But can you clearly judge the object of the function that is finally called?

However, there are a few points to note:

①this points to who should not consider where the function is declared, but should consider where the function is called!

②this points to an object that is always possible, and cannot be a function.

The object that ③this points to, called the context of the function, is also called the function's caller.  

What is contextual context?

Often see a lot of documents have a reference to the context, but are not too good to understand. Believe that many people are confused. Now try to write your own understanding, also sort of comb.

Context--I understand it as the current operating environment, when the program runs, each statement of the program has a corresponding context, that is, the running environment.

You can imagine the statement before execution: There is a context object, the name is a context, the contextual object is a Window object, that is: context = window.

The function func () is called directly, when the context object in the function body is window.

Object obj invokes the Func function, which is: Obj.func (), the context object within the function body is the Window.obj object.

The value of this is the context object to which the context corresponds when it runs to the this Code location. The function definition is not running the Console.log (this) statement, so the function definition is the object that this point is not yet defined, its value is undefined, it needs to be executed when the function is called, the edge is interpreted, execution Console.log (this) Subset parsing the calling function is the context. Finally determine the value this is pointing to.

Let's take a look at more of the situation, summarize more laws, let everyone face this no longer confused:

"Next, let's take a detailed look at the

① is called through the function name (), this always points to window. Is the first call to Func () of the above example;

Results (window)

② through the object. Method call, this object is pointed to. This is the second method of invocation of the above example Obj.func ();

Result (obj)

The ③ function is present as an element in the array, called with an array subscript, which points to the array.

Result (array arr)

The ④ function is used as a callback function for window built-in functions, this points to window .

Results (window)

The ⑤ function is called as a constructor using the new keyword, which points to the newly-created object.

Results (OBJS)

"Differentiate" adds a div to the HTML, adding a click event to the Div.

<DivID= "Div1"style= "width:200px;height:200px;background-color:red;"onclick= "Func (this)">This is a div</Div><Scripttype= "Text/javascript">Window.onclick= function() {document.getElementById ("Div1"). onclick= function() {func (); //Finally, the () call is used to point to the window} document.getElementById ("Div1"). onclick=func; //generalized objects are passed through the object. Method call, this point to this object}functionfunc () {Console.log ( This); }</Script>                    

The law we summed up, the next two topics to practice practiced hand it!

First one:

functionfunc () {Console.log ( This); }varObj1 ={name:"Obj1", arr: [Func,1,{name: "Obj2", Func:func},3,settimeout (func,1000)],
}//the object is taken to the array, and then the function is called through the subscript of the array, eventually pointing to the array. this, Obj.arrObj1.arr[0](); //Obj1.arr[0]: The purpose is to take the Func, settimeout as a callback function, equivalent to settimeout (func,2000). This, windowSetTimeout (obj1.arr[0],2000); obj1.arr[2].func ();//Final Caller {name: "Obj2", Func:func} belongs to ② caseSetTimeout (obj1.arr[2].func,2000);//The final caller is settimeout, ibid.

The results are shown as follows: (three time delay functions are called, including one automatic call)

Second one:

    varFullName = ' John Doe '; varobj ={fullname:' Colin Ihrig ', prop: {fullname:' Aurelio De Rosa ', Getfullname:function() {                 return  This. FullName;        }           }        };  Console.log (Obj.prop.getFullname ()); //The final caller of the function Obj.prop                varTest =Obj.prop.getFullname;       Console.log (Test ()); //The final caller of the function test () this-> windowObj.func= Obj.prop.getFullname;//Append method to objConsole.log (Obj.func ());//function Final caller is obj                vararr = [obj.prop.getfullname,1,2]; Arr.fullname= "Traceyw"; Console.log (arr[0] ());//function Final caller array            

The results are shown below:

Summing up, this point of the law, you can find that this law is related to the way the function is called:

① is called through the function name (), this always points to window.

② through the object. Method call, this object is pointed to.

The ③ function is present as an element in the array, called with an array subscript, which points to the array.

The ④ function is used as a callback function for the window's built-in function, which points to window. such as SetInterval, setTimeout ...

The ⑤ function is called as a constructor using the new keyword, which points to the newly-created object.

It's very useful, take it!

There is a need for attention yo ~ ~ Small w will often update tips! If there is not perfect place, please shoot bricks! Crab Crab ~ ~

This point of JavaScript OOP