> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 캡슐화 및 상속을 완료하는 미니멀리스트 방법

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

小云云
풀어 주다: 2017-11-30 09:25:36
원래의
1493명이 탐색했습니다.

이 글에서는 초보자를 위한 비교적 새로운 지식, 즉 미니멀리스트 방식으로 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 개체. -지향(미니멀리스트 방법).js 객체 지향

JavaScript 예외 처리 방법

캡슐화를 구현하는 세 가지 방법 소개 및 JavaScript 시뮬레이션의 차이점

위 내용은 JavaScript 캡슐화 및 상속을 완료하는 미니멀리스트 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿