Questions about this in ES6 arrow functions?
The syntax of the arrow function is new in ES6. The arrow function has the characteristics of simplicity and convenience to obtain this. Next, I will share with you this in the ES6 arrow function through this article. Friends who are interested can 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 the function is defined, not when the function is executed. Binding.
(1) Generally, the function this points to is bound during execution. When obj.say() is run, this points to the obj object.
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 are:
(3)
var a=11
function test1(){
this.a=22;
let b=function(){
console.log(this.a);
};
b();
}
var x=new test1();Output 11
Arrow function situation:
var a=11;
function test2(){
this.a=22;
let b=()=>{console.log(this.a)}
b();
}
var x=new test2();
//输出22Very strange No, 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 of the internal arrow function There is a mechanism to bind this. The actual reason is that the arrow function does not have its own this at all, so the internal this is 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 conversion in ES5:
// ES6
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
// ES5
function foo() {
var _this = this;
setTimeout(function () {
console.log('id:', _this.id);
}, 100);
}So when defining an object, define the object properties. This inside usually points to the global world, or the one where the object is located. this in the environment.
The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
Detailed explanation on React component performance optimization
About how to implement element-ui in vue Table table scrolling loading method
#How to implement the select drop-down list through Vue.js, the specific operations are as follows
The above is the detailed content of Questions about 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
AI Hentai Generator
Generate AI Hentai for free.
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
1382
52
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.
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!
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 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
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!
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.
