Computer >> 컴퓨터 >  >> 프로그램 작성 >> JavaScript

JavaScript에서 함수 체인이란 무엇입니까?

<시간/>

함수 연결

함수 연결 점 표기법을 사용하여 한 줄로 함수를 그룹화하는 것에 불과합니다. . 이러한 유형의 연결은 코드를 매우 간결하게 만들고 성능도 향상시킵니다. 여기에서 함수 연결을 배울 것입니다. 일반 개체 사용

a) 기능 연결 없이

다음 예에서 개체 'obj'가 생성되고 해당 개체에서 공개 속성 'i'라는 키워드는 'this' 키워드를 사용하여 생성됩니다. 초기에 값 0을 할당했습니다. 나중에 add(),subtract() 및 print()라는 사용자 정의 함수가 동일한 객체 'obj' 내부에 생성됩니다. 이제 "obj" 개체는 클래스처럼 작동합니다(다른 개체와 속성을 공유할 수 있음).

이제 키워드 'new'를 사용하여 'x'(사용자 정의)라는 개체가 하나 더 생성되고 개체 "obj"의 속성을 사용할 수 있도록 액세스할 수 있습니다. add(),subtract(),print()와 같은 "obj" 내부에 선언된 함수는 반환되지 않기 때문에 함수 연결 불가능하고 정의되지 않음 는 출력으로 표시되는 반면 개별적으로(연결되지 않은) 해당 기능은 3(사용자 제공 '5-2')으로 출력을 실행합니다.

예시

<html>
<body>
<script>
   var obj = function(){
      this.i = 0;
      this.add = function(i){
         this.i += i;
       };
       this.subtract = function(i){
          this.i -= i;
       };
       this.print = function(){
          document.write(this.i);
          document.write("</br>");
          document.write(x.add(3));  // returns undefined
       }
   }
   var x = new obj();
   x.add(5);
   x.subtract(2);
   x.print(); // 5-2 = 3 so prints 3.
   x.add(5).subtract(2).print();  //  function chaining is not possible so undefined
</script>
</body>
</html>

출력

3
undefined

b) 기능 연결 사용

다음 예제에서는 위의 예제 시나리오를 고려하여 사용자 정의 "return this" 문을 사용하여 add() 및subtract()와 같은 함수가 반환되고 출력으로 3을 표시하여 거기에서 함수 체이닝을 가능하게 합니다.

예시

<html>
<body>
<script>
   var obj = function(){
      this.i = 0;
      this.add = function(i){
         this.i += i;
         return this;
      };
      this.subtract = function(i){
         this.i -= i;
         return this;
      };
      this.print = function(){
         document.write(this.i);
      }
   }
var x = new obj();
x.add(5).subtract(2).print();
</script>
</body>
</html>

출력

3