What is 'this' in JavaScript?

Core points

• this in JavaScript usually refers to an object that "owns" the method, but it depends on how the function is called.
• When there is no current object, this refers to the global object. In a web browser, it is represented by window.
• When calling a function, this keeps the global object; but when calling the object constructor or any of its methods, this refers to an instance of the object.
• You can change the context of call() using methods such as apply(), bind() and this. These methods call the function using the given this value and parameters.

JavaScript is an excellent programming language. This sentence may have been controversial a few years ago, but developers have rediscovered its beauty and elegance. If you don't like JavaScript, it may be because:

• You have encountered differences or problems with the browser API - this is not the fault of JavaScript itself.
• You compare it to a class-based language such as C, C#, or Java—and JavaScript does not behave as you expected.

this Keywords are one of the most confusing concepts. In most languages, this is a reference to the current object that instantiates. In JavaScript, this usually refers to an object that "owns" the method, but it depends on how the function is called.

Global scope

If there is no current object, this refers to the global object. In a web browser, it is a top-level object that represents documents, locations, history, and some other useful properties and methods. window

window.WhoAmI = "我是 window 对象";
alert(window.WhoAmI);
alert(this.WhoAmI); // 我是 window 对象
alert(window === this); // true

Calling the function

If you are calling a function,

Keep the global object: this

window.WhoAmI = "我是 window 对象";

function TestThis() {
    alert(this.WhoAmI); // 我是 window 对象
    alert(window === this); // true
}

TestThis();

Calling the object method

When calling an object constructor or any of its methods,

refers to an instance of an object—just like any class-based language: this

window.WhoAmI = "我是 window 对象";

function Test() {
    this.WhoAmI = "我是 Test 对象";

    this.Check1 = function() {
        alert(this.WhoAmI); // 我是 Test 对象
    };
}

Test.prototype.Check2 = function() {
    alert(this.WhoAmI); // 我是 Test 对象
};

var t = new Test();
t.Check1();
t.Check2();

Use or callapply Essentially,

and

run JavaScript functions as if they were another object's method. A simple example can be further explained: call apply

The only difference is that

function SetType(type) {
    this.WhoAmI = "我是 " + type + " 对象";
}

var newObject = {};
SetType.call(newObject, "newObject");
alert(newObject.WhoAmI); // 我是 newObject 对象

var new2 = {};
SetType.apply(new2, ["new2"]);
alert(new2.WhoAmI); // 我是 new2 对象

expects a discrete number of parameters, while

can pass an array of parameters. This is the brief description of call! However, there are some things to be aware of that can get you in trouble. We will discuss these in my next post…apply this

FAQs about

in JavaScriptthis

What are the keywords in JavaScript? Why is it important? this

The

keyword in JavaScript is a special keyword that refers to the context of the calling function. It is a reference to the object to which the function belongs. The value of this depends on how the function is called. It is important because it allows you to access the properties and methods of objects in functions, making your code more flexible and reusable. this

How do keywords work in different contexts? this The value of

will change according to its usage context. In a method, this refers to the owner object. When used alone, this refers to a global object. In a function, this refers to a global object. In an event, this refers to the element that receives the event. this

Can you explain how

works in event handlers? this

In an event handler,

refers to the HTML element that receives the event. This allows you to access and manipulate the element directly in the event handler function. For example, if you have a button with the this event, onclick in the onclick function will refer to the button element. this

How does it behave in arrow functions? this

The arrow function handles

differently than the normal function. In the arrow function, this is lexical bound. This means it uses this in the code containing the arrow function. Therefore, for arrow functions, this maintains the value of this that encloses the lexical context. this

What is the difference between

in JavaScript and this in other programming languages? this

In many object-oriented programming languages,

always refers to an instance of the current class. However, in JavaScript, the value of this is determined by the execution context and the way the function is called, rather than by the definition location of the function. this

How to change the context of

in a function? this

You can change the context of

using methods such as call(), apply() and bind(). The this and call() methods call the function using the given apply() value and parameters. The difference between the two is that this accepts a parameter list, while call() accepts a single parameter array. The apply() method returns a new function that allows you to bind the function to a specific object. bind() What is the value of

in the constructor?

thisIn the constructor,

refers to the newly created object. When you create an instance of an object using the

keyword, this is automatically set to the new object. new

this How do you behave in strict mode?

In strict mode, the value of this remains at the value set when entering the execution context. If undefined, it remains undefined. This is different from non-strict mode, where this defaults to global objects if undefined.

this Can it be null or undefined?

Yes, this can be null or undefined, especially when calling a function in strict mode or using call() or apply() with undefined or null as the first argument.

What are the global objects in JavaScript?

Global objects in JavaScript vary by environment. In a web browser, the global object is a window object. In Node.js, a global object is a global object literal. When this is used outside of any function or method, it refers to a global object.

The above is the detailed content of What is 'this' in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!