Parsing the mystery of this in Javascript

Foreword: this is a relatively special keyword in JavaScript. The wide range of applications and the flexibility of the method make it powerful, but at the same time it is doomed. 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 function is called, the main function call in JavaScript There are several ways:

Call as a normal function

Call as an object method

Call as a constructor Use apply Or call


1. Call as a normal function

------This is our most commonly used method, this calling method belongs to the global Call, this here refers to the global object

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

As shown above: a function defined globally, the owner of the function is the current page, That is
window object
, so the calling object of example() is Window, so this inside represents Window;Another way of writing:

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

As shown above: a
variable
a is also declared inside the test() function, but the result of calling test() is 5, indicating that the this representation inside the function at this time The global object is Window; and then write it another way:

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

As shown above: Call the test() function and change the global variable The value of a indicates 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 a
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 of type
object class
through the new keyword and assign it For dog, if you execute this constructor, this in the constructor Function scope points to this object, here it points to dog, so this.name is equal to dog.name, so the output result is bean bean.
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 detailed content of Parsing the mystery of this in Javascript. For more information, please follow other related articles on the PHP Chinese website!