'화살표 기능'과 '기능'이 동일/호환 가능합니까?
ES2015의 화살표 기능은 보다 간결한 구문을 제공합니다.
- 모든 함수 선언/식을 화살표 함수로 바꿀 수 있습니까?
- 제가 조심해야 할 게 뭐죠?
예:
생성자 함수
function User(name) {
this.name = name;
}
// vs
const User = name => {
this.name = name;
};
시제품 방법
User.prototype.getName = function() {
return this.name;
};
// vs
User.prototype.getName = () => this.name;
오브젝트(리터럴) 메서드
const obj = {
getName: function() {
// ...
}
};
// vs
const obj = {
getName: () => {
// ...
}
};
콜백
setTimeout(function() {
// ...
}, 500);
// vs
setTimeout(() => {
// ...
}, 500);
가변 함수
function sum() {
let args = [].slice.call(arguments);
// ...
}
// vs
const sum = (...args) => {
// ...
};
tl;dr: 안 돼!화살표 함수와 함수 선언/식이 동일하지 않으므로 무작정 대체할 수 없습니다.
대체하려는 함수가 사용되지 않는 경우this,arguments와 함께 호출되지 않습니다.new럼,, 그그.
자주: 상황에 따라 다르죠.화살표 함수는 함수 선언/식과 동작이 다르므로 먼저 차이점을 살펴보겠습니다.
1. 1. this ★★★★★★★★★★★★★★★★★」arguments
의 화살표가 this ★★★★★★★★★★★★★★★★★」arguments는 다른로 어휘 됩니다.대신, 이러한 식별자는 다른 변수와 마찬가지로 어휘적 범위에서 해결된다., 함수의 에서는, 「화살표」라고 하는 것입니다.this ★★★★★★★★★★★★★★★★★」arguments을 부르다this ★★★★★★★★★★★★★★★★★」arguments환경에서 화살표 기능은 다음과 같이 정의됩니다(즉, 화살표 기능 "표시"):
// Example using a function expression
function createObject() {
console.log('Inside `createObject`:', this.foo);
return {
foo: 42,
bar: function() {
console.log('Inside `bar`:', this.foo);
},
};
}
createObject.call({foo: 21}).bar(); // override `this` inside createObject// Example using a arrow function
function createObject() {
console.log('Inside `createObject`:', this.foo);
return {
foo: 42,
bar: () => console.log('Inside `bar`:', this.foo),
};
}
createObject.call({foo: 21}).bar(); // override `this` inside createObject예에서는, 「 」입니다.this 해서 안에 .createObject·에서는, 「화살표 기능」을 사용합니다this 가리키다thiscreateObject그 자체입니다.
하면 할 때 이 됩니다.this재재: :
// currently common pattern
var that = this;
getData(function(data) {
that.data = data;
});
// better alternative with arrow functions
getData(data => {
this.data = data;
});
이는 화살표 함수의 설정을 할 수 없음을 의미하기도 합니다.this.bind ★★★★★★★★★★★★★★★★★」.call.
할 수 없는 this
은 2. 기능을 할 수 .new
ES2015는 호출 가능한 기능과 구성 가능한 기능을 구분합니다.함수가 구성 가능한 경우 다음과 같이 호출할 수 있습니다.new discriptions.new User(). 할 수 new(예: '예'는 '예'는 '예'는 '예'와 '예'입니다.
함수 선언/식을 통해 생성된 함수는 구성 및 호출이 가능합니다.
화살표 함수(및 메서드)는 호출만 가능합니다. class컨스트럭터만 생성 가능합니다.
호출 불가능한 함수를 호출하거나 구성 불가능한 함수를 구성하려고 하면 런타임 오류가 발생합니다.
이것을 알고 있으면, 다음과 같이 말할 수 있습니다.
교환 가능:
- 「」를하지 않는
this★★★★★★★★★★★★★★★★★」arguments. - 에서
.bind(this)
교환 불가:
- 생성자 함수
- 된 기능/ 사용하므로)
this) - 함수가 「」( 「」)를 사용하는 )
arguments) (아래 참조) - 가 )
function*
예시를 사용하여 이 문제를 자세히 살펴보겠습니다.
생성자 함수
는 '화살표'로 호출할에 이 방법은 사용할 수 없습니다.new. 계속 하거나 를 사용합니다class.
시제품 방법
대부분 그렇지 않을 것입니다. 왜냐하면 프로토타입 방법에는this에 할 수 있습니다.하지 않는 this를 교환할 수 있습니다.구문을 는, 「 」, 「 」를 합니다.class간결한 메서드 구문을 사용합니다.
class User {
constructor(name) {
this.name = name;
}
getName() {
return this.name;
}
}
오브젝트 메서드
오브젝트 리터럴의 메서드도 마찬가지입니다.가 this함수식을 계속 사용하거나 새로운 메서드 구문을 사용합니다.
const obj = {
getName() {
// ...
},
};
콜백
정정사르 르.this or or.bind(this):
// old
setTimeout(function() {
// ...
}.bind(this), 500);
// new
setTimeout(() => {
// ...
}, 500);
단, 콜백을 호출하는 코드가 명시적으로 설정되어 있는 경우this 특히 볼 수 있듯이 은 "jQuery"를 사용합니다.this (오류)arguments화살표 기능을 사용할 수 없습니다!
가변 함수
인 화살표가arguments화살표 기능으로 간단히 대체할 수 없습니다.에서는 ES2015를 하는 대신 ES2015를 사용하는 되었습니다.arguments: rest 파라미터.
// old
function sum() {
let args = [].slice.call(arguments);
// ...
}
// new
const sum = (...args) => {
// ...
};
관련 질문:
- ECMAScript 6의 화살표 기능은 언제 사용해야 합니까?
- ES6 화살표 함수에는 자체 인수가 있습니까?
- ES6 화살표 기능과 Function.protype.bind로 바인딩된 기능 간의 차이점(있는 경우)은 무엇입니까?
- 화살표 함수(공용 클래스 필드)를 클래스 메서드로 사용하는 방법
기타 자원:
화살표 기능 => 지금까지의 ES6 기능 중 최고.ES6에는 매우 강력한 기능이 추가되어 있으며, 항상 사용하고 있습니다.
코드의 기능을 . 할 수 것은 아닙니다. 다음과 같은 경우에 모두 사용할 수는 없습니다.this여기서 화살표 기능을 사용할 수 없습니다.의심할 여지 없이, 화살표 기능은 코드를 단순하게 만들어 주는 훌륭한 추가 기능입니다.
그러나 동적 컨텍스트가 필요한 경우 화살표 함수를 사용할 수 없습니다. 메서드 정의, 생성자 개체 생성, 이벤트 처리 시 대상 가져오기.
화살표 기능은 다음과 같은 이유로 사용하면 안 됩니다.
they they they they they they they they they they they they they
this'어느 인지', '어느 정도인지', '어느 정도인지', '어느 인지', '어느 정도인지', '어느 정도인지'를 알 수 .
this"가 되어야 합니다. ' 범위', '어휘 범위', '어휘 범위', '어휘 범위', '어휘 범위','어휘 범위', '어휘 범위', '어휘 범위', '어휘 범위', '어휘 범위'를 사용합니다.this츠키노they they they they they they they they they they they they they
arguments이 없습니다.
argumentsrest 파라미터를 사용하여 수 .그러나 rest 파라미터를 사용하여 동일한 기능을 구현할 수 있습니다.
let sum = (...args) => args.reduce((x, y) => x + y, 0);
sum(3, 3, 1) // output: 7
사용할 수 없습니다.
new화살표 함수는 프로토타입 속성이 없으므로 생성자가 될 수 없습니다.
화살표 기능을 사용할 때와 사용하지 않을 때:
- 함수를 개체 리터럴의 속성으로 추가하는 데 사용하지 마십시오. 이 속성은 액세스할 수 없습니다.
- 함수식은 객체 메서드에 가장 적합합니다.이나 콜백 등의 합니다.
map,reduce, 「」forEach. - 이름으로 호출하는 함수에 대해 함수 선언을 사용합니다(함수가 중지되어 있기 때문에).
- 콜백에는 화살표 기능을 사용합니다(콜백은 보다 테서인 경향이 있기 때문입니다).
과 함께 '화살표' 기능을 function.prototype.call오브젝트 프로토타입에서 도우미 기능을 만들었습니다.
// Using
// @func = function() {use this here} or This => {use This here}
using(func) {
return func.call(this, this);
}
사용.
var obj = {f:3, a:2}
.using(This => This.f + This.a) // 5
편집
당신은 도우미가 필요 없어요.다음과 같은 작업을 할 수 있습니다.
var obj = {f:3, a:2}
(This => This.f + This.a).call(undefined, obj); // 5
그것들이 항상 같은 것은 아니다.여기 일반 기능 대신 화살표 기능을 사용할 수 없는 경우가 있습니다.
화살표 함수를 생성자로 사용할 수 없습니다.
TLDR:
이는 Arrow Functions가 이 키워드를 사용하는 방법 때문입니다.화살표 함수가 "컨스트럭터"로 호출되는 경우 JS는 단순히 오류를 발생시킵니다.일반 함수를 사용하여 오류를 수정합니다.
자세한 설명:
오브젝트 "컨스트럭터"는 이 키워드에 의존하여 변경할 수 있기 때문입니다.
일반적으로 이 키워드는 항상 글로벌오브젝트를 참조합니다.(브라우저에서는 윈도우 오브젝트입니다).
하지만 다음과 같은 작업을 수행할 때:
function personCreator(name) {
this.name = name;
}
const person1 = new personCreator('John');
새로운 키워드를 사용하면 마법의 일부가 실행되며 personCreator 내부에 있는 이 키워드는 처음에는 글로벌오브젝트를 참조하지 않고 빈 오브젝트가 됩니다.그 후 이 오브젝트를 비우는 name이라는 새로운 속성이 생성되고 그 값은 'John'이 됩니다.마지막으로 이 오브젝트가 반환됩니다.
보시는 바와 같이 new 키워드는 이 값을 글로벌오브젝트 참조에서 빈 오브젝트 {}로 변경하였습니다.
화살표 기능에서는 이 개체를 수정할 수 없습니다.이 오브젝트는 항상 스태틱하게 작성된 범위 내의 오브젝트입니다.이것은 정적 어휘 스코프라고 불립니다.따라서 바인드, 적용 또는 화살표 함수를 사용한 호출 등의 작업을 수행할 수 없습니다.간단히 말하면, 이 값은 작성된 범위 내의 이 값에 한정됩니다.이것은 고의로 만든 것이다.
그리고 이 :D 때문에 화살표 함수를 "컨스트럭터"로 사용할 수 없습니다.
사이드 노트:
어휘 스코프는 함수를 생성하는 영역입니다.예를 들어 다음과 같습니다.
function personCreator(name) {
this.name = name;
const foo = () => {
const bar = () => {
console.log(this); // Output: { name: 'John' }
}
console.log(this); // Output: { name: 'John' }
bar();
}
foo();
}
const person1 = new personCreator('John');
bar의 어휘 범위는 foo 안에 있는 모든 것입니다.이 바의 값은 person Creator의 foo 값입니다.
언급URL : https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable
'programing' 카테고리의 다른 글
| Maria에서 strict 모드 사용 안 함DB (0) | 2023.01.17 |
|---|---|
| PhpStorm을 사용하여 선택 항목을 따옴표로 묶는 방법은 무엇입니까? (0) | 2023.01.17 |
| 왜 JavaScript 평가 기능을 사용하는 것이 나쁜 생각일까요? (0) | 2023.01.17 |
| c 파일 간에 글로벌 변수를 공유하려면 어떻게 해야 합니까? (0) | 2023.01.17 |
| JNI에서 C 구조를 Java 코드로 주고받는 방법은 무엇입니까? (0) | 2023.01.17 |