당신은 자바 스크립트를 작성하고 갑자기 당신이 거대한 기능을 작성했습니다 공포와 공포로 실현하고 있습니다. 그것은 우리의 최고 일어난. 이제 기능을 더 작은 조각으로 분리하려는 거의 멈출 수없는 충동이 온다.
큰 함수는 한 곳에서 많은 책임을 의미하며 코드 냄새도 가능하므로 그 자체로 좋은 생각입니다. 하지만 함수의 의미나 컨텍스트를 잃지 않도록 함수를 분리하려고 합니다. 이를 위해서는 메소드 체인(함수 체인이라고도 함)을 생각해야합니다. 이 기사는 내가 의미하는 바를 설명 할 것입니다.
전제 조건
시작하기 전에 이미 숙지해야 할 몇 가지 자바스크립트 개념이 있습니다:
- 화살표 함수
- 배열 메서드
- 비동기 함수
대부분의 숙련 된 개발자는 맵,축소 및 필터와 같은Array메서드에 대한 경험이 있습니다. 당신은 아마 이미 이런 식으로 뭔가를 건너 왔어요:
const food = ;// This type of usage is very commonfood .map(item => item.type) .reduce((result, fruit) => { result.push(fruit); return ; }, );// result: 메소드 체인은 동일한 객체 및 해당 참조를 사용하여 여러 함수를 호출 할 때 발생합니다. 위의 예에서 배열 메서드map은Array를 반환하며,이 메서드는 엄청난 수의 메서드를 포함합니다.
Array를 가리키는 참조를 반환하므로Array의 모든 속성에 액세스할 수 있습니다. 그것은 당신이 당신의 자신의 방법 체인에 사용하는 것과 동일한 원리입니다.
이
을 더 잘 이해하면this의 모든 뉘앙스를 다루지는 않겠지 만this가 왜 작동 하는지를 이해하는 것이 좋습니다. 아무리 당신이 얼마나 경험,키워드이 이해하기 어려울 수 있습니다. 그것은 종종 일이 당신이 그들을 기대하는 방식으로 작동하지 않는 이유입니다.this는 항상 현재scope또는 호출 된 인스턴스를 가리 킵니다. 예를 들어:
const dog = { is: null, log: () => console.log(this.is), bark() { this.is = "woofing"; this.log(); return this; }, walk() { this.is = "walking"; this.log(); return this; }, eat() { this.is = "eating"; this.log(); return this; }};dog .bark() .eat() .walk();이 같은 함수를 작성할 때(말장난 의도 없음)개체와 관련된 메서드를 체인화할 수 있습니다. 개체dog에는walk,bark및eat의 세 가지 방법이 있습니다. 내가 그 기능을 호출 할 때마다,콘솔은 개가 그 정확한 순간에 무엇을하고 있는지에 대한 표현을 보여 주어야합니다.
하지만 문제가 있습니다. 브라우저에서 실행하면 예상대로 작동하지 않는다는 것을 알 수 있습니다. 화살표 함수는 어휘 범위 지정을 사용하기 때문에this는 객체 자체가 아닌 주변 범위(이 경우window)를 나타냅니다.
이 문제를 해결하려면log속성을 나타내는 익명 함수 호출을 사용해야 합니다:
// instead of this: log: () => console.log(this.is),// use this: log() { console.log(this.is); }이제 강아지의this범위는 기능 내에서 액세스 할 수 있습니다.
클래스 사용
클래스를 사용하여 동일한 결과를 얻을 수 있습니다:
class Dog { is = null; log() { console.log(this.is); } bark() { this.is = "woofing"; this.log(); return this; } walk() { this.is = "walking"; this.log(); return this; } eat() { this.is = "eating"; this.log(); return this; }}const dog = new Dog();dog .bark() .eat() .walk();프로토 타입 사용
프로토 타입을 사용해야하는 경우 다음과 같이 수행하십시오:
function Dog() {}Dog.prototype.is = null;Dog.prototype.log = function() { console.log(this.is);};Dog.prototype.bark = function() { this.is = "woofing"; this.log(); return this;};Dog.prototype.walk = function() { this.is = "walking"; this.log(); return this;};Dog.prototype.eat = function() { this.is = "eating"; this.log(); return this;};const dog = new Dog();dog .bark() .eat() .walk();비동기 함수는 어떻습니까?
async기능은 약속과 발전기를 위한 합성 설탕입니다. async함수를 선언하면 해당 함수가 약속을 반환한다는 것을 알 수 있습니다. 그 때문에,당신은 또한 약속의 모든 방법에 액세스 할 수 있습니다.
const requests = { user: null, action: null, log(something) { console.log(this); }, async getUser() { this.user = await new Promise(resolve => { setTimeout(() => { resolve("Douglas Pires"); }, 1000); }); this.log("user"); return this; }, async registerAction() { this.action = await new Promise(resolve => { setTimeout(() => { resolve("programming stuff"); }, 1000); }); this.log("action"); return this; }};requests.getUser().then(() => requests.registerAction());그러나 많은 약속을 함께 묶는 것은 좋은 생각이 아닙니다. 대신await키워드를 사용하는 것이 좋습니다. 그것은 더 쉽고 코드를 훨씬 더 읽기 쉽게 만들 것입니다.
await requests.getUser(); // Douglas Piresawait requests.registerAction(); // programming여기에서 동일한 속성에 액세스 할 수 있습니다:
console.log(requests.user); // Douglas Piresconsole.log(requests.action); // programming결론적으로
체인 함수는 객체를 조작해야 할 때 유용합니다. 또한 코드의 가독성을 향상시키는 실용적인 방법이기도합니다. 그러나 위에서 보았 듯이 현명하게 연결해야합니다.
이 문서에서는this,클래스,프로토타입 및async함수에 대해 자바스크립트 메서드 체인 컨텍스트에서 설명했습니다. 난 당신이 몇 가지 유용한 팁을 집어 이제 더 나은 주제에 대한 정보를 바랍니다. 자바 스크립트 메소드 체인의 모든 코드가 포함 된 내 저장소를 찾을 수 있습니다. 다음 포스트에서 보자!
이 기사를 읽고 즐겼다? 아래의 버튼을 사용하여 소셜 미디어에 공유 주시기 바랍니다. 또는 눅 스트 및 뷰티프를 사용하여 색상 팔레트 생성기를 만드는 방법에 대해서도 작성했습니다. 그것을 확인 이동!
