Answer to this question on ES6 Arrow Functions
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.
(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 include:
(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();
//输出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. It is this in the parent execution context. It must 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, and this inside points to the general It is global, or this in the environment where this object is located.
Related recommendations:
Analysis of the use of arrow functions in ReactJs
Introduction to the use of JavaScript arrow functions
The above is the detailed content of Answer to this question on 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
FAQ for pandas reading txt files
Jan 19, 2024 am 09:19 AM
Pandas is a data analysis tool for Python, especially suitable for cleaning, processing and analyzing data. During the data analysis process, we often need to read data files in various formats, such as Txt files. However, some problems will be encountered during the specific operation. This article will introduce answers to common questions about reading txt files with pandas and provide corresponding code examples. Question 1: How to read txt file? txt files can be read using the read_csv() function of pandas. This is because
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.
PyCharm Professional Edition Activation FAQ
Feb 20, 2024 pm 02:57 PM
PyCharm is a very popular Python integrated development environment (IDE) with rich functions and powerful tools, providing developers with a convenient development experience. PyCharm is divided into professional version and free version. The professional version provides more advanced features, but requires paid activation. When using PyCharm Professional Edition, you often encounter some activation-related problems. Below are answers to some common questions and specific code examples. Question 1: How to activate PyCharm Professional Edition? answer
Solve Tomcat installation problems: Answer frequently asked questions to help you install Tomcat smoothly
Dec 27, 2023 am 08:17 AM
Tomcat Installation Questions and Answers: Answers to common Tomcat installation questions to help you overcome installation confusion. Specific code examples are required. Introduction: Tomcat is an open source, free JavaServlet container used for the deployment of JavaWeb applications. Tomcat is very popular among developers due to its ease of use, reliability and stability. However, during the installation of Tomcat, some problems may cause confusion. This article aims to answer common Tomcat installation questions,
A few key tips and FAQs for learning CSS3
Sep 09, 2023 am 09:05 AM
Several key tips and FAQs for learning CSS3 [Introduction] CSS3 is a standard for defining web page styles. It provides more style selectors and special effects functions, making web design more rich and diverse. However, in the process of learning CSS3, you will also encounter some common problems. This article will introduce you to several key techniques and answer these questions. [1. Use the new selectors of CSS3] In CSS3, many new selectors have been added to select elements more accurately. Here are a few commonly used selector examples: Properties
Tips and FAQs for reading CSV files with Pandas
Jan 11, 2024 pm 02:11 PM
Quickly master the method of reading CSV files with pandas and answers to frequently asked questions. Introduction: With the advent of the big data era, data processing and analysis have become common tasks in all walks of life. In the field of Python data analysis, the pandas library has become the tool of choice for many data analysts and scientists because of its powerful data processing and analysis capabilities. Among them, pandas provides a wealth of methods for reading and processing various data sources, and reading CSV files is one of the most common tasks. This article will introduce in detail how to use pan
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
