자바스크립트에 클래스를 정의하는 방법이 있나요?

Javascript에는 클래스를 정의하는 메서드가 있습니다. 방법: 1. 생성자를 사용하여 클래스를 정의합니다. 구문은 "function name() {this.name = "...";}"입니다. 2. "Object.create()" 메서드를 사용하여 클래스를 정의합니다. 3. 클래스에서 생성자를 정의하고 함수에서 인스턴스 객체를 정의한 다음 함수를 다시 호출하여 클래스를 정의합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에 클래스를 정의하는 방법이 있나요

JavaScript에 클래스를 정의하는 방법이 있나요

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

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

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

1. 생성자 방식

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

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

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

　　var cat1 = new Cat();
　　alert(cat1.name); // 大毛

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

　　Cat.prototype.makeSound = function(){
　　　　alert("喵喵喵");
　　}

가장 큰 단점은 상대적으로 복잡하고, 이것과 프로토타입을 사용하며, 쓰고 읽는 데 매우 힘들다는 것입니다.

2. Object.create() 메서드

"생성자 메서드"의 단점을 해결하고 보다 편리하게 객체를 생성하기 위해 Javascript의 국제 표준인 ECMAScript 제5판에서는 새로운 메서드를 제안합니다. 객체.생성().

이 방법을 사용하면 "클래스"는 함수가 아니라 객체입니다.

　　var Cat = {
　　　　name: "大毛",
　　　　makeSound: function(){ alert("喵喵喵"); }
　　};

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

　　var cat1 = Object.create(Cat);
　　alert(cat1.name); // 大毛
　　cat1.makeSound(); // 喵喵喵

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

　　if (!Object.create) {
　　　　Object.create = function (o) {
　　　　　　 function F() {}
　　　　　　F.prototype = o;
　　　　　　return new F();
　　　　};
　　}

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

3. 미니멀리스트 접근 방식

네덜란드 프로그래머 Gabor de Mooij는 이 방식을 "미니멀리스트 접근 방식"이라고 불렀습니다. 제가 추천하는 방법이기도 합니다.

3.1 Encapsulation

이 방법은 this와 프로토타입을 사용하지 않고, 코드 배포도 매우 간단해서 "미니멀리스트 방법"이라고 불리는 이유일 것입니다.

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

　　var Cat = {
　　　　createNew: function(){
　　　　　　// some code here
　　　　}
　　};

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

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　cat.name = "大毛";
　　　　　　cat.makeSound = function(){ alert("喵喵喵"); };
　　　　　　return cat;
　　　　}
　　};

사용시 createNew() 메소드를 호출하여 인스턴스 객체를 얻어옵니다.

　　var cat1 = Cat.createNew();
　　cat1.makeSound(); // 喵喵喵

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

3.2 상속

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

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

　　var Animal = {
　　　　createNew: function(){
　　　　　　var animal = {};
　　　　　　animal.sleep = function(){ alert("睡懒觉"); };
　　　　　　return animal;
　　　　}
　　};

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

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = Animal.createNew();
　　　　　　cat.name = "大毛";
　　　　　　cat.makeSound = function(){ alert("喵喵喵"); };
　　　　　　return cat;
　　　　}
　　};

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

　　var cat1 = Cat.createNew();
　　cat1.sleep(); // 睡懒觉

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

createNew() 메서드에서는 메서드와 속성이 cat 객체에 정의되지 않은 한 프라이빗입니다.

　　var Cat = {
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　var sound = "喵喵喵";
　　　　　　cat.makeSound = function(){ alert(sound); };
　　　　　　return cat;
　　　　}
　　}

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

　　var cat1 = Cat.createNew();
　　alert(cat1.sound); // undefined

3.4 데이터 공유

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

　　var Cat = {
　　　　sound : "喵喵喵",
　　　　createNew: function(){
　　　　　　var cat = {};
　　　　　　cat.makeSound = function(){ alert(Cat.sound); };
　　　　　　cat.changeSound = function(x){ Cat.sound = x; };
　　　　　　return cat;
　　　　}
　　};

그러면 두 개의 인스턴스 객체가 생성됩니다:

　　var cat1 = Cat.createNew();
　　var cat2 = Cat.createNew();
　　cat1.makeSound(); // 喵喵喵

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

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

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 자바스크립트에 클래스를 정의하는 방법이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!