Skip to main content

函数声明

【格式】

function fucName(arg1,arg2,...args){
  /* 函数内容 */
}

  • 每个函数都是Function类型的实例。

  • 函数是对象，也有属性和方法。

  • 函数名就是指向函数对象的指针。

    函数名：指向函数对象的指针

    • 一个函数可以有多个名称

      function sum(a+b){
        return a+b;
      }
      console.log(sum(1,1))//2

      //不带括号的函数名会访问函数指针，而不会执行函数
      //两个函数名指向同一个函数地址
      const anotherSum=sum;
      //切断其中一个指针指向，并不会影响另一个指针指向
      sum=null
      console.log(anotherSum(1,2))//3

    • ES6中获取函数名

      //已上述为例
      console.log(sum.name)//'sum'
      //若函数没有名称，返回空字符串
      console.log((()=>{}).name)//''
      //若是Function函数构建，则会返回‘anonymous’
      console.log((new Function()).name)//'anonymous'

  • 【规范】函数声明结尾可以不加;

  • arguments——类数组对象（包含调用函数时传入的参数）

    • 只有以function关键字定义的函数（还有箭头函数）时才会有

    • 内包含cellee属性——指向arguments对象所在函数的指针。

      function factorial(num){
        if(num<=1){
          return 1;
        }else{
          //待优化点：若修改函数名，此处还需要修改。
          return num*factorial(num-1);
        }
      }

      function factorial(num){
        if(num<=1){
          return 1;
        }else{
          //使用arguments.callee可以让函数逻辑与函数名结偶
          //（即：无论函数名修改什么，都可以引用正确的函数）
          return num*arguments.callee(num-1);
        }
      }

  • this指向：方法调用的上下文对象。

    window.color='red';
    let o={
      color:'blue'
    };

    function sayColor(){
      console.log(this.color);
    }
    sayColor();//'red'——这里调用方法的上下文对象为window

    o.sayColor=sayColor;//把sayColor赋值给o后
    o.sayColor();//'blue'——sayColor中的this.color相当于o.color;

  • caller——【ES5】用于调用当前函数的函数。（即返回引用该函数的函数）

    function outer(){
      inner();
    }

    function inner(){
      console.log(inner.caller);//显示outer()函数的代码
      //若要降低耦合度可写成
      console.log(arguments.callee.caller);
      //严格模式下arguments.callee会报错，且不能给caller赋值。
    }
    outer();

函数表达式

【格式】

const funcName=function (arg1,arg2,...args){
  /* 函数内容 */
};
  • 与函数声明等价
  • function关键字后没有名称，这个函数可以通过变量funcName来引用。
  • 【规范】末尾是有;

箭头函数

【格式】

const arrFunc=(arg1,arg2,...args)=>{
  /* 函数内容*/
};

  • 任何可以使用函数表达式的地方都可以使用箭头函数

  • 使用场景：

    • 嵌入函数的场景

      let ints=[1,2,3];
      ints.map((i)=>{return i+1});

  • 如果只有一个参数，可以不用括号。

  • 如果没有参数或有多个参数才需要括号。

  • 不能使用arguments、super和new.target属性，不能用做构造函数。

  • this指向：箭头函数的上下文。(箭头函数中的this会保留定义该函数时的上下文)

    function King(){
      this.royaltyName='Henry';
      //this 引用King的实例
      setTimeout(()=>console.log(this.royaltyName),1000);
    }

    function Queen(){
      this.royaltyName='Elizabeth';
      //this 引用window对象
      setTimeout(function(){console.log(this.royaltyName)},1000);
    }

    new King();//'Henry'
    new Queen();//undefined

默认参数值

Q：函数设置默认参数值时发生了什么？​

  • A：若参数指定对象作为默认参数值时。会以默认参数值为模版，创建一个新的对象。

    const person = {
      name: "Lydia",
      age: 21
    }

    const changeAge = (x = { ...person }) => x.age += 1
    const changeAgeAndName = (x = { ...person }) => {
      x.age += 1
      x.name = "Sarah"
    }

    changeAge(person)
    changeAgeAndName()//该调用中的参数x就以person为模版new一个新对象

私有变量

Q：如何在类中声明一个私有变量？​

  • A：使用#为前缀声明私有变量（ES2020）

    class Counter {
      #number = 10

      increment() {
        this.#number++
      }

      getNum() {
        return this.#number
      }
    }

    const counter = new Counter()
    counter.increment()
    //外部无法访问私有变量
    console.log(counter.#number)
0%