Home > Web Front-end > JS Tutorial > body text

Where does this in ES6 arrow functions point to?

php中世界最好的语言
Release: 2018-03-17 13:33:19
Original
2721 people have browsed it

This time I will show you where this in the ES6 arrow function points to, and what are the precautions for using this in the ES6 arrow function. The following is a practical case, let's 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) Generally, the 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
Copy after login
(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();
//输出的值为11
Copy after login
Similar ones are:

(3)

var a=11
function test1(){
 this.a=22;
 let b=function(){
 console.log(this.a);
 };
 b();
}
var x=new test1();
Copy after login
Output 11

Arrow function situation:

var a=11;
function test2(){
 this.a=22;
 let b=()=>{console.log(this.a)}
 b();
}
var x=new test2();
//输出22
Copy after login
Very 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);
}
Copy after login
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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to change the status of radio using JS

How to set bootstrap table to height percentage

The difference between var foo = function () {} and function foo()

The above is the detailed content of Where does this in ES6 arrow functions point to?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!