집 >웹 프론트엔드 >JS 튜토리얼 >Javascript는 클래스와 객체를 생성합니다(그래픽 튜토리얼)

Javascript는 클래스와 객체를 생성합니다(그래픽 튜토리얼)

亚连원래의: 2018-05-19 10:49:071813검색

Javascript를 사용하여 클래스와 객체를 생성하는 방법에는 여러 가지가 있습니다. 이제 나열해 보겠습니다. 1. 원래 생성 방법, 2. 팩토리 메서드 패턴, 3. 생성자 메서드 패턴, 4. 동적 프로토타입 방법. 아래 예제를 자세히 살펴보겠습니다

이제 Javascript에서 클래스와 객체를 생성하는 여러 가지 방법을 요약합니다:

1. 원래 생성 방법:

<script type="text/javascript">
  var person = new Object();
  person.name="Amy";
  person.sex="Woman";
  person.show=function(){
    document.write("name is: "+this.name+" ; sex is:"+this.sex);
  }
  person.show(); 
</script>

원래 생성 방법은 객체에 익숙한 사람들에게는 받아들이기 어렵습니다. 지향적인 경우, 속성과 메소드의 캡슐화가 그다지 빡빡하지 않다고 항상 느낍니다. 이 캡슐화는 "객체 이름" + "." 형식으로 수행됩니다. 이는 객체 이름 뒤에 오는 속성과 메소드가 소유된 것임을 의미합니다. 이 객체(예: person )는 age 속성을 추가하는 등 메소드와 속성을 계속해서 추가할 수 있습니다. 이 생성 메소드는 사람들이 Java 프로그래밍에 익숙해지도록 해줍니다. 불편한. 원래 생성 메서드를 추가로 "캡슐화"할 수 있습니다. 다음 단계를 참조하세요.

2. 팩토리 메서드 패턴:

 <script type="text/javascript">
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=function(){
       document.write(ob.name+" "+ob.age+" "+ob.sex);
     }
     return ob;
   }
   var person=personFactory("Amy",21,"Woman");
   person.show();
 </script>

팩토리 메서드 패턴은 원래 생성 메서드를 캡슐화하고 생성된 객체를 반환합니다. person 참조 변수에 대해 person은 생성된 객체를 참조할 수 있지만 완벽하지는 않습니다. 객체를 생성하고 해당 객체를 사용하여 show() 메서드를 호출할 때마다 새로운 show() 함수가 생성됩니다. 동일한 show 메소드를 호출할 수 있습니다. 최적화 방법은 다음과 같이 show를 공장 외부에 두는 것입니다.

 <script type="text/javascript">
   function show(){
     document.write(this.name+" "+this.age+" "+this.sex);
   }
   function personFactory(name,age,sex){
     var ob=new Object();
     ob.name=name;
     ob.age=age;
     ob.sex=sex;
     ob.show=show;
     return ob;
   }
   var person=personFactory("Amy",22,"Woman");
   person.show();
 </script>

기능적으로 말하면 위 코드는 함수 재사용 문제를 해결하지만 표시 방법은 사람들에게 친숙한 객체를 생성하는 것과는 다릅니다. Java에서는 여전히 불편함을 느낍니다. 다음 단계를 참조하세요:

3. 생성자 패턴:

 <script type="text/javascript">
   function person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     this.show=function(){
       document.write(this.name+" "+this.age+" "+this.sex);
       document.write("<br>");
     }
   }
   var per=new person("Amy",22,"Woman");
   per.show();
 </script>

위 코드의 생성 방법은 Java 클래스 및 객체의 생성 방법과 거의 동일합니다. 클래스의 속성과 메서드를 캡슐화한 다음 객체를 생성하고 반환하는 new 키워드입니다. Java에서 클래스와 객체를 생성하는 과정이 아닌가요? 네, 이런 과정이지만 이렇게 생성된 객체가 show 메소드를 호출하면 최적화될 수도 있습니다. 또한 즉시 표시 기능을 생성할 수 있습니다. 모든 객체에 공통되는 메소드는 어떻습니까? Java 클래스의 정적 메서드와 마찬가지로 모든 개체는 동일한 정적 메서드를 사용하므로 대답은 '예'입니다. 다음 단계를 참조하세요:

4. 동적 프로토타입 방법:

 <script type="text/javascript">
   function Person(name,age,sex){
     this.name=name;
     this.age=age;
     this.sex=sex;
     if(typeof Person.tag == "undefined"){
       Person.prototype.show=function(){
         document.write(this.name+" "+this.age+" "+this.sex);
         document.write("<br>");
       }
       Person.tag=true;
     }
   }
   var per=new Person("Peter",22,"Man");
   per.show();
 </script>

여기서 약간의 트릭이 사용됩니다. new로 객체가 생성되면 Person 함수 블록의 if 판단 문이 위에서부터 순서대로 실행됩니다. 하단, 태그 변수로 시작 물론 정의되어 있지 않으므로 if 문 블록의 내용이 실행됩니다.

Person.prototype.show=function(){
 document.write(this.name+" "+this.age+" "+this.sex);
 document.write("<br>");
 }

이 내용의 의미는 Person 클래스에 속하는 show 메소드를 생성한다는 것입니다. 클래스 메소드는 Java의 정적 수정 메소드와 동일하며 단일 객체의 메소드가 아니므로 모든 객체가 동일한 메소드를 호출할 수 있으므로 매번 자체 show 함수를 생성할 필요가 없습니다. 다른 개체가 메서드를 호출하므로 공간과 시간이 절약됩니다. 이 방법이 더 좋지 않을까요? 여기서 설명하자면, "class name.prototype.property/method" 메소드에서 생성된 속성 및 메소드는 Java에서 static으로 수정된 변수 또는 메소드와 동일하며 단일 객체, 즉 전체 클래스에 속합니다. , 모든 개체가 공유됩니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

Javascript는 클래스와 객체를 생성합니다(그래픽 튜토리얼)

관련 기사