【问题标题】:Immediate function using JavaScript ES6 arrow functions使用 JavaScript ES6 箭头函数的即时函数
【发布时间】:2014-04-04 00:23:33
【问题描述】:

有人知道如何使用 ES6 箭头语法编写即时函数吗?

这是 ES3/5 的做法:

(function () {
   //...
}());

我尝试了以下方法,但在最后一行出现unexpected token 错误。

(() => {
  //...
}());

您可以在这里进行测试:http://www.es6fiddle.net/hsb8bgu4/

【问题讨论】:

标签: javascript function ecmascript-6 ecmascript-harmony arrow-functions


【解决方案1】:

来自Arrow functions examples

(() => "foobar")() // returns "foobar" 

所以,函数调用操作符应该在外面。

(() => {
  //...
})();

示例:http://www.es6fiddle.net/hsb8s1sj/

【讨论】:

  • 这种方式也适用于常规函数,而且无论如何它更有意义 - 包装函数本身以使其成为表达式,然后调用该表达式。当你包装整个函数调用时它也有效的事实是一个奇怪的怪癖 imo,我很高兴这不适用于箭头
【解决方案2】:

这是我的演示代码!

永远记住function_name+() === function_caller

/* ES5 */

// normal function

function abc(){
    console.log(`Hello, ES5's function!`);
}
abc();

var abc = function xyz(){
    console.log(`Hello, ES5's function!`);
};
abc();

// named function

var abc = function xyz(){
    console.log(`Hello, ES5's function!`);
}();


// anonymous function
// 1
(function(){
    console.log(`Hello, ES5's IIFE!`);
})();

// 2
(function(){
    console.log(`Hello, ES5's IIFE!`);
}());

// 3

var abc = function(){
    console.log(`Hello, ES5's function!`);
}();


/* ES6 */

// named arrow function
const xyz = () => {
    console.log(`Hello, ES6's Arrow Function!`);
};
xyz();


const xyz = (() => {
    console.log(`Hello, ES6's Arrow Function!`);
})();


// Uncaught SyntaxError: Unexpected token (

/*
const xyz = (() => {
    console.log(`Hello, ES6's Arrow Function!`);
}());
*/

// anonymous arrow function
(() => {
    console.log(`Hello, ES6's Arrow Function!`);
})();

Immediately-invoked function expression

let x;

(x = () => {
  console.log(`ES6 ${typeof(x)}`);
})();

// ES6 function

// OR

(() => {
  console.log(`ES6 ${typeof(Symbol)}`);
})();

// ES6 function

【讨论】:

  • “立即调用函数表达式”这个术语描述了一种设计模式,也被称为“自执行匿名函数”。
猜你喜欢
  • 2019-01-06
  • 2016-04-07
  • 2022-01-21
  • 2016-12-21
  • 1970-01-01
  • 2017-12-06
  • 2016-09-07
相关资源
最近更新 更多