JavaScript 클래스의 작성 방법

저희는 알고 있지만, JavaScript에서는 클래스 개념이 없습니다. 모든 클래스 인스턴스는 동일한 원형 객체에서 속성을 상속받으며, 따라서 원형 객체는 클래스의 핵심입니다.

클래스는 객체의 추상체이며, 객체는 클래스의 구체적인 인스턴스입니다. 클래스는 추상적이며 메모리를 사용하지 않으며, 반면에 객체는 구체적이며 저장 공간을 차지합니다. ——百度百科

초기에 JavaScript의 요구는 매우 간단했으며, 대부분 함수로 작성되었고, 그 뒤로 점차적으로 절차적 접근 방식이 도입되었으며, 그리고 나서 점차적으로 클래스로 작성되었습니다.

JavaScript에서는, 클래스의 본질은 대부분 생성자+원형. 아래서는 JavaScript 클래스의 몇 가지 작성 방법에 대해 논의하겠습니다:

구조화된 함수

/**
* Person 클래스: 이름 속성과 getName 메서드를 정의한 사람
  */
<script>
  function Person(name){
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //여기서 몇 가지 객체를 인스턴스화 합니다
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person);//true
  console.log(p2 instanceof Person);//true
</script>

위 콘솔 출력 결과를 통해 p1와 p2물론 Person 클래스의 인스턴스입니다. instanceof 연산자의 왼쪽은 검사할 클래스의 객체입니다. 오른쪽은 클래스의 생성자 함수입니다. instanceof은 객체 p1Person 클래스에 속하는지 여부입니다.

이 방법의 장점은 매개변수를 사용하여 다른 객체 인스턴스를 생성할 수 있으며, 단점은 각 인스턴스 생성 시 getName 메서드가 생성되어 메모리 낭비가 발생합니다.

외부 함수를 사용하여 클래스 메서드를 대체할 수 있어, 각 객체가 동일한 메서드를 공유할 수 있습니다. 수정된 클래스는 다음과 같습니다:

//외부 함수
<script>
  function getName() {
    return this.name;
  }
  function Person(name){
    this.name = name;
    this.getName = getName;//
  }
</script>

프로토타입 방식

<script>
  function Person(){};
  Person.prototype.name = "trigkit"4";//클래스의 속성은 모두 prototype에 배치됩니다
  Person.prototype.getName = function(){
    return " I'm " + this.name;
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name);//trigkit4
  console.log(p2.getName());//I'm trigkit4
</script>

프로토타입 방식의 단점은 객체 인스턴스를 생성할 때 매개변수를 사용할 수 없음(일반적으로 각 객체의 속성은 다릅니다)이며, 장점은 모든 객체 인스턴스가 getName 메서드를 공유하여 메모리 낭비를 피합니다(생성자 방식에 비해).

생성자+프로토타입 방식
이전 두 가지 방법의 장점을 결합하여:
a) 생성자로 클래스 속성 정의
b) 프로토타입 방식으로 클래스 메서드 정의

<script>
  function Person(name){
    this.name = name;
  }
  //프로토타입의 특성은 객체 인스턴스가 getName 메서드를 공유할 수 있도록 합니다
  Person.prototype.getName = function(){
    return " I'm " + this.name;
  }
</script>

이렇게 하면 다른 속성을 가진 객체를 생성할 수 있고, 객체 인스턴스가 메서드를 공유하여 메모리 낭비를 피할 수 있습니다.

JavaScript 코드 스타일을 더 밀도 있게 만들기 위해, prototype 메서드 코드를 function Person 대括号 안에 이동시킵니다.

<script>
  function Person(name){
    this.name = name;
    Person.prototype.getName = function(){
      return name;//이름을 사용하지 않는 것이 좋습니다
    }
  }
  var p1 = new Person('trigkit4);
  console.log(p1.getName());//trigkit4
</script>

여기서 알아야 할 몇 가지 클래스 정의 방법이 있습니다. 위의 생성자를 제외하고는 다음과 같습니다:

Object.create() 메서드
이 방법을 사용하면, "클래스"는 함수가 아니라 객체가 됩니다.

 var Person = {
    name : "trigkit"4"
    age : 21,
    run: function(){
      alert("I like running");
    }
  }

그런 다음, Object.create()를 사용하여 직접 인스턴스를 생성하면 됩니다. new를 사용하지 않습니다.

var p1 = Object.create(Person);
  alert(p1.age);//21
  p1.run();//I like running

이 방법은 "생성자 함수 방법"보다 간단하지만, 프라이빗 속성과 프라이빗 메서드를 구현할 수 없으며, 인스턴스 객체 간 데이터를 공유할 수 없으며, 클래스를 모의하는 데 충분하지 않습니다.

createNew() 메서드
이 방법은 this와 prototype를 사용하지 않으며, 객체를 사용하여 클래스를 모의하고, 클래스 내에서 생성자 함수 createNew()를 정의하고, createNew() 내에서 인스턴스 객체를 정의하고, 이 인스턴스 객체를 반환하는 방법입니다.

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("I like running");
      };
      return person;
    }
  }
</script>

사용 시 createNew() 메서드를 호출하면 인스턴스 객체를 얻을 수 있습니다.

 var p1 = Person.createNew();
  p1.run();//I like running

이 작성 방식은 객체 표면량 작성 방식과 매우 유사하지만, 하나는 쉼표로 구분되고, 다른 하나는 세미콜론으로 구분됩니다.

이것이 본 문서의 전체 내용입니다. 여러분의 학습에 도움이 되길 바라며,呐喊 튜토리얼에 많은 지지를 부탁드립니다.

고지사항: 본 문서의 내용은 인터넷에서 수집되었으며, 저작권은 원저자에게 있으며, 인터넷 사용자가 자발적으로 기여하고 업로드한 내용입니다. 본 웹사이트는 소유권을 가지지 않으며, 인공적인 편집을 하지 않았으며, 관련 법적 책임을 부담하지 않습니다. 저작권 문제가 있을 경우 notice#w로 이메일을 보내 주시기 바랍니다.3codebox.com에 이메일을 보내면 (#을 @으로 변경해 주세요) 신고하시고 관련 증거를 제공해 주시면, 해당 내용이 확인되면 즉시 해당 내용을 삭제하겠습니다.