What are the ways to use this in javascript?

How to use this in JavaScript: 1. When the function has an object, it points to the object; 2. When the function does not have an object, it points to the global object; 3. This in the constructor points to the new object.

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

How to use this in javascript:

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

The function has an object it belongs to When an object is used, it is usually called through an expression. In this case, this naturally points to the object it belongs to. 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, in fact it is both Does not belong to 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 on new objects.

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 one is the function of running the function. domain, and the other is an array of parameters (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 call method 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 }

Related free learning recommendations: javascript video tutorial

The above is the detailed content of What are the ways to use this in javascript?. For more information, please follow other related articles on the PHP Chinese website!