Four ways to use this in javascript_javascript skills

this

When a function is executed, this always points to the object that called the function. To determine where this points, you actually need to determine who the function this belongs to.

In the book "The Essence of JavaScript Language", the scenarios where this appears are divided into four categories. To put it simply:

If there is an object, point to the calling object
Point to the global object without calling the object
Constructed with new, it points to the new object
Change the reference of this through apply or call or bind.

1) When the function has an object it belongs to: point to the object it belongs to

When a function has an object to which it belongs, it is usually called through a . expression, in which case this naturally points to the object to which it belongs. For example, the following example:

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

 // 输出 { value: 100, getValue: [Function] }，
 // 其实就是 myObject 对象本身
 console.log(this);

 return this.value;
};

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

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

2) The function has no owning object: points to the global object

var myObject = {value: 100};
myObject.getValue = function () {
 var foo = function () {
  console.log(this.value) // => undefined
  console.log(this);// 输出全局对象 global
 };

 foo();

 return this.value;
};

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

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

It is said that this is a design error.

3) this in the constructor: points to the new object

In js, we call the constructor through the new keyword, and this will be bound to the new object.

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

var myCreate = new SomeClass();

console.log(myCreate.value); // 输出100

By the way, in js, there are no clear boundaries between constructors, ordinary functions, object methods, and closures. The boundaries are all in the human heart.

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

The apply() method accepts two parameters. The first is the scope in which the function runs, and the other is a parameter array (arguments).

The meaning of the first parameter of the call() method is the same as that of the apply() method, except that the other parameters need to be listed one by one.

To put it simply, the method of call is closer to how we usually call functions, while apply requires us to pass an array in the form of Array to it. They are interchangeable.

var myObject = {value: 100};

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

foo(); // 全局变量 global
foo.apply(myObject); // { value: 100 }
foo.call(myObject); // { value: 100 }

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

That’s all the content of this article, I hope you all like it.