【WEB前端-基础】JS 引用类型-Function类型

Function类型

函数实际上是对象，每个函数都是Function类的实例，而且与其他引用类型一样具有属性和方法。

函数没有重载的概念

• 由于函数实际上是对象，因此函数名实际上也是一个指向函数对象的指针，并不会与某个函数绑定。

函数定义

函数声明 (函数语句)

function name([param[, param[, ... param]]]) { statements }

在函数执行之前，解析器会通过函数声明提升的过程 == 读取并将函数声明添加到 执行环境中。

函数表达式

var myFunction = function name([param[, param[, ... param]]]) { 
	statements 
}

函数表达式的语法中，函数位于一个初始化语句中，在执行函数所在的语句之前，变量不会保存对函数的引用。如果之前就开始了调用，会导致“unexpected identifier 意外标识符”的错误。

IIFE
IIFE是在函数声明后立即调用的函数表达式。

(function() {
    statements
})();

函数生成器声明 (function* 语句)

function* name([param[, param[, ...param]]]) { statements }

函数生成器表达式 (function*表达式)

function* [name]([param] [, param] [..., param]) { statements }

箭头函数表达式 (=>)

([param] [, param]) => { statements } param => expression

Function构造函数

注意: 不推荐使用 Function 构造函数创建函数,因为它需要的函数体作为字符串可能会阻止一些JS引擎优化,也会引起其他问题。

new Function (arg1, arg2, ... argN, functionBody)

生成器函数的构造函数

注意: GeneratorFunction 不是一个全局对象，但可以从构造函数实例取得。(详情请查阅生成器函数).

注意: 不推荐使用构造器函数的构造函数 (GeneratorFunction constructor)创建函数，因为它需要的函数体作为字符串可能会阻止一些JS引擎优化，也会引起其他问题。

new GeneratorFunction (arg1, arg2, ... argN, functionBody)

实例属性-by MDN/en-US

• arguments： 一个包含了传递给当前执行函数参数的类似于数组的对象。
• caller：指定调用当前执行函数的函数。此属性已弃用，仅对某些非严格函数有效。
• length：指定函数期望的参数个数。
• name：函数的名称。
• displayName：函数的显示名称。

实例方法

• call(thisArg[, arg1, arg2, ...argN]):调用一个函数并将其this设置为提供的值。参数可以按原样传递。
• apply(thisArg [, argsArray]):调用一个函数并将它的this设置为提供的thisArg。
• bind(thisArg[, arg1[, arg2[, ...argN]]]):创建一个新函数，当它被调用时，它的this集合为提供的thisArg。如果调用新绑定的函数，一个给定的参数序列将被附加到参数前面。
• toString():返回一个表示函数源代码的字符串。

方法函数定义

Getter 和 setter 函数

你可以在支持添加新属性的任何标准的内置对象或用户定义的对象内定义getter(访问方法)和setter(设置方法)。使用对象字面量语法定义getters和setters方法。

• get：当查找某个对象属性时，该对象属性将会与被调用函数绑定。【get vs. defineProperty】

  const obj = {
    log: ['example','test'],
    get latest() {
      if (this.log.length === 0) return undefined;
      return this.log[this.log.length - 1];
    }
  }
  console.log(obj.latest); // "test"
  

• set：当试图设置该属性时，对象属性与被调用函数绑定。

  const language = {
    set current(name) {
      this.log.push(name);
    },
    log: []
  };
  
  language.current = 'EN';
  language.current = 'FA';
  
  console.log(language.log);
  // expected output: Array ["EN", "FA"]
  

参考：
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set