Foreword
Arrow function greatly simplifies the value of this rule.
Normal function and arrow function
Refers to an ordinary function is a function defined by function:
var hello = function () {
console.log("Hello, Fundebug!");
}
It refers to a function with arrows => function definition:
var hello = () => {
console.log("Hello, Fundebug!");
}
JavaScript function and arrow is not just an ordinary function difference in wording, there are some subtle differences, one difference is this.
Arrow function does not own this value, this function is used arrows from the scope chain function.
This sentence is very simple, but listen a little bit strange, too begin at the beginning.
What this in the end is?
About this article has more than enough, and sometimes added insult to injury, I will not add to the trouble, I only carry about MDN documentation: this, read carefully what interest, I excerpt some of the most important words like .
A function's this keyword behaves a little differently in JavaScript compared to other languages. It also has some differences between strict mode and non-strict mode.
JavaScript is a rather peculiar language, it is this not the same as with other languages, and its value also depends on whether the code is strict mode ( "use strict").
What is the value of this?
The JavaScript context object in which the current code is executing.
this is the current context object code execution.
Global context
In the global execution context (outside of any function), this refers to the global object whether in strict mode or not.
Code does not perform any function, but in the global role of the Executive domain, this value is the global object for browsers, this is the window.
This rule is quite easy to accept.
Function context
Inside a function, the value of this depends on how the function is called.
The function of this value depends on how this function is called, this rule a bit sick, but also very easy to make a place for the BUG.
In addition, the value of this function and also whether strict mode ( "use strict") related to this very frenzied a ...
If you curious, go left to see the MDN documentation, I say no good, only a simple description of the situation.
As an object method
When a function is called as a method of an object, its this is set to the object the method is called on.
When a function is invoked as a method of an object, it is the object of this value.
var circle = {
radius: 10,
getRadius() {
console.log(this.radius);
}
};
circle.getRadius(); // 打印 10
self = this？
When we need a nested inner function in an object method, this will give us real problems, and we should have written this code:
// Temporary Variable Self
var = {Circle
RADIUS: 10,
outerDiameter () {
var = Self the this;
var innerDiameter = function () {
the console.log (2 * self.radius);
};
innerDiameter ();
}
};
circle.outerDiameter (); // Print 20
outerDiameter function is the circle object method, therefore this value is the circle object.
Then we write directly this.radius so nice, so unfortunately can not write, because the inner function innerDiameter and do not inherit this value outerDiameter of the outer function. this outerDiameter function value is the circle object, this.radius equal to 10.
However, this value is not a function of the circle subject innerDiameter, that it in the end is what? It is innerDiameter function executes the current context object, the context object is what? In fact, I fainted, so you can test:
// innerDiameter function is in this window
var = {Circle
RADIUS: 10,
outerDiameter () {
var innerDiameter = function () {
the console.log (this === window);
};
innerDiameter ();
}
};
Circle. outerDiameter (); // prints true
innerDiameter function of this window is, why is this window leave it, anyway, not a circle object.
So, if we use this directly in innerDiameter function, then it is a problem:
// When normal function
var = {Circle
RADIUS: 10,
outerDiameter () {
var innerDiameter = function () {
the console.log (2 * this.radius);
};
innerDiameter ();
}
};
circle.outerDiameter (); // print NaN
So we have to use a temporary variable function outerDiameter self outer layer to the inner layer of the transfer function of this value innerDiameter.
.bind(this)
We can also use .bind (this) to come and go circumvent this problem:
// 使用.bind(this)
var circle = {
radius: 10,
outerDiameter() {
var innerDiameter = function() {
console.log(2 * this.radius);
};
innerDiameter = innerDiameter.bind(this);
innerDiameter();
}
};
circle.outerDiameter(); // 打印20
However, both the use of temporary variables self, or the use of .bind (this), is not that a very simple way.
In short, this ordinary function of how much value a bit strange, especially when programming the way we use object-oriented, often need to use this, most of the time we are not going to use .bind (this), but the use of temporary or that the variable self to carry the value of this, of course, to write not so cool, but believe it will be written BUG.
As MDN document said:
Until arrow functions, every new function defined its own this value based on how the function was called。This proved to be less than ideal with an object-oriented style of programming.
Arrow function
this arrow function values, the rule is very simple, because this arrow in function, can be seen as a common variable.
An arrow function does not have its own this. The this value of the enclosing lexical scope is used; arrow functions follow the normal variable lookup rules.
Arrow function does not own this value, this arrow is used in the function from the function scope chain, its value follows the same general rules of common variables, looking up layer by layer in the function scope chain.
With the arrow function, I just abide by the following rules, this problem can basically do not have control:
-
For functions require object.method () call mode, use the normal function definition, do not use the arrow functions. this value is used in the method of the object has a definite meaning, it refers to the object itself.
-
In other cases, all use the arrow functions.
// Use the arrow function
var = {Circle
RADIUS: 10,
outerDiameter () {
var innerDiameter = () => {
the console.log (2 * this.radius);
};
innerDiameter ();
}
};
circle.outerDiameter () ; // Print 20
For the inner function innerDiameter, this value does not itself and, using this strand from the scope, the scope of the function from a higher layer. OuterDiameter innerDiameter outer function is a normal function, it is this value, this value is that the circle object. Thus, this innerDiameter function used from outerDiameter function, which is the circle object.
in conclusion
JavaScript is Brendan Eich spent 10 days out of the design, so all kinds of inexplicable characteristics, this can be considered one of the wonderful work. Fortunately, the ECMAScript standard developed rapidly these years has been very stable, standard line and a new year, how much you can make up for deficiencies JS.
Arrow function to simplify the value of this rule, in fact, it is to give you less chaos, who can remember an ordinary function of the value of this so many rules ah. . .
In addition, MDN documentation is definitely a treasure, we can see more.
You may also be interested in the article:
-
Comprehensive analysis of JavaScript and in this common example
-
JS anonymous function inside this detailed analysis points to problems
-
vue vue example project calls directly in an external js file method such as this
Article simultaneous release: https://www.geek-share.com/detail/2771907768.html