js의 함수 및 ES6 화살표 함수에 대한 자세한 분석
- 不言원래의
- 2018-09-01 11:25:401725검색
이 글은 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被提升但未初始化。
相关推荐：
위 내용은 js의 함수 및 ES6 화살표 함수에 대한 자세한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!