What does this point to in a JavaScript function?

Today I will share with you an important knowledge point in JavaScript, this. It has certain reference value and I hope it will be helpful to everyone's learning.

We often feel confused when learning the this keyword. We are not sure what it refers to in the function and how to use it. Today, I will introduce you to the details about this in the article. Knowledge

[Recommended courses:JavaScript Tutorial】

Context and this Keyword

In JavaScript, a function has its own execution context. Pay special attention here that the execution context of a function is not about how it is declared, nor about the function of the function, but about How to call it in code, we will use this when calling this execution context. When this is accessed from within a function, its execution context is actually accessed.

The method of calling the function and this

The context depends on the method of calling the function. We can call the function of the context in 4 different ways, so there are also four types of this Different pointers

1. A basic function call

2. Using the context object to call the function, also called implicit binding.

3. Use call() or call the function apply(), also known as explicit binding.

4. Binding through the bind() method

Basic function call

Basic function call is the simplest way to call a function

Example:

<script type="text/javascript">
	var name="张三";
	function student(){
		console.log(this.name);
	}
	student();
</script>

In this example, it can be seen that student() calls the function from the global scope, so this here refers to the global scope, so The output result is ""Zhang San""

Implicit binding

When a function is "contained" by an object, we say that the this of the function is implicitly bound Bound into this object

<script type="text/javascript">
var student={
	name:"张三",
	obj:function(){
		console.log(this.name)
	}
}
student.obj();
	</script>

Although the obj function is placed in the object, it will not be different from the outside just because it is defined inside the object. , under implicit binding, obj can still access the a property in the student object through this

Display binding

You can use call() or apply( ) method calls a function, and its execution context is explicitly bound to the object. call and apply can change this pointer

Example: when call () or apply() is not used

<script type="text/javascript">
var name="张三";
var obj = {
	name:"李四",
	fun:function(){
	console.log(this.name);}}
obj.fun();
</script>

Use call() to make this point to window

<script type="text/javascript">
var name="张三";
var obj = {
name:"李四",
fun:function(){
      onsole.log(this.name);}}
       obj.fun.call(window);
</script>

##bind() binding

bind() will create a function, and the value of this object in the function body will be bound to the value of the first parameter passed into bind(), but bind does not execute the function and only returns one for execution. The function

<script type="text/javascript">
var a = {
	b : function(){
		var func = function(){
			console.log(this.c);
		}
		func.bind(this)();
	},
	c : &#39;Hello!&#39;
}
a.b();
	</script>

points this to the content in the c object through the bind method.

Summary: The above is the entire content of this article. From the above article we can see that whoever calls this points to who; globally this points to the window ; And the call(), apply() and bind() methods can change the pointer of this.

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