다른 답변에 불만족했습니다. 2019 년 3 월 13 일 현재 가장 많이 투표 된 답변은 사실 틀 렸습니다.
무엇의 짧은 간결한 버전 =>의미는 함수를 작성하는 지름길입니다 및 현재에 바인딩this
const foo = a => a * 2;
효과적으로 지름길입니다
const foo = function(a) { return a * 2; }.bind(this);
단축 된 모든 것을 볼 수 있습니다. 우리는 괄호 나 괄호 가 필요 function하지도 return않았고.bind(this)
화살표 함수의 약간 더 긴 예는 다음과 같습니다.
const foo = (width, height) => {
const area = width * height;
return area;
};
함수에 여러 개의 인수를 원하면 괄호가 필요하고 하나 이상의 표현식을 쓰려면 중괄호와 명시 성이 필요하다는 것을 보여 return줍니다.
.bind부분 을 이해하는 것이 중요 하며 큰 주제입니다. 그것은 무엇을 함께 할 수있다 this자바 스크립트에 의미합니다.
모든 함수에는이라는 암시 적 매개 변수가 this있습니다. this함수를 호출 할 때 설정되는 방법 은 해당 함수의 호출 방법에 따라 다릅니다.
갖다
function foo() { console.log(this); }
정상적으로 전화하면
function foo() { console.log(this); }
foo();
this 전역 객체가됩니다.
엄격 모드 인 경우
`use strict`;
function foo() { console.log(this); }
foo();
// or
function foo() {
`use strict`;
console.log(this);
}
foo();
될 것입니다 undefined
당신은 설정할 수 있습니다 this사용하여 직접 call또는apply
function foo(msg) { console.log(msg, this); }
const obj1 = {abc: 123}
const obj2 = {def: 456}
foo.call(obj1, 'hello'); // prints Hello {abc: 123}
foo.apply(obj2, ['hi']); // prints Hi {def: 456}
this도트 연산자를 사용하여 암시 적으로 설정할 수도 있습니다.
function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola'); // prints Hola {abc:123, bar: f}
함수를 콜백이나 리스너로 사용하려고하면 문제가 발생합니다. 클래스를 만들고 클래스의 인스턴스에 액세스하는 콜백으로 함수를 할당하려고합니다.
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name); // won't work
});
}
}
요소가 이벤트를 발생시키고 함수를 호출 할 때 this값이 클래스의 인스턴스가 아니므로 위의 코드는 작동 하지 않습니다.
이 문제를 해결하는 일반적인 방법 중 하나는 .bind
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}
화살표 구문은 우리가 쓸 수있는 것과 같은 일을하기 때문에
class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}
bind효과적으로 새로운 기능을 만듭니다 . 경우 bind당신은 기본적으로 다음과 같이 자신을 만들 수있는 존재하지 않았다
function bind(funcitonToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}
스프레드 연산자가없는 오래된 JavaScript에서는
function bind(funcitonToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}
코드를 이해하려면 클로저에 대한 이해가 필요 하지만 짧은 버전은 bind항상 원래 함수를 this바인딩 된 값으로 호출하는 새로운 함수입니다 . 화살표 기능은 바로 가기이므로 동일한 기능을 수행합니다.bind(this)
