函数“表达式”是函数
在需要表达式的位置创建。你会经常遇到
表达式作为分配给变量的值。尽管函数声明
始终需要名称,您可以使用函数表达式来创建匿名
函数,方法是省略标识符,然后在 function
关键字后面添加
一对包含可选参数的圆括号:
const myVariable = function() { };
然后,您可以将它们调用 函数表达式:
const myVariable = function() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
您还可以使用函数表达式通过语法创建命名函数 类似于函数声明:
const myVariable = function myFunction() {
console.log( "This is my function." );
};
myVariable();
> "This is my function."
不过,与函数声明不同,命名函数表达式可以是 只能在函数本身内通过函数名称访问:
const myVariable = function myFunction() {
console.log( `I'm a ${ typeof myFunction }.`);
};
typeof myFunction;
> "undefined"
typeof myVariable;
> "function"
myVariable();
> "I'm a function."
与函数表达式关联的名称主要用于调试。答 命名函数表达式也可以递归方式调用自身,尽管这不是 在现代开发中非常常见的应用场景:
const myVariable = function myFunction() {
console.log( "One second elapsed." );
setTimeout( myFunction, 1000 );
};
setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…
箭头函数表达式
箭头函数表达式(通常称为“箭头函数”,或很少称为“lambda”) 函数),以提供简洁的语法来创建 具有某些独特行为的匿名函数表达式。
您可以在需要表达式的位置创建箭头函数,例如
以分配给某个变量的值的形式表示。最常见的形式是
函数由一对匹配的圆括号组成,圆括号包含 0 个或
参数,由单个等号和大于号字符组成的箭头
(=>
) 以及一对匹配的大括号,其中包含函数正文:
const myFunction = () => {};
在某些情况下,您可以让语法更加紧凑。如果您 只使用一个参数,则可以去掉左括号:
const myFunction = myParameter => {};
如果您希望函数正文返回单个表达式的值,则无需将函数正文括在大括号中,也不需要使用 return
关键字:
const myFunction = () => 2 + 2
myFunction()
> 4
箭头函数的独特之处在于它们没有自己的上下文
arguments
或
this
值。而是同时继承
箭头函数的
包含词汇表的环境
用于提供这些上下文的封装函数。
function myParentFunction() {
this.myProperty = true;
let myFunction = () => {
console.log( this );
}
myFunction();
};
let myInstance = new myParentFunction();
> Object { myProperty: true }
调用箭头函数
箭头函数绑定参数的方式与
其他类型的函数。
箭头函数正文中的 arguments
对象会继承其值
距离函数最近的
包含词汇的环境:
function myFunction() {
let myArrowFunction = () => {
console.log( arguments[ 0 ] );
}
myArrowFunction( true );
};
myFunction( false );
> false
在此示例中,使用参数 false
调用的外部函数调用了
带有参数 true
的内箭头函数。由于 arguments
对象
箭头函数内部会解析为外部函数中的绑定,
内部函数记录外部函数的 false
。
如果没有要从父上下文继承的 arguments
对象,则箭头
函数的 arguments
对象未定义,因此尝试访问该函数会导致
错误:
let myArrowFunction = () => {
console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined
立即调用的函数表达式 (IIFE)
立即调用的函数表达式 (IIFE),有时也称为 “自动执行匿名函数”是一个函数表达式,称为 系统会立即对其进行定义IIFE 使用由 将函数包含在分组运算符中。 第二个匹配的圆括号后,系统会立即调用该函数 遵循函数定义本身,或紧跟在分组之后 运算符。如果您使用的是标准函数,则没有实际区别 两种方法之间的差异:
(function() {
console.log( "IIFE.")
}
)();
> "IIFE."
(function() {
console.log( "IIFE.")
}
());
> "IIFE."
第一个示例调用分组函数表达式。第二个示例 调用分组运算符中的函数声明,而最终结果 将评估为一个分组表达式。无论在哪个区域 保护壳。
不过,将 IIFE 用作箭头函数会有所不同。在本课中, 在这种情况下,用于调用函数的圆括号必须位于分组之外 运算符,因为箭头函数本身不是表达式, 在需要表达式的上下文中创建。尝试从分组运算符的范围内调用箭头函数,意味着调用尚未在表达式上下文中创建的箭头函数:
( () => {
console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical
由于分组运算符需要一个表达式,因此需要定义其中的箭头函数,以便后续的括号调用分组表达式:
( () => {
console.log( "IIFE." );
} )();
> "IIFE."
旧式应用、常用的 IIFE 管理范围,尤其是 避免污染全局范围 包含函数范围的变量 和函数声明。 引入块范围之前 在 ES6 中,常见做法是将整个脚本封装在 IIFE 中, 全局范围的意外污染
检查您的理解情况
在 函数?