“This is the 29th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Today we will summarize the binding rules for this.

  • Rule 1: Default binding
  • Rule 2: Implicit binding
  • Rule 3: Display bindings
  • Rule 4: New binding

This article covers rule 1 default binding and Rule 2 implicit binding.

Rule 1: Default binding

When is the default binding used? Independent function calls.

An independent function call can be understood as a function that is not bound to an object to be called, that is, the function does not call the topic.

Let’s look at a couple of cases.

Case a

function foo() {
  console.log(this);
}
foo()
Copy the code

Let’s look at some other ways.

Case 2

Let’s think about what the three this’s in this code refer to.

function foo1() {
  console.log(this);
}

function foo2() {
  console.log(this);
  foo1()
}

function foo3() {
  console.log(this);
  foo2()
}

foo3()
Copy the code

Foo1, foo2, and foo3 are called separately from info.foo1().Case 3

var obj = {
  name: 'haha'.foo: function() {
    console.log(this); }}var bar = obj.foo
bar()
Copy the code

When we call foo, we call it separately, so this refers to window.

Four cases

function foo() {
  console.log(this);
}
var obj = {
  name: 'haha'.foo: foo
}
var bar = obj.foo
bar()
Copy the code

Case 5

function foo() {
  function bar() {
    console.log(this);
  }
  return bar
}
var fn = foo()
fn()
Copy the code

Next, let’s change the way we call fn in case 5 instead of calling fn directly.

var obj = {
  name: 'haha'.eating: fn
}
obj.eating()
Copy the code

We can see that this refers to an obj object because this is implicitly bound. Let’s conclude.

Rule 2: Implicit binding

Another common way to call is through an object. That is, where it is called, is a function call from an object.

We have an object and call it with Object.fn (). The object is bound to the fn function this by the JS engine. The JS engine automatically helps us bind, so we call it implicit binding.

Case a

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

var obj = {
  name: 'haha'.foo: foo
}

obj.foo()
Copy the code

Case 2

var obj = {
  name: 'haha'.eating: function() {
    console.log(this.name + 'At dinner');
  },
  running: function() {
    console.log(this.name + 'Running');
  }
}

obj.eating()
obj.running()
Copy the code

In this case, since obj calls the eating and running methods, the obj object to which this points is implicitly bound. In the last article, we saw that changing this to obj in log also gets the name property in the obj object.

What happens if we modify the call method?

var fn = obj.eating
fn()
Copy the code

This refers to the window, and the window object itself has a name attribute, but name has no value.

Print the Window object.

Case 3

var obj1 = {
  name: 'obj1'.foo: function() {
    console.log(this); }}var obj2 = {
  name: 'obj2'.bar: obj1.foo
}

obj2.bar()
Copy the code

When foo is called, it’s called by obj2, and obj2 is automatically bound to this in Foo, so this in Foo refers to obj2.