JS 계승 메커니즘의 깊은 이해 - 동적 원형에 존재하는 문제점과 해결

3022 단어

JS 계승 메커니즘의 깊은 이해 - 동적 원형에 존재하는 문제점과 해결


준비 사항:


구조 함수: 즉 함수도 클래스이고 new구조 함수일 때 클래스이다.구조 함수 이름을 직접 사용할 때, 그것은 일반 함수의 호출이다.그것은 모든 함수가 구조 함수일 수 있는 것입니까?본인은 문법적으로 옳다고 생각하지만 함수의 최초 창설 목적이 일반 함수로서인지 창설 대상으로서인지 이해해야 합니다.
대상 원형: 대상이 (new)를 만들 때 의존하는 템플릿입니다. 쉽게 말하면 템플릿 안의 원형 속성(방법)은 모든 대상이 공유합니다.원형 참조(prototype)는 기본적으로 new Object() 객체를 가리킵니다.기본 지향 바꾸기: 클래스 이름 (구조 함수 이름).prototype = new 클래스 이름().
상속 메커니즘의 실현:http://www.w3school.com.cn/js/pro_js_inheritance_implementing.asp여기서는 비교적 간단명료하게 말한다.
클래스 정의 방법:http://www.w3school.com.cn/js/pro_js_object_defining.asp, 동적 원형 방식에 주의하세요. 다음은 이런 방식으로 인용된 문제입니다.
이런 지식이 있으면 아래의 내용을 계속할 수 있다.

본문(중점):


다음은 정확한 코드이자 본인이 비교적 추천하는 계승 방식입니다.
function change() {// 
  try {
    var obj = new Man("Curry", 18);
    obj.showDetail();
  } catch(Exception) {
  	alert("Err: " + Exception);
  }
}

function Person(myName, myAge) {
        this.myName = myName;
	this.myAge  = myAge;
	
	if ((typeof Person._init) == "undefined") {
 		Person.prototype.showDetail = function() {
			 alert("I am " + this.myName + ", my age is " + this.myAge);
 		}
 	}
 	Person._init = true;
	 alert("Person");
}

Man.prototype = new Person();//1
//new Man();//2
function Man(myName, myAge){	
	 Person.call(this, myName, myAge);// 
	
	 if ((typeof Man._inited) == "undefined") {
		 //Man.prototype = new Person();//3
 		/*
                   Man.prototype.showDetail = function() {
	           alert("I am " + this.myName + ", my age is " + this.myAge + " and sex is man");
		}//4
		*/	
	}
}

그림의 1234 표시를 주의하십시오. 4는 원형 방법의 덮어쓰기를 실현할 뿐 계속 토론하지 않습니다.

질문:


첫 번째, 1, 2주 3이 열리면 동적 원형법의 표준 형식입니다. 첫 번째 단추를 눌러서change() 방법을 실행할 때 네 번째 줄에서 showDetail()의 오류를 찾지 못하고 다시 눌렀을 때 코드가 정상적으로 작동합니다.
두 번째, 1이 떨어지면 2, 3이 열리고 코드가 정상적으로 작동합니다.
의문: 첫 번째가 왜 그렇게 이상하지?운영 메커니즘은 무엇입니까?어떻게 이런 것들을 하나의 운영 메커니즘으로 통일합니까?
나의 대답: 먼저 new에 들어갈 때(아직 구조 함수 내부에 들어가지 않았을 때) 환경은 기본적인 대상의 원형을 얻기 위해 이 대상을 만들고 (즉 새로 만든 대상은 원형의 속성과 방법을 얻는다.'정확하지 않고 실제적으로 공유하는 것'을 얻은 다음에 구조 함수 내부에서 다른 속성을 실례화한다.

문제 분석:


1. 소스 코드가 왜 정확합니까?코드를 버튼을 눌렀을 때 1이 표시된 코드가 한 번 실행되기 때문에 Man류의 기본 원형 인용은 Object에서 Person을 가리키기 때문에 단추를 눌러서change() 방법을 실행할 때 만들어진 obj 대상은 Person을 원형으로 한다.
2. 첫 번째 질문의 원인(1, 2 내기 3 열기)?첫 번째 단추를 눌렀을 때 기본 원형 인용이 Object를 가리키기 때문에 이 대상은 Person의 showDetail () 방법을 얻지 못하고, 이어서 3을 표시하는 코드를 실행하여 Man류의 기본 원형 인용을 바꾸지만, 이것은 이 대상과 관련이 없다. (본인은 이 대상이 인용이 인용이 그것을 만든 원형 대상을 가리키고 있다고 추측한다.) 이것은 다음에 Man대상을 만드는 것과 관련이 있을 뿐이다.다음 객체는 기본 Person 프로토타입을 기반으로 합니다.두 번째 버튼이 왜 정상적으로 실행되었는지 설명할 수 있다.
3. 두 번째 문제는 더 이상 말하지 않아도 알 수 있을 거라고 믿습니다.실제로 당신이 처음으로 단추를 눌러서change () 방법을 호출했을 때, 이미 두 번째 (파일 불러오는 것은 처음) Man 클래스를 사용하여 대상을 만들었습니다.
전반적으로 위에서 단지 개인의 이해일 뿐이고 개인도 약간의 의문이 해결되지 않았으니 잘못된 점을 바로잡아 주십시오.

좋은 웹페이지 즐겨찾기