js의 함수 및 ES6 화살표 함수에 대한 자세한 분석

이 글은 js의 ES6 화살표 기능에 대한 자세한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

소개

JavaScript의 모든 것은 함수 내에서 발생합니다.

함수는 한 번 정의하면 언제든지 실행할 수 있는 코드 블록입니다.

함수는 선택적으로 매개변수를 허용하고 값을 반환할 수 있습니다.

JavaScript의 함수는 객체, 즉 특별한 종류의 객체인 함수 객체입니다.

또한 함수는 값에 할당될 수 있고 인수로 전달되고 반환 값으로 사용될 수 있기 때문에 일급 함수라고 합니다.

Syntax

ES6/ES2015 이전의 "오래된" 구문부터 시작하겠습니다. 이것은 함수 선언입니다:

function dosomething(foo) {
  // do something
}

(이제 ES6/ES2015 세계에서는 이를 일반 함수라고 합니다.)

함수를 변수에 할당할 수 있습니다(이를 함수라고 합니다). 함수 표현식 공식):

const dosomething = function(foo) {
  // do something
}

명명된 함수 표현식은 비슷하지만 스택 호출 추적에서 더 잘 작동합니다. 이는 오류가 발생할 때 유용합니다. 함수 이름을 저장합니다:

const dosomething = function dosomething(foo) {
  // do something
}

#🎜🎜 #ES6/ES2015에서는 인라인 함수를 사용할 때 매개변수 또는 콜백 함수로 사용하기에 특히 적합한 화살표 함수를 도입했습니다.

const dosomething = foo => {
  //do something
}

화살표 함수는 위의 다른 함수 정의와 매우 다릅니다. 나중에 간단히 설명하겠습니다.

Parameters

함수에는 하나 이상의 매개변수가 있을 수 있습니다.

const dosomething = () => {
  //do something
}

const dosomethingElse = foo => {
  //do something
}

const dosomethingElseAgain = (foo, bar) => {
  //do something
}

ES6/ES2015부터 함수는 매개변수에 대한 기본값을 가질 수 있습니다.

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

이렇게 하면 모든 매개변수를 입력하지 않고도 함수를 호출할 수 있습니다. #🎜🎜 #

dosomething(3)
dosomething()

ES2018에서는 매개변수에 후행 쉼표를 도입했습니다. 이 기능은 매개변수를 이동할 때 쉼표가 누락되어 발생하는 오류를 줄이는 데 도움이 됩니다(예: 중간에 있는 마지막 매개변수 이동).

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}

dosomething(2, 'ho!')

줄바꿈 가능 모든 매개변수를 배열로 만들고 함수 호출 시 스프레드 연산자를 사용합니다.

const dosomething = (foo = 1, bar = 'hey') => {
  //do something
}
const args = [2, 'ho!']
dosomething(...args)

많은 매개변수로 작업할 때 매개변수를 기억하는 것이 어려울 수 있습니다. 여기서 객체를 사용할 수 있으며 구조 분해에서는 매개변수 이름이 유지됩니다.

const dosomething = ({ foo = 1, bar = 'hey' }) => {
  //do something
  console.log(foo) // 2
  console.log(bar) // 'ho!'
}
const args = { foo: 2, bar: 'ho!' }
dosomething(args)

Return value

모든 함수는 기본적으로 "정의되지 않은" 값을 반환합니다.

모든 함수는 코드 줄이 끝나거나 실행 흐름에서 return 키워드를 찾으면 종료됩니다.

JavaScript가 이 키워드를 발견하면 함수 실행을 종료하고 호출자에게 제어권을 반환합니다.

값을 전달하면 해당 값은 함수의 결과로 반환됩니다.

const dosomething = () => {
  return 'test'
}
const result = dosomething() // result === 'test'

값만 반환할 수 있습니다.

여러 값을 _시뮬레이트_하려면 객체 리터럴이나 배열을 반환하고 호출 시 구조 분해 할당 함수를 사용할 수 있습니다.

배열 사용:

객체 사용:

중첩 함수

다른 함수 내에 함수를 정의할 수 있습니다.

const dosomething = () => {
  const dosomethingelse = () => {}
  dosomethingelse()
  return 'test'
}

Nested 범위 함수는 외부 함수이므로 외부에서 호출할 수 없습니다.

객체 메서드

객체 속성으로 사용되는 경우 함수를 메서드라고 합니다.

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(Started)
  }
}

car.start()

화살표 함수의 이

#🎜 🎜# 화살표 함수와 일반 함수를 객체 메서드로 사용할 때 중요한 동작이 있습니다. 다음 예를 고려해 보세요.

const car = {
  brand: 'Ford',
  model: 'Fiesta',
  start: function() {
    console.log(Started ${this.brand} ${this.model})
  },
  stop: () => {
    console.log(Stopped ${this.brand} ${this.model})
  }
}

stop() 메서드가 예상대로 작동하지 않습니다.

두 함수 선언 스타일에서 this의 처리가 다르기 때문입니다. 화살표 함수의 this는 둘러싸는 함수 컨텍스트를 나타냅니다. 이 경우 창 객체

this, 함수 사용 ()는 호스트 객체

을 참조합니다. 이는

화살표 함수가 객체 메서드

및 생성자와 함께 사용하기에 적합하지 않음을 의미합니다(화살표 함수 생성자는 🎜# 호출될 때 실제로 #🎜을 발생시킵니다. ).

IIFE, 즉시 함수 표현식 호출 TypeErrorIIFE는 선언 후 즉시 실행되는 함수입니다.

;(function dosomething() {
  console.log('executed')
})()

결과를 변수에 할당할 수 있습니다. :

const something = (function dosomething() {
  return 'something'
})()

함수를 정의한 후 따로 호출할 필요가 없어 매우 편리합니다.

Function Mount

코드를 실행하기 전 JavaScript는 특정 규칙에 따라 순서를 변경합니다.

은 함수를 해당 범위의 맨 위로 이동합니다. 이것이 바로 다음 예제에서 동일한 범위에 있는 다른 모든 함수가 오류를 발생시키지 않는 이유입니다.

function dosomething() {
  console.log('did something')
}
dosomething()

现在，如果你使用命名函数表达式，因为你正在使用变量，会发生不同的事情。变量声明被提升，但不是值，因此不是函数。

dosomething()
const dosomething = function dosomething() {
  console.log('did something')
}

不会工作：

这是因为内部发生的事情是：

const dosomething
dosomething()
dosomething = function dosomething() {
  console.log('did something')
}

“let”声明也是如此。var声明也不起作用，但是报的不是同样的错误：

这是因为var声明被提升并用undefined作为值初始化，而const和let被提升但未初始化。

相关推荐：

JavaScript箭头arrow函数详解

解析ReactJs中箭头函数的使用

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