Explore the mystery of this in Javascript

Foreword: this is a relatively special keyword in JavaScript. Its wide range of applications and flexible methods make it powerful, but at the same time it is destined to be difficult to use . When I first started learning it, I was very confused. I looked up a lot of information in order to fully understand it. Then I organized what I learned and expressed it in an easy-to-understand way. It can be used as study notes and as a reference for children in need^_^

What is this ?

The meaning of this keyword is clear and specific, that is, it refers to the current object. This means that this is only true under certain relative circumstances.

This is divided into three situations: global object, current object or any object; judging which situation it is in depends entirely on how the function is called. The main function calls in JavaScript have the following methods:

Called as a normal function

Called as an object method

Called as a constructor

Called using apply or call

1. Call as a normal function

------This is our most commonly used method. This calling method is a global call, and this here refers to the global object

function test(){
 this.a = 5;
 alert(this.a);
 alert(this);
}
test(); // 5 [object Window]

As shown above: for a function defined globally, the owner of the function is the current page, which is the window object, so the calling object of example() It is Window, so this here represents Window;

Another way of writing:

var a = 5;
function test(){
 var a = 10;
 alert(this.a);
}
test(); //5

As shown above: test() function A variable a is also declared internally, but the result of calling test() is 5, which means that this inside the function represents the global object, that is, Window;

Writing it another way:

var a = 5;
function test(){
 this.a = 10;
}
test();
alert(a); //10

As shown above: The test() function is called and the value of global variable a is changed, indicating that this represents the global object at this time.

2. Calling as an object function

------When the function is called by an object, this points to the object at this time

var name="张三";
 var person={
  name:"李四",
  showName:function(){
   alert(this.name);
  }
 }
 person.showName(); //输出 李四
 var other=person.showName;
 other(); //输出 张三

As shown above: the result of executing person.showName() is Li Si, indicating that this in showName points to person at this time;

After assigning person.showName to other, because other is a global variable, it can be regarded as an attribute of the window object. So when calling other(), it is equivalent to calling window.other(), so this points to the window, and the output result is Zhang San;

So when called as a function object, this points to the object of the call. .

3. Call as a constructor

------The constructor is to generate a new object (object) through this function, and this will point to this New object;

function animal(){
 this.name = "豆豆";
}
var dog = new animal();
alert(dog.name); // 输出 豆豆

As shown above: generate an object type object through the new keyword and assign it to dog, execute this constructor Yes, this in the constructor scope points to this object, in this case it points to dog, so this.name is equivalent to dog.name, so the output result is Doudou.

4. Use apply or call to call

------apply() is a method of the function object. It applies one method of a certain object and uses another Object replaces the current object.

var a = "张三";
function test(){
 alert(this.a);
}
var b = {};
b.a = "李四";
b.n = test;
b.n(); //李四
b.n.apply(); //张三
b.n.apply(b); //李四

As shown above: b.n()----Because the calling object is b, this points to b, this.a = = b.a , so the result is Li Si;

　b.n.apply----When the parameter of apply() is empty, there is no object to replace the current object, and the global object is used by default, so this points to window, the result For Zhang San;

b.n.apply(b)----refers to replacing the current this point with b, so this points to b, and the result is Li Si

(This article refers to the Internet If there are any errors in the materials and some books, you are welcome to point them out and they will be corrected in time. O(∩_∩)O)

Summary: This article introduces the JavaScript in The examples of the meaning of this keyword in various situations are very simple, which can help deepen understanding. Although this is only a small concept in JavaScript, we can use this to understand the execution environment of functions in JavaScript. Fully mastering the relevant knowledge of this will help us be able to write object-oriented JavaScript programs with ease. Finally, thank you for watching.

The above is the content of exploring the mystery of this in Javascript. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!