Javascript-this points to and binds to rules

This is the first article I participated in beginners’ introduction

This is a keyword in JavaScript, which is more flexible in terms of where it appears and what it represents than in traditional object-oriented languages. Before we get there, let’s look at the case where we don’t use this.

Basic use of this

Now there is a requirement to output some information in the object’s methods, as follows
```
var obj = {
  name: "zhangsan".run: function () {
    console.log(obj.name + " run");
  },
  study: function () {
    console.log(obj.name + " study"); }};Copy the code
```
Disadvantages of the above code: If you change the obj name to info, then obj.name in all methods needs to be changed to info.name
In real development, we would optimize with this keyword, as follows
```
var obj = {
  name: "zhangsan".run: function () {
    console.log(this.name + " run");
  },
  study: function () {
    console.log(this.name + " study"); }};Copy the code
```
After the above modification, the dependency on variable names is decoupled from the method through the this reference. When you change the name of an object variable, you do not need to change the name referenced in the method.

This point

What does this point to in the global scope?

console.log(this); // window

var name = "zhangsan";

console.log(this.name); // zhangsan

console.log(window.name); // zhangsan

console.log(this= = =window); // true
Copy the code

In the browser environment, in the global scope, this points to the window

In real development, this is rarely used directly in the global scope; it is usually used in functions. When a function is called, an execution context is created for recording

Function call stack, call method, incoming parameters, etc
This is also one of those properties

Defining a function, calling it in three ways, produces three different results

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

foo(); / / the window object

var obj = {
  name: "zhangsan".foo: foo,
};

obj.foo(); // {name: "zhangsan", foo: ƒ}

foo.call("lisi"); // String {"lisi"}
Copy the code

When the function is called, JavaScript will default tothisBind a value
thisThe binding is independent of the position of the function definition
thisThe binding of is related to how and where a function is called
thisIs bound at run time

So what are the binding rules for this?

This binding rule

1. Default binding

A stand-alone function call can be understood as a call to a function that is not bound to an object

Case 1: Plain function calls

Function is called directly with no object associated
This independent function call uses the default binding. Normally, this in the function refers to the global object (window).
```
function foo() {
  console.log(this); // window
}

foo();
Copy the code
```

Case 2: Function call chain

None of the function calls are bound to an object

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

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

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

foo();
Copy the code

Case 3: Call a function as an argument to another function

Pass a function as an argument to another function and call it directly from another function

function foo(fn) {
  fn();
}

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

foo(bar);
Copy the code

Case 4: Pass a method on an object into another function for a call

Pass a method in an object to another function, which calls it directly
```
function foo(fn) {
  fn();
}

var obj = {
  name: "zhangsan".bar: function () {
    console.log(this); // window}}; foo(obj.bar);Copy the code
```
- The reason why this is a window in the above example is that it is an independent function call without being associated with the object where the function is actually called

2. Implicit binding

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

Case 1: Calling a function from an object

Foo’s call location isobj.foo()Method to be called
Foo’s this is bound to the obj object

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

var obj = {
  name: "zhangsan".foo: foo,
};

obj.foo();
Copy the code

Case 2: A multi-layer object calls a function

Obj1 is referenced by obj2, and foo is called by obj1 object
Foo’s this is still bound to obj1

function foo() {
  console.log(this); // obj1
  console.log(this === obj1); // true
}

var obj1 = {
  name: "zhangsan".foo: foo,
};

var obj2 = {
  name: "zhangsan".obj1: obj1,
};

obj2.obj1.foo();
Copy the code

Case 3: Implicit loss

Foo is called from bar, which is not bound to any object and is a separate function call.

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

var obj = {
  name: "zhangsan".foo: foo,
};

var bar = obj.foo;

bar();
Copy the code

The prerequisite for implicit binding is

There must be a reference to the function inside the called object
Without such a reference, an error is reported when the call is made that the function was not found
It is this reference that binds this indirectly to the object.

If you don’t want this property inside an object and you want to force a call on the object, you can explicitly bind it with call() and apply()

3. Explicit binding

All JavaScript functions can use the Call and apply methods

The difference is the second parameter. Call is an argument list and apply is an array.
The first argument to both is the this object bound to when the function is called

Case 1: Bind this with call and apply

When explicitly bound, this will explicitly refer to the bound object

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

var obj = {
  name: "zhangsan"}; foo.call(window); // window
foo.call(obj); // obj {name: "zhangsan"}
foo.call("lisi"); // String {"lisi"}
Copy the code

Case 2: Through the bind function

After binding this with bind, we call the function returned by bind, whose this is always an argument passed into bind

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

var obj = {
  name: "zhangsan"};var bar = foo.bind(obj);

bar(); // obj {name: "zhangsan"}
bar(); // obj {name: "zhangsan"}
Copy the code

4. New binding

Functions in JavaScript can be used as constructors of a class with the new keyword. When a function is called with the new keyword, it does the following:

Create a new object
This new object performs a Prototype connection
The new object is bound to the function call’s this
If the function returns no other object, the new object is returned

function Person(name) {
  console.log(this); // Person {}
  this.name = name;
}

var p = new Person("zhangsan");

console.log(p); // Person {name: "zhangsan"}
Copy the code