箭头功能与Fat箭头功能 [英] Arrow functions vs Fat arrow functions

问题描述

我在互联网上发现了两个名称，箭头功能和胖箭头功能，但没有关于它们之间有什么不同的信息。

有什么区别吗？

解决方案

这样的问题需要一些解释...

ECMAScript 5

在ES5规范中，根本没有箭头功能 。那么常常使用传统的函数表达式，如下所示：

  //示例n°1 
 var myFunction = function （）{
 return'Hello！'; 
}; 
 
 //示例n°2 
 var obj = {
 myFunction：function（）{
 return'Hello！'; 
} 
}; 
 
 //示例n°3 
 var arr = ['foo'，'bar']; 
 arr.map（function（item）{
 return'Hello，'+ item +'！'; 
}; 
   
 
 
当Jeremy Ashkenas推出CoffeeScript时，它带来了一个新的术语，特别是薄箭头功能（  - > ）和胖箭头功能（ => ）
 
 
 
一方面，薄型箭头函数是与ES5（匿名）函数表达式相当的CoffeeScript，在CoffeeScript中，我们可以这样编写以前的例子：
 ＃示例n°1 
 myFunction =  - >'你好！ '
 
＃示例n°2 
 obj = 
 myFunction： - >'Hello！'
 
＃示例n°3 
 arr = ['foo'，'bar'] 
 arr.map（（item） - >Hello，＃{item}！）
  
另一方面，胖箭头函数是由CoffeeScript提供的一个不错的工具，它在ES5中没有等效的语法目的是使用词汇作用域更容易播放，尤其是当您希望在回调中保留外部  时。我们来看一个普遍的例子，使用CoffeeScript和传奇的jQuery回调。假设我们在全球范围内：
  //这里this是window
 console.log这个）; 
 
 $（document）.ready（function（）{
 //这里this是document
 console.log（this）; 
}） ; 
  
如果我们想在回调中操纵外部的this，这里是ES5代码： / p> 
 
 
  var that = this; 
 
 $（document）.ready（function（）{
 console.log（that）; 
}）; 
  
使用CoffeeScript，可以使用胖箭头功能： 
  //this是window！ 
 $（document）.ready => console.log这个
  
当然，它不会用于薄箭头函数：
  //this是document
 $（document）.ready  - > console.log这个
  
 
 
 
 ECMAScript 6（2015）
 
 
 
 ES2015规范引入了箭头功能。它们是CoffeeScript中胖箭头函数的替代方法。但是，由于ES6中没有薄箭头功能，所以当您不使用CoffeeScript时，没有任何理由讨论胖箭头功能。在ES6中，您可以这样做：
  //这里this是window
 $（document） .ready（（）=> console.log（this））; 
  
现在，如果要保留词法作用域的正常行为，只需使用ES5语法： p> 
 
 
  $（document）.ready（function（）{
 //这里this是document
 console.log（this）; 
}）; 
  
 
I've found on the internet about both names, arrow functions and fat arrow functions but no information about what is different between them.

Are there any differences?
解决方案
Such a question requires a bit of explanation...

ECMAScript 5

In ES5 specification, there were no arrow functions at all. It was then common to use traditional function expressions like so:
// Example n°1
var myFunction = function () {
  return 'Hello!';
};

// Example n°2
var obj = {
  myFunction: function () {
    return 'Hello!';
  }
};

// Example n°3
var arr = ['foo', 'bar'];
arr.map(function (item) {
  return 'Hello, ' + item + '!';
};


CoffeeScript

When CoffeeScript was introduced by Jeremy Ashkenas, it brought a new terminology, especially thin arrow functions (->) and fat arrow functions (=>).

On the one hand, the thin arrow function is a CoffeeScript equivalent of the ES5 (anonymous) function expression. In CoffeeScript, we could write the previous examples like so:
# Example n°1
myFunction = -> 'Hello!'

# Example n°2
obj =
  myFunction: -> 'Hello!'

# Example n°3
arr = ['foo', 'bar']
arr.map((item) -> "Hello, #{item}!")
On the other hand, the fat arrow function is a nice utility provided by CoffeeScript which has no equivalent syntax in ES5. Its aim is to play more easily with lexical scoping, especially when you want to keep the outer this in a callback. Let's take a universal example with CoffeeScript and the legendary jQuery callback. Suppose we are in the global scope:
// Here "this" is "window"
console.log(this);

$(document).ready(function () {
  // Here "this" is "document"
  console.log(this);
});
If we want to manipulate the outer "this" in the callback, here is the ES5 code:
var that = this;

$(document).ready(function () {
  console.log(that);
});
With CoffeeScript, it is possible to use a fat arrow function instead:
// "this" is "window"!
$(document).ready => console.log this
Of course, it would not work with a thin arrow function:
// "this" is "document"
$(document).ready -> console.log this


ECMAScript 6 (2015)

ES2015 specification introduced arrow functions. They are an alternative to fat arrow functions in CoffeeScript. But since there are no thin arrow functions in ES6, there is no reason to talk about fat arrow functions when you do not use CoffeeScript. In ES6, you would do this:
// Here "this" is "window"
$(document).ready(() => console.log(this));
Now if you want to preserve the normal behavior of lexical scoping, just use the ES5 syntax:
$(document).ready(function () {
  // Here "this" is "document"
  console.log(this);
});


                        
这篇关于箭头功能与Fat箭头功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！