캐시 호출 체인을 사용하여 JS 메서드 오버로드를 구현하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-06-01 14:18:29
원래의
1090명이 탐색했습니다.

이번에는 캐시 호출 체인을 사용하여 JS 메소드 오버로딩을 구현하는 단계에 대해 자세히 설명하고 캐시 호출 체인을 사용하여 JS 메소드 오버로드를 구현하는 주의사항은 무엇인지 설명하겠습니다. 사례를 살펴보겠습니다.

1. 메소드 오버로딩이란

메서드 오버로딩은 클래스에 동일한 이름을 가진 여러 메소드를 정의하는 것을 말하지만, 각 메소드는 서로 다른 매개변수 유형이나 매개변수 개수를 가져야 합니다.

간단히 말하면, 메소드 오버로딩은 반복되는 메소드 이름과 다른 로딩 매개변수를 의미합니다.

자세한 내용은 왼쪽으로 가세요: 메소드 오버로딩/바이두 백과사전

그러면 js는 이것을 어떻게 구현합니까? ? ?

2.js를 어떻게 구현하나요?

먼저

javascript에는 함수/메소드를 오버로딩하는 개념이 없지만, js는 인수라는 메소드 매개변수를 제공합니다. 이 매개변수의 길이 속성을 통해 메소드 매개변수의 길이를 얻을 수 있습니다. 방식, 오늘 구현해 보겠습니다. 매개변수 유형이 아닌 매개변수 길이에 따라서만 오버로드됩니다~~·길이, 다운로드의 경우 메소드 매개변수 길이를 사용할 수 있게 되면 보다 일반적인 스위치 작성 방법이 나타납니다:

var seven={
  dosomething:function(){
    switch(arguments.length){
      case 0:
        console.log(arguments.length);
        //dosomething
        break;
      case 1:
        console.log(arguments.length);
        //dosomething
        break;
       case 2:
        //dosomething
        console.log(arguments.length);
        break;
    }
  }
}
로그인 후 복사

3. 최적화

와우~ 10개의 메소드가 있으면 10개의 브랜치가 필요하고~ 유지관리가 매우 어렵습니다~ 각 메소드 본체가 케이스에 들어있거나, 따로 제안해서 함수로 작성하기 때문이죠~

그러면 이것들은 나쁘다~ 유지하기 어렵고, 충분히 높지 않다~ 그러면 다른 매개변수를 사용하여 동일한 메소드 이름을 어떻게 우아하게 처리해야 할까요?

apply 메소드를 사용하는 곳입니다.

세븐에 대한 addMethod 메소드를 작성해보겠습니다

var seven = {
  addMethod: function (fname, func) {
    var old = this[fname];
    this[fname] = function () {
      if (arguments.length == func.length) {
        return func.apply(this,arguments);
      }
      if (typeof old == 'function') {
        return old.apply(this, arguments);
      }
    }
  }
};
로그인 후 복사
addMethod方法
seven.addMethod('dosomething', function (x) {
  console.log(arguments.length);
   //dosomething
});
seven.addMethod('dosomething', function (x,y) {
  console.log(arguments.length);
   //dosomething
});
seven.addMethod('dosomething', function (x,y,z) {
  console.log(arguments.length);
   //dosomething
});
로그인 후 복사

修改后的seven如上,然后之前写的switch就可以这样搞了:

rrreee

咱们要增加方法,只需要调用这个addMethod方法就ok了,是不是觉得简单明了,更加清晰。
那么这段代码的原理呢,其实也很简单,就是缓存旧方法,然后根据参数长度依次apply链式调用,直到找到和当前参数等长的方法~然后进行调用。

funcold수정된 세븐은 위와 같으며, 앞서 작성한 스위치는 다음과 같이 하면 됩니다.

rrreee

메소드를 추가하려면 addMethod 메소드만 호출하면 됩니다. 더 간단하고 명확하지 않나요?

그래서 이 코드의 원리는 사실 매우 간단합니다. 기존 메소드를 캐시한 후, 현재 매개변수와 동일한 길이의 메소드를 찾을 때까지 매개변수 길이에 따라 순차적으로 체인 호출을 적용한 후 호출하는 것입니다.

funcold는 이 분야에 처음 입문하는 사람들을 혼란스럽게 할 수 있습니다. 실제로 여기서는 JavaScript 언어의 기능이 교묘하게 사용됩니다. . 오래된 것이 저장될 때마다 마지막 방법에 대한 참조가 매번 새로운데, 오래된 오래된 것이 참조를 유지합니다. 폐쇄~.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:

Vue 프로젝트에서 Vux를 사용하는 방법

🎜🎜Vue에서 슬롯을 사용하여 상위 구성 요소를 배포하는 방법🎜🎜🎜

위 내용은 캐시 호출 체인을 사용하여 JS 메서드 오버로드를 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿