JS functions in detail

notes:

  1. every method is a function , but not every function is a method.
  2. functions are objects
  • scope: variable "visibility", the location where a variable is defined dictates where we have access to that variable.
    • function scope
    • let msg = "I am so happy today";
      function help{
        let msg = "I'am on fire";
        msg; //" I am on fire", local variable
      }
      
      msg; //"I am so happy today" , global variable
    • block scope
    • let radius = 8;
      
      if(radius > 0){
          const PI = 3.14;
          let circ = 2 * PI * radius;
      }
      
      console.log(radius);  // 8
      console.log(PI);   // not defined
      console.log(circ);   //not defined
    • lexical scope

    • function outer() {
          let hero = "balck";
      
          function inner() {
              let cry = `${hero}, please save me!`;
              console.log(cry);
          }
          inner();
      }
      outer(); // balck, please save me!
    • function expressions
    • const square = function (num){
         return num * num;
      }
      square(7); //49
    • higher order functions
      • functions that operate on/with other functions, they can
      1. accept other functions as arguments
      2. return a function
      • function callTwice(func){
            func();
            func();
        }
        
        function laugh(){
            console.log("HAHAHA");
        }
        call(laugh); //pass a function as an arg;
        //HAHAHA
        //HAHAHA
    • returning functions
    • function rangeFunc(min, max){
          return function(val){
              return val >= min && val <= max;
          }
      }
      
      const AgeRange = rangeFunc(18, 100);
      
      AgeRange(17); // false
      AgeRange(68)//true
  • Methods
    • we can add functions as properies on objects
    • we can call them methods
    • const math = {
          multiply: function(x,y){
              return x*y;
          },
          divide: function(x,y){
              return x/y;
          },
          square: function(x){
              return x*x;
          }
      };

      shorthand

    • const math = {
          multiply(x,y){
              return x*y;
          },
          divide(x,y){
              return x/y;
          },
          square(x){
              return x*x;
          }
      }
       math.multiply(3,2)  //6
  • this in methods, use the keyword this to access other properties on the same object
    • const person = {
          first: 'Lily',
          last: 'Li',
          fullName(){
              return `${this.first} ${this.last}`
          }
      }
      person.fullName(); // "Lily Li"
      person.last = "Lyee";
      person.fullName(); //"Lily Lyee"

 

原文地址:https://www.cnblogs.com/LilyLiya/p/14261656.html