ES6의 화살표 기능 분석(예제 포함)

이 기사의 내용은 ES6의 화살표 기능 분석에 대한 것입니다(예제 포함). 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

개요

화살표 함수에는 두 가지 기능이 있습니다.

1. 간단한 작성 방법

   #🎜 🎜#
2. 바인딩하지 않음

문법 목록

()=>{}
()=>{console.log('arrow');return null}
()=>'hello'
(num1, num2)=>num1+num2
num=>++num
()=>({name:'arrow'})

쓰기

#🎜 🎜# Formal

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)

덧셈 함수인 add 변수를 선언합니다. 이 함수에는 num1, num2라는 두 개의 형식 매개변수가 있으며 반환 값은 이 두 매개변수를 추가한 결과입니다.# 🎜🎜##🎜 🎜#단일 매개변수

let  increment = num=>{
    return num + 1
}

위에서는 자동 증가 함수인 증분 변수를 선언합니다. 매개변수에는 형식 매개변수 num이 하나만 있고 반환 값은 1씩 증가한 매개변수입니다. 하나의 매개변수일 뿐이므로 화살표 함수 매개변수 목록의 ()는 생략 가능

매개변수 없음

let now = () => {
    return Date.now()
}
let now==>{} // Uncaught SyntaxError: Unexpected token ==

위에서는 now 변수를 선언합니다. 현재 타임스탬프, 매개변수가 필요하지 않기 때문에 매개변수 목록은 비워두지만 이 경우 ()를 생략할 수 없습니다. 그렇지 않으면 구문 오류가 발생합니다

단일 반환 값

let now = () =>  Date.now()

위 함수도 다음과 같이 축약할 수 있는데, 함수 본문에는 한 문장밖에 없기 때문에 {}와 return은 생략 가능합니다

# 🎜🎜#단일 반환 값: return Object literal

arrow 함수는 {}를 생략하고 반환할 수 있지만, 객체 리터럴을 반환할 때는 특별한 주의가 필요합니다. 구문 검사 중에 오류가 발생하면 작동하지 않습니다. 예를 들어, 여기서 얻으려는 데이터는 {name:'hello'}이지만 결과는 정의되지 않습니다.

let data=()=>{name:'hello'} // 不会报错 
console.log(data()) // undefined

왜요? 바벨을 사용하여 구문 분석하세요{}和return

单一返回值：返回对象字面量
虽然箭头函数可以省略{}和return，但是在返回一个对象字面量的时候要格外注意，如果是像下面的写法，虽然在语法检查的时候不会报错，但是和你所期望的可能不太一样，比如这里，你希望得到的数据是{name:'hello'}，但是结果却是undefined。

var data = function data() {
  name: 'hello';
};

为什么呢？用babel解析一下

可以发现，被解析成了

var str = "";

loop1:
for (var i = 0; i <p>并没有<code>return</code>，对比<code>4</code>的例子</p><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn//upload/image/415/279/235/1542179931538770.png" class="lazy" title="1542179931538770.png" alt="ES6의 화살표 기능 분석(예제 포함)"></p><p>所以，其实{name:'hello'}被解析成了函数体，{}是函数的{}，而不是对象的{}，而name:'hello'被解析成了语句，这种语句不常用，却是满足js语法的，叫做标签，案例：</p><pre class="brush:php;toolbar:false">let data=()=>({name:'hello'})

所以如果箭头函数需要返回单一的对象字面量，需要加对()

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

으로 파싱되어 반환이 없는 것을 확인할 수 있으며, 비교 4 예

따라서 실제로 {name:'hello'}는 함수 본문으로 구문 분석되고, {}는 {}입니다. }가 아닌 함수의 이름:'hello'는 명령문으로 구문 분석됩니다. 이러한 종류의 명령문은 일반적으로 사용되지 않지만 js 문법을 충족합니다. 🎜🎜#

function Person() {
  this.age = 0;
  var that=this
  setInterval(function growUp() {
    console.log(that.age)
  }, 1000);
}

var p = new Person();

따라서 화살표 함수가 단일 객체 리터럴 값을 반환해야 하는 경우 ()를 추가해야 합니다.

function Person() {
  this.age = 0;
  setInterval(()=> {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

이것을 바인딩하지 마세요#🎜🎜 #

다음 상황 보기

"use strict";

function Person() {
  var _this = this;

  this.age = 0;
  setInterval(function () {
    console.log(_this.age);
  }, 1000);
}

var p = new Person();

일반적으로 우리는 setInterval의 콜백 함수에서 age와 같은 Person의 변수에 액세스하기를 원하지만 새로 정의된 각 함수에는 고유한 this가 있으므로 이 여기에 Person의 this가 아닌 성장의 this가 있습니다. 이로 인해 이 .age가 정의되지 않게 됩니다. 이 문제를 해결하기 위해 우리는 일반적으로 절충 솔루션을 사용합니다.

let add = (num1 = 0, num2) => num1 + num2

보유할 임시 변수를 사용합니다. this을 사용하지 말고, 이제 화살표 함수가 무대에 올 차례입니다:

let add = (...numList) => numList.reduce((n1, n2) => n1 + n2)

화살표 함수에서는 this가 바인딩되지 않습니다. 즉, 자체 this가 없습니다. , 따라서 현재로서는 그의 this 는 Person 의 this 입니다. 이것을 바인딩하지 않는 소위 화살표 함수가 바로 콜백 함수가 화살표 함수의 가장 좋은 대상이라고 생각합니다.

바벨 구문 분석 후의 결과는 실제로 이전 방법입니다.

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

Note

화살표 함수는 기본 매개변수를 지원합니다.

// 栗子1
var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1
// 栗子2
function foo(n) {
  var f = () => arguments[0] + n; // 隐式绑定 foo 函数的 arguments 对象. arguments[0] 是 n
  return f();
}

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

foo(1); 
// 2

화살표 함수는 나머지 매개변수를 지원합니다

'use strict';
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局对象 'Window', 因此 'this.a' 返回 'undefined'
  }
});

화살표 함수는 매개변수 목록 분해를 지원합니다

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

화살표 함수는 인수를 지원하지 않습니다. 위와 같은 나머지 매개변수#🎜🎜#

var Foo = () => {};
console.log(Foo.prototype); // undefined

#🎜 🎜#Object.defineProperty()는 예상치 못한 영향을 미칩니다#🎜🎜#

let callback;

callback = callback || function() {}; // ok

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

callback = callback || (() => {});    // ok

#🎜🎜#new와 함께 사용할 수 없습니다#🎜🎜#rrreee#🎜🎜#프로토타입 없음#🎜 🎜#rrreee#🎜🎜#파싱 순서가 영향을 미침 #🎜🎜 #rrreee

위 내용은 ES6의 화살표 기능 분석(예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!