집 > 기사 > 웹 프론트엔드 > JavaScript 캡슐화 및 상속을 완료하는 미니멀리스트 방법

JavaScript 캡슐화 및 상속을 완료하는 미니멀리스트 방법

小云云원래의: 2017-11-30 09:25:361457검색

이 글에서는 초보자를 위한 비교적 새로운 지식, 즉 미니멀리스트 방식으로 JavaScript 클래스를 작성하는 방법에 대해 이야기하겠습니다. "미니멀리스트 접근 방식"은 네덜란드 프로그래머 Gabor de의 작품입니다. Mooij가 제안한 이 방법은 이것과 프로토타입을 사용하지 않으며, 코드가 배포하기 매우 간단합니다. 이것이 바로 "미니멀리스트 방법"이라고 불리는 이유일 것입니다. 다음은 미니멀리스트 방식을 사용하여 JavaScript 캡슐화 및 상속을 완료하는 방법을 소개합니다. 이것이 모든 사람에게 도움이 되기를 바랍니다.

1. 캡슐화

　 먼저 "클래스"를 시뮬레이션하기 위해 객체를 사용합니다. 이 클래스에서 생성자 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(); // 喵喵喵

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

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 인스턴스는 Animal 클래스를 상속합니다.

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

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

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(); // 啦啦啦

미니멀리즘은 보기에는 아름답지만 단점도 있습니다. 우선, object가 속한 클래스를 결정하는 데에는 instanceof를 사용할 수 없습니다. "cat1 instanceof Cat"은 통과할 수 없습니다. 또한 미니멀리즘은 프로토타입 체인 사용의 단점(속성은 비공개일 수 없으며 객체 생성 및 상속은 직관적이지 않음)을 제거하지만 프로토타입 체인을 사용하지 않는 단점도 노출합니다. 인스턴스가 생성되면 반드시 더 많은 메모리를 차지하게 됩니다.

위 내용은 JavaScript를 작성하는 최소한의 방법에 대한 내용입니다.

JavaScript 캡슐화 및 상속을 완료하는 미니멀리스트 방법

관련 기사