객체 지향 JavaScript — 함수 및 객체

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

JavaScript는 부분적으로 객체 지향 언어입니다.

JavaScript를 배우려면 JavaScript의 객체 지향 부분을 배워야 합니다.

이 기사에서는 함수와 객체를 살펴보겠습니다.

반복자



반복자는 JavaScript의 제너레이터 함수로 생성할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

function* genFn() {
  yield 1;
  yield 2;
  yield 3;
}

function* 키워드로 표시되는 생성기 함수가 있습니다.

그런 다음 iterator를 반환하도록 호출할 수 있습니다.

const gen = genFn();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());


반복자를 얻기 위해 genFn를 호출했습니다.

그런 다음 반환된 반복자에서 next를 호출했습니다.

그리고 next 메서드는 valuedone 속성을 가진 객체를 반환합니다.
value의 값은 yield  .

그리고 done는 모든 값이 반환되는지 여부를 나타내는 부울입니다.

IIFE 대 블록



블록에 변수를 포함하기 위해 IIFE가 더 이상 필요하지 않습니다.
letconst를 사용하여 블록 범위 변수를 선언할 수 있습니다.

따라서 다음이 있는 경우:

(function() {
  var foo = 0;
}());
console.log(foo);


그러면 콘솔 로그에 'Uncaught ReferenceError: foo is not defined' 오류가 발생합니다.

블록의 let 또는 const 변수로 동일한 작업을 수행할 수 있습니다."

{
  let foo = 1;
  const bar = 2;
}


화살표 함수



화살표 함수는 콜백을 만드는 데 유용합니다.

예를 들어, 종종 다음과 같은 코드를 작성해야 합니다.

$("#submit-btn").click(function(event) {
  validateForm();
  submit();
});


화살표 함수는 조금 더 짧고 함수에서 this 값에 대해 걱정할 필요가 없습니다.

대신 다음과 같이 작성할 수 있습니다.

$("#submit-btn").click((event) => {
  validateForm();
  submit();
});


다양한 방법으로 화살표 함수를 작성할 수 있습니다. 그들은:
  • 매개변수 없음: () => {...}
  • 하나의 매개변수: a => {...}
  • 둘 이상의 매개변수: (a,b) => {...}

  • 화살표 함수는 명령문 블록 본문 또는 표현식을 모두 가질 수 있습니다.

    다음과 같은 명령문 블록을 가질 수 있습니다.

    n => {
      return n ** 2;
    }
    


    그리고 다음과 같은 식을 가질 수 있습니다.

    n => n ** 2;
    


    사물



    객체는 객체 지향 프로그래밍의 가장 중심적인 부분입니다.

    다양한 속성과 메소드로 구성되어 있습니다.

    그리고 속성은 기본 값이나 다른 객체를 포함할 수 있습니다.

    다음과 같이 작성하여 객체를 생성할 수 있습니다.

    const person = {
      name: 'james',
      gender: 'male'
    };
    


    객체는 중괄호로 둘러싸여 있습니다.

    그리고 namegender는 속성입니다.

    키는 따옴표로 묶을 수 있습니다.

    예를 들어 다음과 같이 작성할 수 있습니다.

    const person = {
      'name': 'james',
      gender: 'male'
    };
    


    속성 이름이 JavaScript의 예약어 중 하나인 경우 속성 이름을 인용해야 합니다.

    공백이 있는 경우에도 인용해야 합니다.

    숫자로 시작하는 경우에도 인용해야 합니다.
    {}로 객체를 정의하는 것을 객체 리터럴 표기법이라고 합니다.

    요소, 속성, 메서드, 구성원



    배열은 요소를 가질 수 있습니다.

    그러나 개체에는 속성, 메서드 및 멤버가 있습니다.

    그 물체:

    const person = {
      name: 'james',
      gender: 'male'
    };
    


    속성만 있습니다.

    속성은 키-값 쌍입니다.

    값은 무엇이든 될 수 있습니다.

    메서드는 함수 값이 있는 속성일 뿐입니다.

    따라서 다음이 있는 경우:

    const dog = {
      name: 'james',
      gender: 'male',
      speak() {
        console.log('woof');
      }
    };
    


    그런 다음 speak 메서드입니다.

    해시 및 연관 배열



    객체 속성은 동적으로 추가 및 제거할 수 있으므로 해시 또는 연관 배열로 사용할 수 있습니다.

    해시와 연관 배열은 키-값 쌍일 뿐입니다.

    결론



    제너레이터로 반복자를 생성할 수 있고 속성과 메서드로 객체를 정의할 수 있습니다.

    좋은 웹페이지 즐겨찾기