Functions in ES6 (function parameters, default values, arrow functions)

function foo([a,b]) { console.log(a+b); // 3 } foo([1,2]); function bar() { console.log(c+d); // 7 } bar();

2.1 basic methods

function foo(a,b=10) { console.log(a+b); // 1+10=11 => 11 } foo(1); function bar([a,b=10]) { console.log(a+b); // 3+10=13 => 13 } bar([3]); function fn() { console.log(a+b); // 5+10=15 => 15 } fn();

2.2 parameters can be preset

function bar([a,b=10] = [20]) { console.log(a+b); // 20+10=20 => 20 } bar(); function fn( = ) { console.log(a+b); // 20+10=30 => 30 } fn();

2.3 override of default arguments

function bar([a,b=10] = [20]) { console.log(a+b); } bar([100]); // 100+10 => 110 bar([100, 200]); // 100+200 => 300 function fn( = ) { console.log(a+b); } fn(); // 100+10 => 110 fn(); // 100+200 => 300

2.4 the default value can be a function

function getB() ; function foo(a,b=getB()) { console.log(a+b); // 1+10=11 => 11 } foo(1);

Syntax: parameter = > function body

• You can omit curly braces for a single line statement or the return keyword for a return statement.
• Curly braces cannot be omitted from multiline statements.
• Parentheses can be omitted for one parameter and not for multiple parameters.

// Traditional writing (no parameters) let fn = function() // Arrow function writing let fn = ()=>(1); let fn = ()=>1; // Traditional writing (a parameter) let bar = function(a) ; // Arrow function writing let bar = (a)=>2; let bar = a=>2; // Traditional writing (multiple parameters) let fn = function(a,b) ; // Arrow function writing let fn = (a,b)=>a+b; // Curly braces cannot be omitted in multiline statements let br = function(a,b) { let res = a+b; return res; } let br = (a,b)=>{ let res = a+b; return res; }

4.1 this immobilization in arrow function

this object in the function body is fixed, that is, the object at the time of definition, not the object at the time of use.

• this situation in ordinary function

var id = 10; let obj = { id: 15, fn: function(){ setTimeout(function(){ alert(this.id); // 10 },1000) } } obj.fn();

Analysis: after 1 second, execute window.setTimeout(), this points to window, so the returned result is the global id:10

If you want to get the id in obj, you usually use the method of "this = this".

var id = 10; let obj = { id: 15, fn: function(){ _this = this; // After calling, this here points to obj setTimeout(function(){ alert(_this.id); // 15 },1000) } } obj.fn();

• this situation in arrow function (1)

var id = 10; let obj = { id: 15, fn: function(){ setTimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 15 obj.fn.call(); // 123

Analysis: the arrow function is used in setTimeout(), so the this object in the arrow function is fixed on this under the parent scope. (this is the function fn)
That is to say, if this in fn function points to anyone, this in arrow function points to anyone.
When called by obj, this of fn function points to obj, so it returns id:15 under obj
When called by the object , this of the fn function points to , so it returns the id:123 under the object

• this situation in arrow function (2)

var id = 10; let obj = { id: 15, fn: ()=>{ setTimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 10 obj.fn.call(); // 10

Analysis: when the fn method under obj also uses the arrow function, it will look up this of its parent scope along the scope chain. Here is the global window.
So this is fixed on the window. No matter who calls it, it will only return the id:10 under the window

4.2 arrow function has no arguments object

During the initialization of a normal function, an arguments object is generated to hold the arguments.
But it doesn't exist in the arrow function. If you want to use the argument list, use the rest parameter instead.

// Ordinary function let fn = function(a,b,c) { console.log(arguments); } fn(1,2,3); // Arrow function let bn = (...args)=> { console.log(args); } bn(1,2,3);

4.3 arrow function cannot be instantiated with new

let Person = (name)=> { this.name = name; } let p = new Person('mm'); // TypeError: Person is not a constructor

4.4 arrow function cannot use yield command

• When we want to maintain a context of this, we can use the arrow function.

var id = 10; let obj = { id: 15, fn: function(){ setTimeout(()=>{ alert(this.id); },1000) } } obj.fn(); // 15

• When defining object methods and using this, do not use arrow function!

let person = { name: 'mm', say: ()=>{ console.log(this.name); // 'gg' } } var name = 'gg'; person.say();

• When listening for DOM events, do not use arrow functions!

let box = document.getElementById('box'); box.addEventListener('click', function(){ if(this.classList!='red') { this.classList = 'red'; }else { this.classList = 'green'; } console.log(this); // box }); box.addEventListener('click', ()=>{ if(this.classList!='red') { this.classList = 'red'; }else { this.classList = 'green'; } console.log(this); // window });

1. Function parameters can also deconstruct assignments.
2. Function parameters can be set with default values and parameters.
3. The default value of a function parameter can be a function call.
4. Syntax of arrow function: parameter = > function body
5. This of the arrow function is fixed, pointing to this of the parent scope.
6. The arrow function has no arguments and can be replaced with the rest parameter.
7. Arrow functions cannot be instantiated with new.
8. The yield command is not available for arrow functions

6 May 2020, 04:07 | Views: 3563