객체 지향 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 메서드는 value 및 done 속성을 가진 객체를 반환합니다.
value의 값은 yield  .

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

IIFE 대 블록

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

따라서 다음이 있는 경우:

(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'
};

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

그리고 name와 gender는 속성입니다.

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

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

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

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

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

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

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

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

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

그 물체:

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

속성만 있습니다.

속성은 키-값 쌍입니다.

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

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

따라서 다음이 있는 경우:

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

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

해시 및 연관 배열

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

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

결론

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