Detailed Introduction to JavaScript this

The value of this is determined at runtime

What does this represent in JavaScript, which is determined according to the context at runtime, can be divided into the following cases.

1. The this in the global scope

In the global scope, this points to the window object.

console.log(this);//points to the window object
this.x = 5//Create a x in the global scope
//and this.x = 5equivalent to:
//var x = 5;
//x = 5;

Execute var x= in the global scope5In fact, it creates an attribute x for the window object and sets it equal to5.

If a variable is not defined with var, JS will consider it as a global variable and treat it as an attribute of the window object.

2. The this in a function

There are two types of functions in JS: functions called directly are called normal functions, and functions created by new are called constructor functions.

2.1 The this in a constructor

The this in a constructor points to the object it creates, such as:

function Person(name) {
  this.name = name;//this points to the object created by the function, person

var person = new Person("chaimm");

2.2 The this in a normal function

The this in a normal function points to the window object.
If the above example is executed directly, then this inside the Person function represents the window object, so a global name will be created after the function is executed.

function Person(name) {
  this.name = name;//this points to the window

Person("chai");//When executed as a normal function, this points to the window object

3. The this in an object

The this in an object points to the current object, such as:

var person = {
  name: "chaimm",
  getName: function() {
    return this.name;
  

In the above code, this points to the object that the getName function belongs to.

However, if a function inside an object's function points to the window instead of its outer object.

var person = {
  name: "chaimm",
  setName: function(name) {
    (function(name) {
      this.name = name; //At this time, this does not represent the person object, but represents the window object
    })(name);
  

In the above example, the person object has a getName function, and there is also a function inside the getName function, and the this inside the function points to the window object, not the person object, which is a bug in JS! Generally, the following processing is used to avoid this bug:

var person = {
  name: "chaimm",
  setName: function(name) {
    var thar = this;//Assign this to that
    (function(name) {
      that.name = name;//At this time, that points to the person object
    })(name);
  

In the first-level function of the person object, we assign this to the local variable that, and then use that in the second-level function, at this time that points to the person object and can operate on the person's properties.

Note: If a function in an object is assigned to a variable and then called through that variable, at this time the function's this points to the window, not the object, as shown below:

var person = {
  name: "chaimm",
  getName: function() {
    return this.name;
  

//Assign the getName function to a new variable
var newGetName = person.getName;
//Call this function through a new variable, and the this in this function will point to window
newGetName();//If there is no name in the global scope, it will return undefined

4Hook this with call and apply functions

Both functions can manually specify which object the called function's this points to.

//Define a constructor function
var Person = function(name){
  this.name = "";
  this.setName = function(name){
    this.name = name;
  

//Create two objects
var personA = new Person("A");
var personB = new Person("B");
//Use the setName function of personA to modify the name property of personB
personA.setName.apply(personB, ["C"]);

apply usage

objectA.函数名.apply(对象B, 参数列表);
When object B is passed as the first parameter to apply, the this in the function of object A points to object B. At this time, the operation of this in the function of object A will take effect on object B, thereby realizing the calling of the function of object B by object A.

This is the summary of the information about 'javascript this', and more related information will be supplemented later. Thank you for your support to this site!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume any relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report abuse, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)