教育改变生活

标题: ES6新函数！箭头函数有什么优势呢？ [打印本页]
作者: 李玮    时间: 2020-5-8 18:01
标题: ES6新函数！箭头函数有什么优势呢？
更短的函数
  1. var elements = [
  2.   'Hydrogen',
  3.   'Helium',
  4.   'Lithium',
  5.   'Beryllium'
  6. ];

  8. elements.map(function(element) {
  9.   return element.length;
  10. }); // 返回数组：[8, 6, 7, 9]

  12. // 上面的普通函数可以改写成如下的箭头函数
  13. elements.map((element) => {
  14.   return element.length;
  15. }); // [8, 6, 7, 9]

  17. // 当箭头函数只有一个参数时，可以省略参数的圆括号
  18. elements.map(element => {
  19. return element.length;
  20. }); // [8, 6, 7, 9]

  22. // 当箭头函数的函数体只有一个 `return` 语句时，可以省略 `return` 关键字和方法体的花括号
  23. elements.map(element => element.length); // [8, 6, 7, 9]

  25. // 在这个例子中，因为我们只需要 `length` 属性，所以可以使用参数解构
  26. // 需要注意的是字符串 `"length"` 是我们想要获得的属性的名称，而 `lengthFooBArX` 则只是个变量名，
  27. // 可以替换成任意合法的变量名
  28. elements.map(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]
复制代码
没有单独的this
在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值：
This被证明是令人厌烦的面向对象风格的编程。
  1. function Person() {
  2.   // Person() 构造函数定义 `this`作为它自己的实例.
  3.   this.age = 0;

  5.   setInterval(function growUp() {
  6.     // 在非严格模式, growUp()函数定义 `this`作为全局对象,
  7.     // 与在 Person()构造函数中定义的 `this`并不相同.
  8.     this.age++;
  9.   }, 1000);
  10. }

  12. var p = new Person();
复制代码
在ECMAScript 3/5中，通过将this值分配给封闭的变量，可以解决this问题。
  1. function Person() {
  2.   var that = this;
  3.   that.age = 0;

  5.   setInterval(function growUp() {
  6.     //  回调引用的是`that`变量, 其值是预期的对象.
  7.     that.age++;
  8.   }, 1000);
  9. }
复制代码
或者，可以创建绑定函数，以便将预先分配的this值传递到绑定的目标函数（上述示例中的growUp()函数）。
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。因此，在下面的代码中，传递给setInterval的函数内的this与封闭函数中的this值相同：
  1. function Person(){
  2.   this.age = 0;

  4.   setInterval(() => {
  5.     this.age++; // |this| 正确地指向 p 实例
  6.   }, 1000);
  7. }

  9. var p = new Person();
复制代码
与严格模式的关系
鉴于 this 是词法层面上的，严格模式中与 this 相关的规则都将被忽略。
  1. var f = () => { 'use strict'; return this; };
  2. f() === window; // 或者 global
复制代码

严格模式的其他规则依然不变.
通过 call 或 apply 调用
由于 箭头函数没有自己的this指针，通过 call() 或 apply() 方法调用一个函数时，只能传递参数（不能绑定this---译者注），他们的第一个参数会被忽略。（这种现象对于bind方法同样成立---译者注）
  1. var adder = {
  2.   base : 1,
  3.    
  4.   add : function(a) {
  5.     var f = v => v + this.base;
  6.     return f(a);
  7.   },

  9.   addThruCall: function(a) {
  10.     var f = v => v + this.base;
  11.     var b = {
  12.       base : 2
  13.     };
  14.             
  15.     return f.call(b, a);
  16.   }
  17. };

  19. console.log(adder.add(1));         // 输出 2
  20. console.log(adder.addThruCall(1)); // 仍然输出 2
  21. 不绑定arguments
复制代码






欢迎光临 教育改变生活 (http://bbs.goldoar.com/) Powered by Discuz! X3.2