The point of this in the JS function

Source: Internet
Author: User

This is my personal understanding of this point, if there are shortcomings, but also hope that you can criticize correct, in this first thanked!

First, let's review some of the ways in which ES5 functions are called:

1?? Call directly

2?? Method Invocation

Obj.foo ();

The above two methods of invocation, the point of this can be determined: the function of the caller is the point of this!

For example Obj.foo (); foo () in front of obj is the caller, so this is the pointer to obj, and the directly called Foo () is equivalent to Window.foo (), so the above two methods of invocation of this point is obvious, 1?? This is the window,2?? This is the obj

Give me a chestnut:

1. About Direct invocation

function foo () {  Console.log (this)}foo ()

This foo () is equivalent to Window.foo (), so the point of this is window

2. About method Invocations

var obj = {  foo:function () {    Console.log (this)  }}obj.foo ();
The caller of Foo here is obj, so the point of this is obj .

3?? Call/apply

Obj.foo.call (Context,parma)/obj.apply (Context,[parma]);

About the call/apply call, who the context is, this is who it is pointing to. It is important to note that when the context value is undefined/null, this points to the point of Window,this or Undefined/null.

Believe to see here, we should have a certain understanding of the point of this, and finally come to all the people think it is very disgusting for us beginners a chestnut:

function fn () {Console.log (this)};
function fn2 () {Console.log (this)};var arr = [FN, fn2]arr[0] ();
I wipe, this also has no dot syntax (that is, Obj.foo ()) call, it looks like Foo () This call method, then its this point is window? Ma Egg, in fact not, it's this point to arr, then why?
First arr is an array, and an array is also an object, that is, obj, there are two ways to access obj internal elements [] syntax and. syntax, that is, Obj[key] and Obj.key, and the index inside the array can be seen as a key in obj, so here, Is it not a point syntax call? Then we will give him a bit of grammar, that is, arr.0 (), and finally it is not difficult to understand that this is the point of arr, but remember, the contents of the array can only be accessed Arr[index] syntax, the actual application never write Arr.index!!! This is just for the convenience of understanding.

Summary:

1.call/apply call mode from needless to say, this point is the context value, remember when the context value is undefined/null, this point is window,this point or undefined/null. ;

2.obj.foo (); The this point is obj

3. Call Foo directly (); Convert to point syntax call is Window.foo (); So the point of this is window;

4. The most disgusting is the kind that seems to be Foo (), and at this point we must find a way to convert it into a dot grammar to help us find this point (like the chestnut above).

5. If it is a large string of point syntax calls, like this Obj1.obj2.obj3.foo (); All we need to do is look at the last obj from Foo, the one in this chestnut is pointing to obj3;

In short, there are more routines we don't have to worry about, as long as you see who is the last call of the function, the this in the function to point to WHO!!!

Finally, I wish you all no longer be confused by this point!!!

  

The point of this in the JS function

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.