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

1, Deconstruction and assignment of function parameters

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

function bar({c,d}) {
      console.log(c+d); // 7
}
bar({c:3,d:4});

2, Function default parameters

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({a,b=10}) {
      console.log(a+b); // 5+10=15 => 15
}
fn({a:5});

2.2 parameters can be preset

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

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

2.3 override of default arguments

But if you pass in arguments, the default is overridden.

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

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

2.4 the default value can be a function

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

3, Arrow function

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() {return 1;}
// Arrow function writing
let fn = ()=>(1);
let fn = ()=>1;

// Traditional writing (a parameter)
let bar = function(a) {return 2};
// Arrow function writing
let bar = (a)=>2;
let bar = a=>2;

// Traditional writing (multiple parameters)
let fn = function(a,b) {return 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, Characteristics of arrow function

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({id:123}); // 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 {id:123}, this of the fn function points to {id:123}, 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({id:123}); // 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

5, Usage scenario of arrow function

  • 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
});

6, Summary

  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

Tags: Javascript REST

Posted on Wed, 06 May 2020 04:07:21 -0400 by derchris