거의 20 년 전, JavaScript가 태어 났을 때, 그것은 단순한 웹 스크립팅 언어였습니다. 사용자 이름을 채우는 것을 잊어 버리면 경고가 나타납니다.
오늘날, 그것은 거의 전능하게되었으며, 프론트 엔드에서 백엔드까지 모든 종류의 놀라운 용도로 모든 종류의 놀라운 용도가 있습니다. 프로그래머는 점점 더 큰 프로젝트를 완료하기 위해이를 사용합니다.
JavaScript 코드의 복잡성도 급격히 증가했습니다. 단일 웹 페이지에는 10,000 줄의 JavaScript 코드가 포함되어 있으며 오랫동안 평범했습니다. 2010 년 엔지니어는 Gmail의 코드 길이가 443,000 줄이라고 밝혔다!
이러한 복잡한 코드를 작성하고 유지하려면 모듈 식 전략을 사용해야합니다. 현재 업계의 주류 접근 방식은 "객체 지향 프로그래밍"을 채택하는 것입니다. 따라서 JavaScript가 객체 지향 프로그래밍을 구현하는 방법은 인기있는 주제가되었습니다.
문제는 Javascipt 구문이 "클래스"(클래스)를 지원하지 않으므로 전통적인 객체 지향 프로그래밍 방법을 직접 사용할 수 없습니다. 프로그래머는 JavaScript로 "클래스"를 시뮬레이션하는 방법을 연구하기 위해 많은 탐구를 수행했습니다. 이 기사는 "클래스"를 정의하는 JavaScript의 세 가지 방법을 요약하고 각 방법의 특성을 논의하며 내 눈에서 가장 좋은 방법을 강조합니다.
========================================================================
JavaScript에서 클래스를 정의하는 세 가지 방법
객체 지향 프로그래밍에서 클래스는 동일한 객체 그룹 ( "인스턴스"라고도하는 속성 및 메소드를 정의하는 객체에 대한 템플릿입니다.
JavaScript 언어는 "클래스"를 지원하지 않지만 일부 해결 방법을 사용하여 "클래스"를 시뮬레이션 할 수 있습니다.
1. 생성자 방법
이것은 교과서의 고전적인 방법과 필연적 인 방법입니다. 생성자를 사용하여 "클래스"를 시뮬레이션 하고이 키워드를 사용하여 인스턴스 객체를 참조하십시오.
코드 사본은 다음과 같습니다.
기능 cat () {
this.name = "큰 머리";
}
인스턴스를 생성 할 때 새 키워드를 사용하십시오.
코드 사본은 다음과 같습니다.
var cat1 = 새로운 cat ();
경고 (cat1.name); // 큰 머리카락
클래스의 속성과 방법은 생성자의 프로토 타입 객체에 정의 될 수도 있습니다.
코드 사본은 다음과 같습니다.
cat.prototype.makesound = function () {
경고 ( "Meow Meow");
}
이 방법에 대한 자세한 소개는 "JavaScript Object-Oriented Programming"라는 일련의 기사를 참조하십시오. 여기서는 이야기하지 않을 것입니다. 그것의 주요 단점은 비교적 복잡하고 이것과 프로토 타입을 사용한다는 것입니다.
2. Object.create () 메소드
"생성자 방법"의 단점을 해결하고 객체를보다 편리하게 생성하기 위해 ECMAScript의 다섯 번째 판인 JavaScript의 국제 표준 (현재 제 3 판은 사용할 수 있음)을 제안하고 새로운 메소드 객체를 제안했습니다.
이 방법을 사용하면 "클래스"는 함수가 아닌 객체입니다.
코드 사본은 다음과 같습니다.
var cat = {
이름 : "큰 머리",
MOSSOUND : function () {alert ( "Meow Meow Meow"); }
};
그런 다음 객체를 사용하여 ()를 직접 사용하여 새로 사용하지 않고 인스턴스를 생성하십시오.
코드 사본은 다음과 같습니다.
var cat1 = object.create (cat);
경고 (cat1.name); // 큰 머리카락
cat1.makesound (); // MEOW MEOW MEOW MEOW
현재 IE9 포함 된 주요 브라우저의 최신 버전 이이 방법을 배포했습니다. 이전 브라우저가 발생하면 다음 코드를 사용하여 직접 배포 할 수 있습니다.
코드 사본은 다음과 같습니다.
if (! object.create) {
object.create = function (o) {
함수 f () {}
F. 프로토 타입 = O;
새로운 f ()를 반환합니다.
};
}
이 방법은 "생성자 메소드"보다 간단하지만 개인 속성과 개인 메소드를 구현할 수는 없으며 인스턴스 객체간에 데이터를 공유 할 수 없으므로 "클래스"의 시뮬레이션 만 포괄적이지 않습니다.
3. 미니멀리스트 법
네덜란드 프로그래머 Gabor de Mooij는 Object.create ()보다 더 나은 새로운 접근법을 제안했으며, 그는 "미니멀리스트 접근"이라고 불렀습니다. 이것은 또한 내가 권장하는 방법입니다.
3.1 포장
이 방법은이 과정과 프로토 타입을 사용하지 않으며 코드를 배포하기가 매우 간단하므로 아마도 "미니멀리스트 법"이라고합니다.
우선, 객체를 사용하여 "클래스"를 시뮬레이션합니다. 이 클래스에서는 인스턴스를 생성하기 위해 생성자 CreateNew ()를 정의합니다.
코드 사본은 다음과 같습니다.
var cat = {
CreateNew : function () {
// 여기에 일부 코드가 있습니다
}
};
그런 다음 createNew ()에서 인스턴스 객체를 정의 하고이 인스턴스 객체를 리턴 값으로 사용하십시오.
코드 사본은 다음과 같습니다.
var cat = {
CreateNew : function () {
var cat = {};
cat.name = "큰 머리";
cat.makesound = function () {alert ( "Meow Meow"); };
귀환 고양이;
}
};
그것을 사용할 때는 createNew () 메소드를 호출하여 인스턴스 객체를 가져옵니다.
코드 사본은 다음과 같습니다.
var cat1 = cat.createnew ();
cat1.makesound (); // MEOW MEOW MEOW MEOW
이 접근법의 장점은 이해하기 쉽고 명확하고 우아한 구조를 가지고 있으며 기존의 "객체 지향 프로그래밍"구성과 일치하므로 다음 기능을 쉽게 배포 할 수 있다는 것입니다.
3.2 상속
다음 클래스에서 하나의 클래스를 구현하는 것이 매우 편리합니다. CreateNew () 메소드에서 후자의 CreateNew () 메소드를 호출하십시오.
먼저 동물 계급을 정의합니다.
코드 사본은 다음과 같습니다.
var 동물 = {
CreateNew : function () {
var 동물 = {};
Animal.sleep = function () {alert ( "sleep in"); };
반환 동물;
}
};
그런 다음 Cat 's CreateNew () 메소드에서 Animal's CreateNew () 메소드가 호출됩니다.
코드 사본은 다음과 같습니다.
var cat = {
CreateNew : function () {
var cat = Animal.createnew ();
cat.name = "큰 머리";
cat.makesound = function () {alert ( "Meow Meow"); };
귀환 고양이;
}
};
이러한 방식으로 얻은 고양이 인스턴스는 CAT 클래스와 동물 계급을 모두 물려받습니다.
코드 사본은 다음과 같습니다.
var cat1 = cat.createnew ();
cat1.sleep (); // 잠을 자십시오
3.3 개인 속성 및 개인 방법
CREATENEW () 메소드에서 CAT 객체에 정의되지 않은 메소드 및 속성이 비공개 인 한.
코드 사본은 다음과 같습니다.
var cat = {
CreateNew : function () {
var cat = {};
var sound = "Meow Meow Meow";
cat.makesound = function () {alert (sound); };
귀환 고양이;
}
};
위의 예제의 내부 변수 사운드는 외부에서 읽을 수 없으며 Cat의 공개 메소드 Mostound ()를 통해서만 읽을 수 있습니다.
코드 사본은 다음과 같습니다.
var cat1 = cat.createnew ();
경고 (cat1.sound); // 한정되지 않은
3.4 데이터 공유
때로는 동일한 내부 데이터를 읽고 쓸 수있는 모든 인스턴스 객체가 필요합니다. 현재이 내부 데이터를 클래스 객체 내부 및 CreateNew () 메소드 외부에서 캡슐화하십시오.
코드 사본은 다음과 같습니다.
var cat = {
소리 : "Meow Meow Meow",
CreateNew : function () {
var cat = {};
cat.makesound = function () {alert (cat.sound); };
cat.changesound = function (x) {cat.sound = x; };
귀환 고양이;
}
};
그런 다음 두 인스턴스 객체가 생성됩니다.
코드 사본은 다음과 같습니다.
var cat1 = cat.createnew ();
var cat2 = cat.createnew ();
cat1.makesound (); // MEOW MEOW MEOW MEOW
현재 인스턴스 객체가 있고 공유 데이터가 수정되면 다른 인스턴스 객체도 영향을받습니다.
코드 사본은 다음과 같습니다.
cat2.Changesound ( "lalala");
cat1.makesound (); // Lalala
(위에)