This is essential in js and is used in many places. However, when it is used, it often puzzles who this is pointing to? Why point to this place? Today, according to your own understanding, record several rules pointed to by this.

Default binding

function foo() {
    console.log(this);  // window
}
foo();

function foo() {
    console.log(this); // window
}

function bar() {
    foo();
}
bar();

console.log(this); // window

• Print this under the global scope, then this points to window;
• When we test and print this in the browser, we also point to the window;
• The foo function is executed by running the bar function. In fact, there is no object binding when running. At this time, this still points to the window, so it also points to the window in the following cases

function foo(fn) {
  fn()
}

var obj = {
  message: "Hello This",
  bar: function() {
    console.log(this); // window
  }
}

foo(obj.bar);

Implicit binding

To call a function through an object:

function foo() {
    console.log(this); // obj object
}

var obj = {
    message: "Hello This";   
    foo: foo
}

obj.foo(); 

From the above figure, we can see that the call location of foo is called through obj.foo(), so this will be implicitly bound to the obj object at this time.

Show bindings

Display binding can be performed through call, apply and bind. The following three examples are given to illustrate respectively

• call

function foo() {
    console.log(this); // object {message: "Hello This"}
}

foo.call({message: "Hello This"})

• apply

function foo() {
    console.log(this); // object {message: 'Hello This'}
}

foo.apply({message: 'Hello This'})

          From the above, we can see that both call and apply are used in the same way; The difference between them is that they transfer parameters in different ways. Let's take an example:

function foo() {
    console.log(arguments); // [1, 2, 3]
    console.log(this); // obj object
}

var obj = {
    message: 'Hello This'
}
foo.call(obj, 1, 2, 3);
foo.apply(obj, [1, 2, 3]);

        As can be seen from the above, the first parameter of call and apply is used as the bound this; Call is followed by parameters, and apply needs to write parameters in the array; What these two have in common is that they will be implemented immediately.

• bind

          bind is a little more special than the above two. In fact, it is implemented in a way of closure. Here is an example

function foo() {
    console.log(arguments); // [1, 2, 3]
    console.log(this);  // obj object
}

var obj = {
    message: 'Hello This';
}
const fn = foo.bind(obj, 1, 2, 3)
fn();

        It can be seen that binding this through bind will return a new function, and the subsequent parameters will be used as the parameters of the new function. At this time, fn will be permanently bound to the obj object. Whenever it is executed, the point of this will point to the obj object.

new keyword binding

         In js, the function can be used as a constructor, so this time is equivalent to creating a new object, and the new object will be bound to this of the function, for example:

function foo(message) {
  console.log(this); // foo {}
  this.message = message; // foo {message: "Hello This"}
}

var obj = new Foo("Hello This");
console.log(obj);

other:

          For example, the this point in the settimeout we often use basically points to the window.

Summary:

         The binding rules of this are the above, and the priority of these rules is:   new binding > bind > implicit binding > default binding.

         A simple record is not comprehensive enough, ha ha!