JavaScript 는 어떻게 계승 을 실현 합 니까?

12698 단어 JavaScript
최근 인터넷 에서 한 사람 이 타 오 바 오 를 면접 할 때의 경험 을 본 후에 자신 이 잘 모 르 는 부분 이 많다 는 것 을 알 게 되 었 기 때문에 이에 글 을 써 서 자신 이 몇 가지 문제 에 대한 이 해 를 강화 했다.
글 에서 자바 스 크 립 트 는 어떻게 계승 을 실현 합 니까?
 
 다음 에 저 는 인터넷 에서 찾 은 방법 과 사례 를 논술 하여 자신의 인상 을 강화 하도록 하 겠 습 니 다.
우 리 는 자바 스 크 립 트 의 function 이 만능 이라는 것 을 알 고 있 습 니 다. 사용 하 는 함수 정 의 를 제외 하고 클래스 의 정의 에 도 사용 할 수 있 습 니 다.
JavaScript 의 계승 은 말하자면 좀 이상 하 다. C + + 와 대상 을 대상 으로 하 는 언어 와 달리 그 는 Public, private 등 방문 제어 수식 도 없고 implement 또는 다른 특정한 기호 로 계승 을 실현 하 는 것 이 라 고 설명 하지 않 았 다.
javascript 류 의 계승 에 관 해 서 는 아래 의 이 예 를 참고 할 수 있 습 니 다.
 1 <script type="text/javascript"> 

 2 function Person() {

 3     //    

 4     this.Gender = "female";

 5     this.Age = 18;

 6     this.Words = "Silence";

 7     //   

 8     this.shouting = function() {

 9         alert("   !     ");

10     }

11 }

12 //   

13 function Programmer() {

14     this.base = Person;

15 }

16 Programmer.prototype = new Person;

17 //          

18 Programmer.prototype.typeCode = function() {

19     alert("      !IT  ,    。     ");

20 }

21 //     

22 function sayHello() {

23     var a = new Programmer();

24     alert(a.Gender); //        

25     a.shouting(); //        

26     a.typeCode(); //        

27 }        

28 sayHello();

29 </script>

상례 에서 먼저 하나의 person 클래스 를 설명 하 는데 그 안에 속성 과 방법 이 포함 되 어 있 습 니 다. 그 다음 에 programmer 클래스 를 발 표 했 습 니 다. 그 중에서 base 속성 이 있 습 니 다. 이 속성 은 필요 한 것 이 아니 지만 규범 과 앞으로 대상 이 계승 하 는 클래스 를 찾 을 때 모두 적어 야 합 니 다. 그 다음 에 programmer 의 원형 대상 (prototype) 에 person 클래스 를 복사 해 야 합 니 다.그래서 이런 계승 을 실현 했다.
자바 스 크 립 트 의 클래스 와 계승 원 리 를 모 의 합 니 다.
대상 을 대상 으로 하 는 언어 에서 우 리 는 클래스 를 사용 하여 사용자 정의 대상 을 만 듭 니 다.그러나 자 바스 크 립 트 의 모든 것 이 대상 입 니 다. 사용자 정의 대상 을 만 드 는 방법 은 무엇 입 니까?
이 는 또 다른 개념 인 프로 토 타 입 (prototype) 을 도입 해 야 합 니 다. 우 리 는 간단하게 prototype 을 하나의 모델 로 볼 수 있 습 니 다. 새로 만 든 사용자 정의 대상 은 모두 이 모델 (prototype) 의 복사 (실제로 복사 가 아니 라 링크 입 니 다. 다만 이런 링크 는 보이 지 않 고 사람들 에 게 복사 하 는 느낌 을 줍 니 다) 입 니 다.
prototype 을 통 해 사용자 정의 대상 을 만 드 는 예 를 보 여 줍 니 다. 
 1 //     

 2   function Person(name, sex) {

 3       this.name = name;

 4       this.sex = sex;

 5   }

 6   //   Person   ,                

 7   Person.prototype = {

 8       getName: function() {

 9           return this.name;

10       },

11       getSex: function() {

12           return this.sex;

13       }

14   }

여기 서 우 리 는 함수 Person 을 구조 함수, 즉 사용자 정의 대상 을 만 드 는 함수 라 고 부른다.이 를 통 해 알 수 있 듯 이 자바 스 크 립 트 는 구조 함수 와 원형 을 모 의 하여 이러한 기능 을 실현 했다.
다음은 하나의 예 를 통 해 사용자 정의 대상 을 만 들 고 자 바스 크 립 트 가 하 는 구체 적 인 작업 을 구체 적 으로 논술 한다.
1 var zhang = new Person("ZhangSan", "man");

2 console.log(zhang.getName()); // "ZhangSan"

3 var chun = new Person("ChunHua", "woman");

4 console.log(chun.getName()); // "ChunHua"

코드 var zhang = new Person ("ZhangSan", "man") 이 실 행 될 때 사실은 내부 에서 다음 과 같은 몇 가지 일 을 했 습 니 다.
  • 빈 대상 (new Object () 을 만 듭 니 다.
  • Person. prototype 의 속성 (키 쌍) 을 이 빈 대상 에 복사 합 니 다.
  • 이 대상 을 this 키 워드 를 통 해 구조 함수 에 전달 하고 구조 함 수 를 실행 합 니 다.
  • 이 대상 을 변수 zhang 에 할당 합 니 다.
  • 모든 일 을 완성 했다.

  • prototype 모델 이 실제 대상 에 복사 되 는 것 이 아니 라 링크 방식 임 을 증명 하기 위해 다음 코드 를 보십시오.
     1 function Person(name, sex) {
    
     2     this.name = name;
    
     3     this.sex = sex;
    
     4 }
    
     5 Person.prototype.age = 20;
    
     6 var zhang = new Person("ZhangSan", "man");
    
     7 console.log(zhang.age); // 20
    
     8 //   prototype  age  
    
     9 zhang.age = 19;
    
    10 console.log(zhang.age); // 19
    
    11 delete zhang.age;
    
    12 //        age ,      prototype   
    
    13 console.log(zhang.age); // 20

    위의 이 예 에서 만약 에 그 가 복사 해서 얻 은 것 이 라면 이 age 라 는 속성 을 삭제 한 후에 이 대상 에 존재 하지 않 을 것 입 니 다. 그러나 예 에서 age 속성 은 출력 할 수 있 습 니까? 아니면 예전 의 값 을 덮어 쓰 는 것 입 니까? 이것 은 우리 가 하위 클래스 의 같은 이름 의 속성 만 삭 제 했 음 을 나타 냅 니 다.부모 클래스 의 age 속성 은 보이 지 않 는 링크 를 통 해 대상 에 존재 합 니 다.
    어떻게 자 바스 크 립 트 에서 간단 한 계승 을 실현 합 니까?
    다음 예 는 Person 에서 프로 토 타 입 의 모든 속성 을 계승 하 는 직원 클래스 Employee 를 만 들 것 입 니 다.
     1 function Employee(name, sex, employeeID) {
    
     2     this.name = name;
    
     3     this.sex = sex;
    
     4     this.employeeID = employeeID;
    
     5 }
    
     6 //  Employee     Person     
    
     7 //   Person       Person      ,   Employee        Person        。
    
     8 Employee.prototype = new Person();
    
     9 Employee.prototype.getEmployeeID = function() {
    
    10     return this.employeeID;
    
    11 };
    
    12 var zhang = new Employee("ZhangSan", "man", "1234");
    
    13 console.log(zhang.getName()); // "ZhangSan

    자, 이상 은 자바 script 이 계승 을 실현 하 는 구체 적 인 과정 과 계승 을 실현 하 는 방법 입 니 다.
    물론 자 바스 크 립 트 의 계승 메커니즘 은 시 뮬 레이 션 에 만 의존 하고 대상 을 대상 으로 하 는 언어 에 있어 거 칠 고 결함 도 있다. 그러나 전체적으로 보면 이것 은 전단 개발 자의 이 분야 에 대한 열정 을 떨 어 뜨리 지 않 을 것 이다.
      
    마지막 으로 처음으로 블 로 그 를 보 내 면 부족 한 점 이 있 을 수 있 고 여러분 의 지적 과 양 해 를 잊 을 수 있 습 니 다.
    그리고 다음 개인 소 규모 역 을 홍보 합 니 다. www.xiangyifight.com

    좋은 웹페이지 즐겨찾기