자바스크립트 클래스 상속 메커니즘의 원리 분석

자바스크립트 클래스 상속 메커니즘의 원리 분석_js 객체지향

WBOY

풀어 주다： 2016-05-16 18:46:48

원래의

836명이 탐색했습니다.

현재 JavaScript의 상속 방식은 "extend" 키워드를 통해 구현되지 않고 생성자 함수 및 프로토타입 속성을 통해 구현됩니다. 먼저 동물 클래스를 만듭니다

js 코드

코드 복사 코드는 다음과 같습니다.

 
var 동물 = 함수(){ //생성자 함수 

this .name = 'pipi'; 
this .age = 10 
this .height = 0; ; 
} 
//동물의 인스턴스 만들기 
var a1 = newanimal() 

생성자와 다른 일반 함수의 차이점은 1입니다. 2. 생성자에 있는 this 키워드입니다. 생성자를 호출하면 new 키워드가 사용됩니다. new 연산자를 통해 생성자 동물을 호출한 후 시스템은

코드 복사와 동일한 객체를 반환합니다. 코드는 다음과 같습니다. 다음과 같습니다:

 
var a1 = { name:'pipi' ,age:10,height:0 } 
//또는
var a1 = new Object() 
 a1.name='pipi'; 
a1.age = 10; 
a1.height = 0; 

js 객체를 생성하는 방법과 동일합니다.
이제 js에서 클래스를 정의하는 방법을 알았습니다. 다음으로 고양이를 작성하는 방법을 보여드리겠습니다.

코드 복사 코드

 
var cat = function (){ 
this .play = function (){ 
alert('cat play') 
} 
} 
cat .prototype = new Animal (); 
//prototype 속성은 객체를 가리킵니다
var c1 = new cat() 

이 시점에서 cat은 동물 객체, cat 클래스의 인스턴스 객체 c1에는 name, age, height 및 method play 속성이 있습니다.
그렇다면 프로토타입은 어떤 역할을 할까요?
프로토타입은 포인터와 같아서 객체를 가리키며, 이 객체를 서브클래스 객체의 프로토타입이라고 합니다. cat 객체가 생성되면 cat 생성자에는 프로토타입 속성이 있으므로 cat 인스턴스는 프로토타입 객체를 간접적으로 가리킵니다(각 객체에는 해당 생성자를 가리키는 생성자 속성이 있으므로 간접적이라고 합니다).
그러면 "객체 c1의 이름 속성을 수정하면 해당 프로토타입의 이름 속성 값도 수정되나요?"라는 질문이 제기됩니다. 대답은 '아니요'입니다.
다음 세부 분석:
1. name 속성에 액세스합니다. 먼저 c1.name 속성에 처음 액세스하면 예상한 것과 동일한 "pipi" 값을 얻게 됩니다. 하지만 계산 과정을 모르실 수도 있습니다.
계산 과정은 다음과 같습니다. 1단계: c1 객체에 name 속성이 있는지 확인하고, 있으면 값을 반환하고, 없으면 두 번째 단계로 점프합니다. cat 생성자에 정의되어 있습니다. 2단계: 첫 번째 단계에서 찾지 못한 경우 프로토타입 객체가 가리키는 객체에 간접적으로 접근한다. 프로토타입 객체에서 name 속성을 찾으면 찾은 속성 값을 반환한다. 그래도 찾지 못하면 name 속성을 찾거나 프로토타입 객체가 없을 때까지 프로토타입 객체의 프로토타입 객체를 재귀적으로 검색합니다(할아버지 찾기). 마지막에 name 속성을 찾을 수 없으면 정의되지 않은 값이 반환됩니다.
2. 이름 속성 설정: c1 객체의 이름 속성을 설정하고 c1.name= 'new name'을 호출하면 이 프로세스가 훨씬 간단해집니다. 먼저 개체에 이 속성이 이미 있는지 확인하고, 존재하지 않으면 현재 값을 수정하고, 개체에 새 속성을 추가하고 현재 값을 설정합니다. 값 설정 프로세스 중에는 프로토타입 속성에 액세스하지 않는다는 점을 언급할 가치가 있습니다.
더 깊은 이해를 위해 읽기-쓰기-읽기 과정을 다시 살펴보겠습니다. 처음 읽을 때 자신의 객체에는 name 속성이 없기 때문에 프로토타입 객체의 name 속성 값이 있습니다. 반환됩니다. 두 번째 단계는 name 값을 쓰는 것입니다. 자체 객체에 name 속성이 있는 것도 발견되지 않은 경우 자체 객체에 새 name 속성을 만든 다음 값을 할당합니다. 세 번째 단계는 name 속성을 다시 읽는 것입니다. 두 번째 단계에서 name 속성이 생성되었으므로 두 번째 단계에서 설정한 값이 반환됩니다. 이 세 단계에서 프로토타입 객체의 값이 변경되지 않는다는 점은 언급할 가치가 있습니다.
자, 이것은 JavaScript 개체가 상속을 구현하는 방법에 대한 자세한 분석입니다. 실제로 다른 개체 지향 언어와 달리 JavaScript의 상속 메커니즘은 유형 상속이 아닌 개체의 프로토타입 상속입니다.
하하, 읽어보셔도 좋습니다. 잘못된 점이 있으면 토론해도 좋습니다!