In the front-end development process, the use of functions is common, so this blog will talk about the use of arrow functions in ES6 and principle, convenient to record and learn to use.
(Arrow pictures from the Internet, if there is any infringement, please contact the author to delete)
Let’s look at the definition of arrow function: a function represented by an arrow, that is, the arrow “=>” to define the function. Basic syntax for arrow functions: function name = (function argument) => function body.
For a simple example, let fun = () => 111 equals
function fun() {
return 111;
}
Then use the structure of normal functions and arrow functions to show a comparison:
1. Writing of ordinary conventional functions
function funName(params) {
return params + 2;
}
funName(2);
The result is: 4
2. Writing method of arrow function
var funName = (params) => params + 2
funName(2);
The result is: 4
Using the arrow function, you can do this in a single line of code. The arrow function is similar to the anonymous function in that it simplifies the function definition somewhat, and it has another representation that can contain multiple statements like this:
var funName = (params) => {
if (params > 0) {
return params + 2
}else {
return params * 2
}
}
There are other cases where a function takes more than one argument, defined as: function name = (argument 1, argument 2… , parameter N) => function body ****. If the number of parameters is different: (1) If there are two parameters: (params1, params2) => Params1 + params1 + params2 + params2; ② if no parameter is specified :() => 3.14; ③ unfixed parameters :(params1, params2, params3,… other) =>{var i; add = params1+params2; for(i = 0 ; i ++; I = I + 1){… }} instead! Here’s an example:
let obj1 = 1
let func = (state, obj1) => state.count + obj1
Is equivalent to
Function func(state, obj1) {function func(state, obj1) {
return state.count + obj1;
}
A common and convenient way to write:
1, let fun = v => {v} // If the arrow function has only one argument, () can be omitted
1, let fun = v => v; 2, let fun => v
3, let fun = (id, name) => ({id: id, name: name}
Other information:
1. Scene 1:
var func = () => {
Console. log(this) // There is no this object in the arrow function, this is the outer this object, namely the Window view
}
Func (10) // Window view
var func = () => {
Console. log(arguments) // ReferenceError: arguments is not defined
}
func(10);
2. Scenario 2:
var Student = {
‘age’: 16,
‘sayHi’ : () = > {
console.log(this.age);
}
};
var age = 18;
Student.sayHi(); // Prints 18, in which case this refers to the global object
var Student1 = {
‘age’: 16,
‘sayHi’ : the function () {
console.log(this.age);
}
};
var age = 18;
Student1.sayHi(); // Prints 16, in which case this points to Student1
Matters needing attention:
The this object inside the function is the object at which it is defined, not the object at which it is used. The biggest difference between the arrow function and the normal function is the scope, this points to; The arrow function this is dependent on the execution environment, inherits the context, and cannot be changed by call/apply/bind.
The above is all the content of this chapter. Welcome to pay attention to the wechat public account of Sanzhan “iOS development by Sanzhan”, and the Sina Weibo account of Sanzhan “Sanzhan 666”, welcome to pay attention to it!