객체 지향 JavaScript — 함수 및 객체
지금 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
메서드입니다.해시 및 연관 배열
객체 속성은 동적으로 추가 및 제거할 수 있으므로 해시 또는 연관 배열로 사용할 수 있습니다.
해시와 연관 배열은 키-값 쌍일 뿐입니다.
결론
제너레이터로 반복자를 생성할 수 있고 속성과 메서드로 객체를 정의할 수 있습니다.
Reference
이 문제에 관하여(객체 지향 JavaScript — 함수 및 객체), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/object-oriented-javascript-functions-and-objects-5hk4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)