js의 화살표 함수 소개

화살표 함수는 단축 함수 표현식이며 어휘 범위의 this 값을 갖습니다(즉, 자체 범위에서 this, 인수, super 및 new.target과 같은 새 객체를 생성하지 않습니다). 또한 화살표 함수는 항상 익명입니다.

Basic Grammar

1. (param1, param2, …, paramN) => { statements }  
   (param1, param2, …, paramN) => expression  
            // equivalent to:  => { return expression; }  
     
   // 如果只有一个参数，圆括号是可选的:  
   (singleParam) => { statements }  
   singleParam => { statements }  
     
   // 无参数的函数需要使用圆括号:  
   () => { statements }

Advanced Grammar

1. // 返回对象字面量时应当用圆括号将其包起来:  
   params => ({foo: bar})  
     
   // 支持 Rest parameters 和 default parameters:  
   (param1, param2, ...rest) => { statements }  
   (param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }  
     
   // Destructuring within the parameter list is also supported  
   var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;  
   f();  // 6

Description

화살표 함수의 도입은 두 가지 영향을 미칩니다. 하나는 더 짧은 함수 작성이고 다른 하나는 이것에 대한 어휘 분석입니다.

더 짧은 함수

일부 함수형 프로그래밍 패턴에서는 더 짧은 함수가 매우 인기가 있습니다. 비교해보세요:

1. var a = [  
     "Hydrogen",  
     "Helium",  
     "Lithium",  
     "Beryl­lium"  
   ];  
     
   var a2 = a.map(function(s){ return s.length });  
     
   var a3 = a.map( s => s.length );

This를 바인딩하지 않음

화살표 함수 이전에 새로 정의된 각 함수는 고유한 this 값을 가졌습니다(예를 들어 생성자의 this는 새 개체를 가리켰습니다. 엄밀히 말하면 this 값은 모드의 함수는 정의되지 않습니다. 함수가 객체의 메서드로 호출되면 this는 이를 호출한 객체를 가리킵니다. 객체 지향 프로그래밍에서는 이것이 매우 성가신 일이 될 수 있습니다.

function Person() {  
  // 构造函数 Person() 定义的 `this` 就是新实例对象自己  
  this.age = 0;  
  setInterval(function growUp() {  
    // 在非严格模式下，growUp() 函数定义了其内部的 `this`  
    // 为全局对象, 不同于构造函数Person()的定义的 `this`  
    this.age++;   
  }, 1000);  
}  
  
var p = new Person();

1. ECMAScript 3/5에서는 원하는 this 객체를 가리키는 변수를 추가한 다음 해당 변수를 클로저에 넣으면 이 문제를 해결할 수 있습니다.

2. function Person() {  
     var self = this; // 也有人选择使用 `that` 而非 `self`.   
                      // 只要保证一致就好.  
     self.age = 0;  
     
     setInterval(function growUp() {  
       // 回调里面的 `self` 变量就指向了期望的那个对象了  
       self.age++;  
     }, 1000);  
   }

또한 바인드 함수를 사용하여 원하는 this 값을 성장() 함수에 전달할 수도 있습니다.

화살표 함수는 컨텍스트의 this 값을 자체 this 값으로 캡처하므로 다음 코드는 예상대로 실행됩니다.

1. function Person(){  
     this.age = 0;  
     
     setInterval(() => {  
       this.age++; // |this| 正确地指向了 person 对象  
     }, 1000);  
   }  
     
   var p = new Person();

엄격 모드와의 관계

어휘 수준인 점을 고려하면 엄격 모드에서 이와 관련된 규칙은 무시됩니다.

1. var f = () => {'use strict'; return this};  
   f() === window; // 或全局对象

엄격 모드의 다른 규칙은 변경되지 않습니다.

call을 사용하거나 call에 적용

이것은 어휘 수준에서 바인딩되므로 call() 또는 apply() 메서드를 통해 함수를 호출할 때, 단지 매개변수를 전달하는 것만으로는 이에 아무런 영향을 미치지 않습니다:

1. <span style="font-size:14px;">var adder = {  
     base : 1,  
         
     add : function(a) {  
       var f = v => v + this.base;  
       return f(a);  
     },  
     
     addThruCall: function(a) {  
       var f = v => v + this.base;  
       var b = {  
         base : 2  
       };  
                 
       return f.call(b, a);  
     }  
   };  
     
   console.log(adder.add(1));         // 输出 2  
   console.log(adder.addThruCall(1)); // 仍然输出 2（而不是3 ——译者注）</span>

바인딩되지 않은 인수

화살표 함수는 인수 객체 내부를 노출하지 않습니다: 인수.길이, 인수[0], 인수[ 1] 등 ., 화살표 함수의 인수를 가리키지 않지만 화살표 함수의 범위에서 인수라는 값을 가리킵니다(있는 경우 그렇지 않으면 정의되지 않음).

1. var arguments = 42;  
   var arr = () => arguments;  
     
   arr(); // 42  
     
   function foo() {  
     var f = () => arguments[0]; // foo's implicit arguments binding  
     return f(2);  
   }  
     
   foo(1); // 1

화살표 함수에는 자체 인수 개체가 없지만 대부분의 경우 나머지 매개변수가 해결책을 제공할 수 있습니다.

1. function foo() {   
     var f = (...args) => args[0];   
     return f(2);   
   }  
     
   foo(1); // 2

메서드와 같은 화살표 함수를 사용하세요. 함수 표현식은 메소드 이름이 없는 함수에 가장 적합합니다. 이를 메소드로 사용하려고 하면 어떤 일이 일어나는지 살펴보겠습니다.

1. 'use strict';  
   var obj = {  
     i: 10,  
     b: () => console.log(this.i, this),  
     c: function() {  
       console.log( this.i, this)  
     }  
   }  
   obj.b(); // prints undefined, Window  
   obj.c(); // prints 10, Object {...}

箭头函数没有定义this绑定。

1. 'use strict';  
   var obj = {  
     a: 10  
   };  
     
   Object.defineProperty(obj, "b", {  
     get: () => {  
       console.log(this.a, typeof this.a, this);  
       return this.a+10; // represents global object 'Window', therefore 'this.a' returns 'undefined'  
     }  
   });

使用new操作符

箭头函数不能用作构造器，和 new 一起用就会抛出错误。

使用yield关键字

 yield关键字通常不能在箭头函数中使用（except when permitted within functions further nested within it）。因此，箭头函数不能用作Generator函数。

返回对象字面量

请牢记，用 params => {object:literal} 这种简单的语法返回一个对象字面量是行不通的：

1. var func = () => {  foo: 1  };  
   // Calling func() returns undefined!  
     
   var func = () => {  foo: function() {}  };  
   // SyntaxError: function statement requires a name

这是因为花括号（即 {} ）里面的代码被解析为声明序列了（例如， foo 被认为是一个 label, 而非对象字面量里的键）。

所以，记得用圆括号把对象字面量包起来：

1. var func = () => ({ foo: 1 });

换行

箭头函数在参数和箭头之间不能换行哦

1. var func = ()  
              => 1; // SyntaxError: expected expression, got '=>'

解析顺序

在箭头函数中的箭头不是操作符(或者运算符,就像'+ -'那些), 但是 箭头函数有特殊的解析规则就是:相比普通的函数, 随着操作符优先级不同交互也不同(建议看英文版)。

let callback;  
  
callback = callback || function() {}; // ok  
callback = callback || () => {};      // SyntaxError: invalid arrow-function arguments  
callback = callback || (() => {});    // ok

1. 示例

2. // 一个空箭头函数,返回 undefined  
   let empty = () => {};  
     
   (() => "foobar")() // 返回 "foobar"   
     
   var simple = a => a > 15 ? 15 : a;   
   simple(16); // 15  
   simple(10); // 10  
     
   let max = (a, b) => a > b ? a : b;  
     
   // Easy array filtering, mapping, ...  
     
   var arr = [5, 6, 13, 0, 1, 18, 23];  
   var sum = arr.reduce((a, b) => a + b);  // 66  
   var even = arr.filter(v => v % 2 == 0); // [6, 0, 18]  
   var double = arr.map(v => v * 2);       // [10, 12, 26, 0, 2, 36, 46]  
     
   // 更多简明的promise链  
   promise.then(a => {  
     // ...  
   }).then(b => {  
      // ...  
   });

위 내용은 js의 화살표 함수 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!