How to use this in ES6 arrow functions
This time I will bring you the ES6 arrowHow to use this in the function, the use of this in the ES6 arrow functionWhat are the precautions, the following is a practical case, one Get up and take a look.
Brief introduction: this in the arrow function points to a function defined differently from the general function. The definition of this in the arrow function: this in the arrow function is bound when defining the function. Instead of binding when executing the function.
(1) The general function this points to is bound during execution. When running obj.say(), this points to the object of obj.
var x=11;
var obj={
x:22,
say:function(){
console.log(this.x)
}
}
obj.say();
//console.log输出的是22(2) The so-called binding at definition time means that this is inherited from the parent execution context! ! this, such as this. This.x here actually represents window.x, so the output is 11.
var x=11;
var obj={
x:22,
say:()=>{
console.log(this.x);
}
}
obj.say();
//输出的值为11Similar ones include:
(3)
var a=11function test1(){ this.a=22; let b=function(){
console.log(this.a);
};
b();
}var x=new test1();
输出11Arrow function situation:
var a=11;function test2(){ this.a=22; let b=()=>{console.log(this.a)} b();}var x=new test2();//输出22It’s strange, isn’t it? This is how I understand it, The specific meaning of binding this when defined in ES6 should be inherited from this in the parent execution context. It should not be the parent execution context! ! ! In this way, many unclear directions in arrow functions are solved.
Note: Simple objects (non-functions) have no execution context!
In-depth understanding of this in the arrow function
In the arrow function, the fixation of this point is not because there is a mechanism to bind this inside the arrow function. The actual reason is that the arrow function does not have itself at all. This causes the internal this to be the this of the outer code block. Precisely because it does not have this, it cannot be used as a constructor.
We can simulate the arrow function transformation in ES5:
// ES6function foo() {
setTimeout(() => { console.log('id:', this.id);
}, 100);
}
// ES5function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id);
}, 100);
}So when defining an object, define the objectproperties, and this inside usually points to the global world. Or this in the environment where this object is located.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!
Related reading:
Summary of the experience of using python Django in development
##ES6 module syntax loading import export
How to use getBoundingClientRect() to achieve scrolling fixation of div container
The above is the detailed content of How to use this in ES6 arrow functions. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1655
14
1413
52
1306
25
1252
29
1226
24
Let's talk about why Vue2 can access properties in various options through this
Dec 08, 2022 pm 08:22 PM
This article will help you interpret the vue source code and introduce why you can use this to access properties in various options in Vue2. I hope it will be helpful to everyone!
An article that understands this point and catches up with 70% of front-end people
Sep 06, 2022 pm 05:03 PM
A colleague got stuck due to a bug pointed by this. Vue2’s this pointing problem caused an arrow function to be used, resulting in the inability to get the corresponding props. He didn't know it when I introduced it to him, and then I deliberately looked at the front-end communication group. So far, at least 70% of front-end programmers still don't understand it. Today I will share with you this link. If everything is wrong If you haven’t learned it yet, please give me a big mouth.
Clever way to use this keyword in jQuery
Feb 25, 2024 pm 04:09 PM
Flexible use of this keyword in jQuery In jQuery, the this keyword is a very important and flexible concept. It is used to refer to the DOM element currently being manipulated. By rationally using this keyword, we can easily operate elements on the page and achieve various interactive effects and functions. This article will combine specific code examples to introduce the flexible use of this keyword in jQuery. Simple this example First, let's look at a simple this example. Suppose we have a
What is this? An in-depth analysis of this in JavaScript
Aug 04, 2022 pm 05:02 PM
What is this? The following article will introduce you to this in JavaScript, and talk about the differences between this in different calling methods of functions. I hope it will be helpful to you!
How does JavaScript change this pointer? Brief analysis of three methods
Sep 19, 2022 am 09:57 AM
How does JavaScript change this pointer? The following article will introduce to you three methods of changing this pointer in JS. I hope it will be helpful to you!
How to use this method in Java
Apr 18, 2023 pm 01:58 PM
1. this keyword 1. Type of this: Which object is called is the reference type of that object 2. Usage summary 1. this.data;//Access attribute 2. this.func();//Access method 3.this( );//Call other constructors in this class 3. Explanation of usage 1.this.data is used in member methods. Let us see what will happen if this is not added classMyDate{publicintyear;publicintmonth;publicintday; publicvoidsetDate(intyear,intmonth,intday){ye
Detailed explanation of this in JavaScript arrow function
Jan 25, 2024 pm 01:41 PM
The arrow function in JavaScript is a relatively new syntax. It does not have its own this keyword. On the contrary, the this of the arrow function points to the scope object containing it. The impacts are: 1. This in the arrow function is static; 2. Arrow Functions cannot be used as constructors; 3. Arrow functions cannot be used as methods.
Let me explain in detail the four binding rules of this
Nov 01, 2022 pm 05:49 PM
The this keyword is one of the most complex mechanisms in JavaScript. It is a very special keyword that is automatically defined in the scope of all functions. But even very experienced JavaScript developers have a hard time telling what exactly it points to.
