JS this point (ES5) and ES6 arrow function This points to the problem summary (Fung Fung version)

Source: Internet
Author: User

This article is purely their own combination of online article summary, have questions and different ideas welcome message
/******************** Simple Small Example ********************/
var test =function () {
Console.log (this);
};
Test (); Window
/*****************************2***********************************/
var test2 =function () {
Console.log (this);
return function () {
Console.log (This)
}
};
var bb={
A: ' 1 ',
Cc:test2//Assignment type not yet executed
};
bb.cc () (); 1.obj 2.window
/*****************************3***********************************/
var test3 =function () {
Console.log (this);
return function () {
Console.log (This)
}
};
var bb3={
A: ' 1 ',
CC:TEST3 ()//default at outermost execution
};
Bb3.cc (); 1.window 2.obj

Test2 Tes3 is just a parenthesis difference, which determines the caller to point to;

/************ Common Function Example *****************/
var obj = {
birth:1990,
Getage:function () {
var B = This.birth;
var that=this;
Console.log (this); This points to obj
return function () {
Console.log (that); the//that cache remains in the pointer to the OBJ
Console.log (this); This point to window the final caller is not obj but window;
};
}
};
Obj.getage () ();//direct to the caller "Obj.getage ()" After execution becomes "()" and "() directly on the outermost window"

/************ arrow function Log in *****************/
var obj2 = {
Name: ' Obj2 ',
birth:1990,
Getage:function () {
var B = This.birth; 1990
return () = {
var c= ' hehe ';
Console.log (this);//obj2
return () = {
Console.log (this)//obj2 arrow function This always points to the outermost obj2;
}
}
}
};
Obj2.getage () () ();

The design of the two-example arrow function is more reasonable, the this always points to the obj2 at the time of definition, and the traditional function directly points to window in this case.
Personal feeling is a little unreasonable,

/************************* General Constructor ***************************************/
function Fn (name,age) {
This.name=name;
This.age=age;
Console.log (this); This point points to this object after you pass the new instance
return function () {
Console.log (this)//final execution of the call or window; not new object
};
}
var obj=new Fn (' Zhang Fei ', ' 14 '); This Fn
obj (); This window


/******************* Arrow Constructor *********************************************/
function Fn2 (name,age) {
This.name=name;
This.age=age;
Console.log (this); Obj2
return () = {
Console.log (This)//obj2
return () = {
Console.log (This)//obj2
}
}
}
var obj2=new Fn2 (' Zhang Fei ', ' 14 '); This point obj2
Obj2 (); This point obj2

Fn2 () () ();//If the constructor executes directly as a normal function, all points to the original window

By contrast, we can find that summing up the arrow function is a good solution to the problem that this original point in the function is unreasonable. You just have to remember that the arrow functions inherit the original
The outermost definition of this

JS this point (ES5) and ES6 arrow function This points to the problem summary (Fung Fung version)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.