Javascript의 클래스 생성 및 객체에 대한 자세한 설명-JS 튜토리얼-php.cn

Javascript의 클래스 생성 및 객체에 대한 자세한 설명

黄舟

풀어 주다： 2017-05-31 10:05:04

원래의

1155명이 탐색했습니다.

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>

로그인 후 복사

원래 생성 방법은 객체 지향에 익숙한 사람들을 위한 것입니다. 저는 항상 속성과 메서드의 캡슐화가 그다지 촘촘하지 않다고 생각합니다. 이 캡슐화는 "객체 이름" + "." 형식으로 이루어집니다. 즉, 속성과 메서드 뒤에 객체 이름이 따른다는 의미입니다. 이 개체(예: 사람)는 캡슐화된 결과입니다. 예를 들어 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

referencevariable에 대해 사람은 생성된 개체를 참조할 수 있지만 아직 완벽하지는 않습니다. 매번 개체를 만들고 이 개체를 사용하여 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>

로그인 후 복사

기능적으로 말하면 위 코드는 함수 재사용 문제를 해결하지만 표시 방법은 그렇지 않습니다. 객체를 생성하는 데 익숙하지 않은 사람들은 여전히 불편함을 느낍니다. 다음 단계를 참조하세요:

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 클래스의

static 메소드와 마찬가지로 모든 객체는 동일한 정적 메소드를 사용하며 대답은 '예'입니다. 다음 단계를 참조하세요:

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 함수 블록의 ifjudgment 문이 실행됩니다. 물론 처음에는 태그 변수가 정의되어 있지 않으므로 if 문 블록에 있는 내용이 실행됩니다.

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

로그인 후 복사

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

위 내용은 Javascript의 클래스 생성 및 객체에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!