Javascript_javascript 스킬에서 클래스를 정의하는 세 가지 방법에 대한 자세한 설명

약 20년 전, Javascript가 탄생했을 때는 단순한 웹 스크립팅 언어에 불과했습니다. 사용자 이름을 입력하는 것을 잊어버린 경우 경고 팝업이 표시됩니다.

요즘에는 프런트엔드부터 백엔드까지 모든 종류의 놀라운 용도로 거의 전능해졌습니다. 프로그래머는 이를 사용하여 점점 더 큰 프로젝트를 완료합니다.

Javascript 코드의 복잡성도 급증했습니다. 단일 웹 페이지에 10,000줄의 Javascript 코드가 포함되는 것은 오랫동안 일반적이었습니다. 2010년에 한 엔지니어는 Gmail의 코드 길이가 443,000줄이라고 밝혔습니다.

이렇게 복잡한 코드를 작성하고 유지하려면 모듈식 전략이 필요합니다. 현재 업계의 주류 접근 방식은 "객체 지향 프로그래밍"을 채택하는 것입니다. 따라서 자바스크립트로 객체지향 프로그래밍을 어떻게 구현하느냐가 화두가 됐다.
문제는 Javascript 구문이 "클래스"(클래스)를 지원하지 않아 기존 객체 지향 프로그래밍 방법을 직접 사용할 수 없다는 것입니다. 프로그래머들은 Javascript에서 "클래스"를 시뮬레이션하는 방법에 대해 많은 연구를 해왔습니다. 이 글은 자바스크립트에서 "클래스"를 정의하는 세 가지 방법을 요약하고, 각 방법의 특징을 논의하며, 제가 보기에 가장 좋은 방법에 초점을 맞췄습니다.

============================================

Javascript에서 클래스를 정의하는 세 가지 방법

객체 지향 프로그래밍에서 클래스는 동일한 객체 그룹("인스턴스"라고도 함)에 공통적인 속성과 메서드를 정의하는 객체의 템플릿입니다.

Javascript 언어는 "클래스"를 지원하지 않지만 몇 가지 해결 방법을 사용하여 "클래스"를 시뮬레이션할 수 있습니다.

1. 생성자 방식

이것은 고전적인 방법이자 교과서에서 가르쳐야 할 방법입니다. 생성자를 사용하여 "클래스"를 시뮬레이션하고 내부적으로 this 키워드를 사용하여 인스턴스 개체를 참조합니다.

코드 복사 코드는 다음과 같습니다.

함수 Cat() {
　　this.name = "大毛";
}

인스턴스를 생성할 때 new 키워드를 사용하세요.

코드 복사 코드는 다음과 같습니다.

var cat1 = new Cat();
경보(cat1.name); // 다마오

클래스의 속성과 메서드는 생성자의 프로토타입 객체에서도 정의할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

Cat.prototype.makeSound = function(){
Alert("야옹야옹");
}

이 방법에 대한 자세한 소개는 제가 쓴 "Javascript 객체 지향 프로그래밍" 시리즈를 읽어보시기 바랍니다. 여기서는 자세히 설명하지 않겠습니다. 가장 큰 단점은 상대적으로 복잡하고, 이것과 프로토타입을 사용하며, 쓰고 읽는 데 매우 힘들다는 것입니다.

2. Object.create() 메소드

'생성자 메소드'의 단점을 해결하고 보다 편리하게 객체를 생성하기 위해 Javascript의 국제 표준인 ECMAScript 5판(현재 3판이 인기 있음)에서는 새로운 메소드 Object.create()를 제안합니다. .
이 방법을 사용하면 "클래스"는 함수가 아니라 객체입니다.

코드 복사 코드는 다음과 같습니다.

var 고양이 = {
　　이름: "大毛",
　　makeSound: function(){ Alert("야옹야옹") }
};

그런 다음 New를 사용하지 않고 Object.create()를 직접 사용하여 인스턴스를 생성합니다.

코드 복사 코드는 다음과 같습니다.

​var cat1 = Object.create(Cat);
경보(cat1.name); // 다마오
cat1.makeSound(); //야옹야옹

현재 모든 주요 브라우저(IE9 포함)의 최신 버전에서는 이 방법을 배포했습니다. 오래된 브라우저를 사용하는 경우 다음 코드를 사용하여 직접 배포할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

​if (!Object.create) {
　　Object.create = 함수(o) {
　　　 함수 F() {}
　　　F.prototype = o;
　　　새 F()를 반환합니다.
　　};
}

이 방법은 "생성자 메서드"보다 간단하지만 전용 속성과 전용 메서드를 구현할 수 없고 인스턴스 개체 간에 데이터를 공유할 수 없으며 "클래스" 시뮬레이션이 충분히 포괄적이지 않습니다.

3. 미니멀리즘 방식

네덜란드 프로그래머 Gabor de Mooij는 Object.create()보다 나은 새로운 방법을 제안했는데, 그는 이를 "미니멀리스트 접근 방식"이라고 불렀습니다. 제가 추천하는 방법이기도 합니다.

3.1 포장

이 방법은 프로토타입을 사용하지 않고 코드 배포도 매우 간단하기 때문에 "미니멀리스트 방법"이라고 불리는 것 같습니다.

우선 "클래스"를 시뮬레이션하기 위해 객체를 사용하기도 합니다. 이 클래스에서 생성자 createNew()를 정의하여 인스턴스를 생성합니다.

코드 복사 코드는 다음과 같습니다.

var 고양이 = {
​​createNew: 함수(){
　　　 // 여기에 코드가 있습니다
　　}
};

그런 다음 createNew()에서 인스턴스 객체를 정의하고 이 인스턴스 객체를 반환 값으로 사용합니다.

코드 복사 코드는 다음과 같습니다.

var 고양이 = {
​​createNew: 함수(){
　　 var cat = {};
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ Alert("야옹야옹") };
　　　돌아온 고양이;
　　}
};

사용 시 createNew() 메서드를 호출하여 인스턴스 객체를 가져옵니다.

코드 복사 코드는 다음과 같습니다.

​var cat1 = Cat.createNew();
cat1.makeSound(); //야옹야옹

이 방법의 장점은 이해하기 쉽고, 명확하고 우아한 구조를 가지며, 전통적인 "객체 지향 프로그래밍" 구조를 준수하므로 다음 기능을 쉽게 배포할 수 있다는 것입니다.

3.2 상속

한 클래스가 다른 클래스를 상속받게 하면 구현하기 매우 편리합니다. 전자의 createNew() 메서드에서 후자의 createNew() 메서드를 호출하면 됩니다.

먼저 Animal 클래스를 정의합니다.

코드 복사 코드는 다음과 같습니다.

var 동물 = {
​​createNew: 함수(){
　　 var 동물 = {};
동물.수면 = function(){ 경고("수면") };
　　　돌아온 동물;
　　}
};

그런 다음 Cat의 createNew() 메서드에서 Animal의 createNew() 메서드를 호출합니다.

코드 복사 코드는 다음과 같습니다.

var 고양이 = {
​​createNew: 함수(){
　　 var cat = Animal.createNew();
　　　cat.name = "大毛";
　　　cat.makeSound = function(){ Alert("야옹야옹") };
　　　돌아온 고양이;
　　}
};

이런 방식으로 얻은 Cat 인스턴스는 Cat 클래스와 Animal 클래스를 모두 상속합니다.

코드 복사 코드는 다음과 같습니다.

​var cat1 = Cat.createNew();
cat1.sleep(); // 잠자기

3.3 프라이빗 속성과 프라이빗 메서드

createNew() 메소드에서 cat 객체에 정의되지 않은 모든 메소드와 속성은 비공개입니다.

코드 복사 코드는 다음과 같습니다.

var 고양이 = {
​​createNew: 함수(){
　　 var cat = {};
　　 var sound = "야옹야옹야옹";
　　　cat.makeSound = function(){ 경고(소리) };
　　　돌아온 고양이;
　　}
};

위 예제의 내부 변수 sound는 외부에서 읽을 수 없으며 cat의 공용 메소드 makeSound()를 통해서만 읽을 수 있습니다.

코드 복사 코드는 다음과 같습니다.

​var cat1 = Cat.createNew();
경고(cat1.sound); // 정의되지 않음

3.4 데이터 공유

동일한 내부 데이터를 읽고 쓸 수 있으려면 모든 인스턴스 개체가 필요한 경우가 있습니다. 이때 내부 데이터를 클래스 객체 내부와 createNew() 메서드 외부에 캡슐화하기만 하면 됩니다.

코드 복사 코드는 다음과 같습니다.

var 고양이 = {
소리: "야옹야옹야옹",
​​createNew: 함수(){
　　 var cat = {};
　　　cat.makeSound = function(){ 경보(Cat.sound) };
　　　cat.changeSound = function(x){ Cat.sound = x };
　　　돌아온 고양이;
　　}
};

그런 다음 두 개의 인스턴스 객체를 생성합니다.

코드 복사 코드는 다음과 같습니다.

​var cat1 = Cat.createNew();
var cat2 = Cat.createNew();
cat1.makeSound(); //야옹야옹

이때, 한 인스턴스 객체가 공유 데이터를 수정하면 다른 인스턴스 객체도 영향을 받습니다.

코드 복사 코드는 다음과 같습니다.

cat2.changeSound("라라라");
cat1.makeSound(); // 라라라

(끝)