Four USES of this in javascript

this

During function execution, this always points to the object calling the function. To determine the direction of this is to determine which function this belongs to.

In the book The Essence of javaScript language, the scenes of this are divided into four categories. To put it simply:

If there is an object, it points to the calling object
It points to the global object without calling it
The new construct points to the new object
Change the meaning of this by apply or call or bind.

1) When the function has the owned object: points to the owned object

When a function has an object to which it belongs, it is usually called through an. Expression, where this naturally points to the object to which it belongs. Take the following example:

var myObject = {value: 100};
myObject.getValue = function () {
 console.log(this.value); //  The output  100

 //  The output  { value: 100, getValue: [Function] } . 
 //  In fact, is  myObject  The object itself 
 console.log(this);

 return this.value;
};

console.log(myObject.getValue()); // => 100

getValue() belongs to object myObject and is called by myOjbect. Therefore, this points to object myObject.

2) Function has no subordinate object: points to global object

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);//  Output global object  global
 };

 foo();

 return this.value;
};

console.log(myObject.getValue()); // => 100

In the above code block, the foo function, although defined within the function body of getValue, is actually neither getValue nor myObject. foo is not bound to any object, so its this pointer points to the global object global when invoked.

It's said to be a design mistake.

3) this in constructor: points to the new object

In js, we call the constructor with the new keyword, at which point this is bound to the new object.

var SomeClass = function(){
 this.value = 100;
}

var myCreate = new SomeClass();

console.log(myCreate.value); //  The output 100

By the way, in js, constructors, ordinary functions, object methods, and closures are not clearly defined. Boundaries are in the heart of man.

4) apply and call calls and bind binding: points to the bound object

The apply() method takes two arguments -- the first is the scope in which the function is run and the other is an array of arguments (arguments).

The first parameter of the call() method has the same meaning as the apply() method, except that the other parameters need to be enumerated individually.

In short, call is much closer to the way we normally call functions, and apply requires us to pass an array in the form of Array to it. They're interchangeable.

var myObject = {value: 100};

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

foo(); //  The global variable  global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

var newFoo = foo.bind(myObject);
newFoo(); // { value: 100 }

This is the whole content of this article, I hope you can like it.