객체 지향 JavaScript 소개

어떤 이유로 IT 업계에서는 OOP (Object Oriented Programming) 방법을 사용하지 않는 경우 "실제 프로그래머"가 아니라는 견해를 갖는 경향이 있습니다. OOP가 문제를 처리하는 가장 적절한 방법이 아닌 많은 상황이 있기 때문에 실제로 취하는 것은 다소 어리석은 입장입니다. 이것은 Java와 같은 언어의 결함으로, 필요 여부에 관계없이 모든 프로그래밍 작업에 OOP를 강제합니다.

JavaScript (Java와 거의 관련이 없음)는 다른 언어입니다. 대부분의 영역에서 복잡성을 줄이면서 거의 무제한의 자유와 다양성을 제공합니다. 불행히도 JavaScript는 사용자에게 자유를주기 때문에 JavaScript에서 더 복잡한 것들이 있습니다.

OOP가 모든 작업에 항상 적합한 것은 아닌 이유는 프로그램에 더 많은 복잡성을 추가하고 종종 추가 단계, 더 많은 작업 및주의를 기울이지 않으면 잠재적으로 잘못 될 수있는 더 많은 일을 포함하기 때문입니다. 그러나 OOP가 적절한 상황에서 사용된다면 많은 이점을 제공 할 수 있습니다.

OOP가 제공 할 수있는 가장 중요한 이점은 복제입니다. 즉, 필요할 때마다 동일한 프로그램에서 개체를 복제하여 여러 번 재사용 할 수 있습니다. 내재 된 복잡성과 JavaScript가 처음부터 OOP 언어로 구축되지 않았기 때문에 (더 많은 복잡성을 추가 함) OOP가 많은 신생 JavaScript 프로그래머가 날개를 얻기 전에 최후의 경계를 나타내는 이유 중 하나입니다.

알았어, 힘들지만 어렵지 않아

Object Oriented JavaScript의 개념이 너무 많다고 생각하기 전에, OOP를 모르더라도 이미 OOP를 사용하고 있다고 생각하십시오. 순수 주의자들은 동의하지 않을 수도 있지만, 이미 HTML과 CSS를 사용하고 있고 때로는 웹 페이지에서 HTML 요소를 조작하기 위해 JavaScript를 사용했다면 이미 숙련 된 OOP 프로그래머라고 말할 수 있습니다.

웹 페이지의 모든 HTML 요소는 실제로 객체입니다. 이들은 모두 DOM (Document Object Model) 계층 구조에 적합합니다. 즉, 정의 된 클래스, 정의 된 속성 및 정의 된 상속이 있습니다. 속성 값을 명시 적으로 설정하지 않으면 모든 개체가 기본 속성 값을 사용합니다. CSS 명령어를 작성할 때 실제로 일어나는 것은 메서드를 사용하여 클래스의 하나 이상의 속성 값을 수정하는 것입니다.

HTML 명령어를 작성할 때마다 클래스의 새 인스턴스를 만듭니다. 이미 알고 계시 겠지만 각 객체 유형의 미리 정의 된 클래스를 기반으로 고유 한 클래스를 만들 수 있습니다 (예 : 생성 된 원래 클래스와는 매우 다른 속성을 가질 수 있습니다.) 이 클래스의 H2 객체가 일반 H2 객체와 다른 색상 및 크기를 갖도록 지정할 수 있습니다. 또한 이러한 수정 된 개체를 원하는만큼 재사용 할 수 있습니다. 원래 H2 개체는 개체 템플릿이며 새 클래스는 템플릿 클래스에서 파생됩니다.

그렇습니다. OOP는 쉽지는 않지만 이미 그렇게하고있을 것이므로 무엇을 두려워해야합니까?

다음 단계 : 자신 만의 객체 만들기

내장 DOM 객체로 작업하는 것은 너무 쉽습니다. 더 많은 도전이 필요합니다. 자신 만의 객체를 만드는 것이 OOP 수준을 높이는 첫 단계입니다.

이 모든 서문을 통해 아마도 객체를 만드는 것이 많은 복잡한 코드를 요구할 것으로 예상됩니다. Java 또는 C #과 같은 언어로 사용자 정의 객체 클래스를 작성하려고 시도한 경우, 긴 클래스 생성자를 작성해야합니다. 다음은 JavaScript에서 수행하는 방법입니다.

그게 반 기후 였죠? 우리가했던 것은 "myObject"클래스의 빈 객체를 생성 한 것입니다. 분명히 빈 개체는 메모리 공간을 차지하는 것 외에는 아무것도하지 않기 때문에 지루합니다. 유용하게 사용하려면 객체에 내용이 있어야합니다. 더 실용적인 수업을 고려해 봅시다.

위는 objAlien이라는 객체를 보여줍니다.이 객체에는 서로 다른 속성 (일반 변수)과 메서드 (함수)가 정의되어 있습니다. 기술적으로 객체를 변수 및 / 또는 함수의 배열로 간주 할 수도 있습니다.

프로그램에서 객체 사용

객체가 정의되면 프로그램에서 객체를 참조 할 수 있습니다. 게임에는 여러 외계인이 있지만 각 외계인에 대한 코드를 작성하면 프로그램이 너무 번거로울 수 있습니다. 더 좋은 방법은 모든 외계인을 저장할 배열을 만든 다음 외계인 클래스를 사용하여 새 외계인을 만드는 것입니다. 예를 들면 다음과 같습니다.

이 코드는 20 개의 칙칙한 녹색 외계인을 110 픽셀 간격으로 배치합니다. 따라서 외계인을 저장하는 데 사용 된 이미지의 너비가 100 픽셀이고 각 외계인 사이에 10 픽셀의 여백이 있다고 추측 할 수 있습니다. 물론 이것은 더 나은 기술이 있기 때문에 JavaScript로 게임을 구현하는 좋은 방법은 아니지만이 기사는 게임을 만드는 것이 아니라 객체를 만들고 사용하는 것에 관한 것입니다.

새 키워드를 사용하여 개체를 항상 추가 할 필요는 없습니다. 다음은 객체가 다른 객체의 값을 사용하여 자체 속성을 설정하는 프로젝트의 코드 샘플입니다.

 

여기서 객체의 값이 R 객체의 attr 속성으로 전달되는 객체를 사용하는 매우 복잡한 방법을 볼 수 있습니다. JSON (JavaScript Object Notation)에 익숙한 경우 예제의 첫 번째 부분은 구문 오류가있는 JSON을 사용하는 것으로 생각할 수 있지만 실제로는 JSON 코드가 아닙니다.

채우기를 제외한 변수 이름이 인용되는 이유는 JavaScript가 변수 이름 (CSS 속성)에서 빼기 연산자를 처리하지 못하도록하기 위해서입니다. 이 프로그램이 작성된 이후로 font-family와 같은 CSS 속성을 fontFamily로 작성할 수 있도록 변경되었지만이 레거시 코드는 해당 변경을 이용하도록 조정되지 않았습니다.

왜 객체를 사용합니까?

객체는 무언가의 여러 인스턴스를 만들어야하거나 특정 유형의 무언가와 관련된 데이터를 그룹화하는 간단한 방법이 필요한 상황에 가장 적합합니다. 위의 게임 예제에서 objAlien 객체의 여러 복사본을 만들 수 있었지만 객체를 추가 한 후 객체의 속성을 조작 할 수도 있습니다 (이 예에서는 x 속성).

언제 객체를 사용하지 않습니까?

프로젝트에 실제로 필요하지 않은 개체는 사용하지 않아야합니다. 정당한 이유없이 프로그램을 지나치게 복잡하게 만드는 것은 의미가 없습니다. 프로그램이 간단한 작업을 수행하도록 설계된 경우 OOP 기술이 필요하지 않습니다.

다른 OOP 언어의 객체보다 JavaScript 객체를 생성하기 쉬운 이유

Java 및 Visual Basic과 같은 언어에서 개체를 만드는 것은 큰 작업입니다. 객체를 정의하기 전에 클래스 템플릿을 생성 (또는 기존 템플릿을 사용)해야하기 때문입니다. 간단한 구성 기술 (objectname = {…})이 주어 졌기 때문에 JavaScript에서는 필요하지 않습니다. JavaScript의 객체는 배열을 포함한 모든 유형의 변수를 포함 할 수 있으며 유형 선언은 존재하지 않습니다. 반환 값은 선택 사항입니다.

좋은지 나쁜지 여부는 논쟁의 여지가 있지만 존재하지 않는 속성 값을 불러 오려고 시도해도 JavaScript 프로그램도 실패하지 않습니다. 예를 들어, 다음을 입력 한 경우 :

위의 코드 줄에서 ID가 "par5"인 요소 안에 1를 넣을 것으로 예상 할 수 있습니다. 그러나 다음과 같은 것을 입력한다면 :

외계인이 좋아하는 맛을 보지 못하고 par1에 undefined가 표시됩니다. 대부분의 응용 프로그램에서는 문제가되지 않지만 일부 경우에는 문제가됩니다. 이러한 경우,이를 준비하고 유효한 값을 테스트하기 전에이를 테스트하는 코드를 작성해야합니다.

이를 테스트하는 한 가지 방법은 다음과 같습니다.

그 반응은 약간 극단적이지만 아이디어를 얻습니다. "! ="가 아니라 "! =="에 대해 테스트하고 있다는 점에 유의하십시오. 이것은 혼동하기 쉬운 일입니다. 다른 방법은 다음과 같습니다.

같은 것, 다른 방법. 객체를 생성 한 후 객체에 속성을 추가 할 수도 있습니다. 이 방법으로 할 수 있습니다 :

분명히 같은 방식으로 속성 값을 변경할 수도 있습니다. 객체에서 favoriteFlavor 속성을 제거하려면 다음을 수행해야합니다.

이것이 필요한 상황은 거의 없습니다.

보다 재사용 가능한 객체 만들기

다른 유형의 외계인을 원한다면 objAlien.type 속성을 배열로 만들어야한다는 점에서 객체를 만들 때 가장 큰 잠재적 인 문제를 발견했을 것입니다. 그러나 다른 방법이 있습니다.

이 기술을 객체 프로토 타이핑이라고합니다. 즉, 객체의 기본 템플릿을 만들지 만 모든 세부 사항을 채우지는 않습니다. 또한 게임에 객체를 추가하는 실제 방법에 가까워지고 있습니다.

이제 객체의 메소드가 정의되었지만 대부분의 특성이 정의되지 않았 음을 알 수 있습니다. 또한 간단한 변수 대신 객체 선언이 이제 함수 안에 싸여 있습니다. 실제로 객체가 아니기 때문입니다. 실제로 객체를 만들지 않고 객체를 만드는 방법을 설명하는 객체의 프로토 타입 일뿐입니다.

이제 프로토 타입을 기반으로 객체를 실제로 만들려면 다음과 같이하십시오.

이것은 이것을하는 것과 같습니다 :

프로토 타입을 만들었으므로 두 번째 방법으로 프로토 타입을 만들 필요가 없었으며 속도, 팔 수, 무기 및 시작 위치가 다른 다양한 유형의 외계인을 선언하는 것이 훨씬 쉽습니다.

다음은?

이 기사는 Object Oriented JavaScript에 대한 소개로, 주제를 잘 이해하지 못하고 덜 위협적으로 보이게 만들었습니다. 간단한 객체를 생성하는 방법, 속성을 추가, 제거 및 수정하는 방법, 메서드를 선언 및 사용하는 방법, 프로토 타입을 사용하여 객체를보다 쉽게 ​​재사용하는 방법을 포함한 모든 기본 사항을 다루었습니다. 그러나 아직 더 배울 점이 많으므로 이제 시작점이 좋으므로 고급 OOP에 대한 자습서 나 레슨에 자신있게 접근 할 수 있습니다.

보그 단 란 세아

Bogdan은 Inspired Mag의 창립 멤버로서이 기간 동안 거의 6 년의 경험을 축적했습니다. 여가 시간에는 클래식 음악을 공부하고 시각 예술을 탐구하는 것을 좋아합니다. 그는 또한 수정 프로그램에 상당히 집착하고 있습니다. 그는 이미 5를 소유하고 있습니다.