The problem with this point in JavaScript

To learn JavaScript is not an easy task, and this is one of the barriers, especially in the use of JS for object-oriented development.

In fact, it's not easy to get a thorough understanding of this point, and in the book, "You Don't know the volume of JavaScript," It takes a lot of detail to summarize the four points of this scenario. I finally figured this out in a hard-to-read book and a lot of reading about JavaScript advanced programming, blog posts, and a lot of practice. Indeed, some knowledge needs to be verified, understood, summed up, until enlightened, and constructed into its own theoretical system.

Then enter the text:

This in JavaScript can generally be divided into four scenarios:

1. function call;
2. method invocation;
3. constructor call;
4. Indirect invocation.

1. Function calls

In non-strict mode, when a function is called, the This within the function defaults to window.

function fn () {
Console.log (this);
}
FN ();//Function call this---  window

2. Method invocation

A method invocation is a function that is defined as a property (method) of an object, and with [object]. Method () is called in the form of the inside of the function that points to the [object] itself.

For example:

var obj={    fn:function () {
        Console.log (this);
    }}
Obj.fn ();//Method call this--and  obj

In some cases, a function call may be mistaken for a method call.

For example:

var obj={    fn:function () {
Console.log (this);
}};

function Foo (callback) {callback ();} Foo (OBJ.FN);//click on Trigger, Print: Window

There may be confusion about the result of the above code, which is actually a function call as a function of the callback function. Obj.fn is not a method call, but instead stores the address of a function and becomes an argument.

3. Constructor invocation

The so-called constructor call, that is, when the function creates an instance with the New keyword, this within the function points to the newly created instance.

For example:

function Person (name) {this.name=name;}
var p=new person (' Bob ');//The constructor invokes the function when it executes this--and  p
Console.log (p.name);//' Bob '

4. Indirect calls

This method of function invocation requires two methods: Call () or apply ().

Syntax: [function].call (obj,arg1,arg2,...) or [function].apply (obj,[arguments])

When call () or apply () is invoked through a function, this is explicitly specified in the function to point to the first parameter, obj, which is often used to borrow from other object methods.

For example:

var obj1={name: ' Xiaoming ',
Say:function () {
Console.log (this.name);
}
};
var obj2={
Name: ' Little Red '
}；
Obj1.say ();//Method call this--obj1   print Result: xiaoming
Obj1.say.call (OBJ2);//Indirect call this--  obj2   print result: Little Red

Second, there is one more way bind () can also force the this of a function to point to an object.

Syntax: [function].bind (obj)

Return value: The copy of the function that will always point to obj

The bind () method differs from call (), apply (): Bind () does not immediately execute the function, but instead returns a copy of the function.

Specific role Please poke a powerful bind method

In fact, there is a very special situation:

function as the callback function for the event, the this inside of the function points to the object bound by the event.

The problem with this point in JavaScript