Javascript 비생성자 상속 예제에 대한 자세한 설명

이 글에서는 생성자를 사용하지 않고 "상속"을 구현하는 방법을 소개합니다. 주의 깊게 이해하면 매우 익숙해질 것입니다.

1. "비생성자" 상속이란 무엇입니까?

예를 들어 "중국어"라는 개체가 있습니다.

var Chinese = { nation:'中国' };

"닥터"라는 개체가 또 있습니다.

　var Doctor ={ career:'医生' }

"Doctor"가 " Chinese"를 상속받게 하려면 어떻게 해야 합니까? 즉, "China Doctor"의 개체를 어떻게 생성할 수 있습니까?

여기서 이 두 개체는 생성자가 아닌 일반 개체이며 생성자 메서드를 사용하여 "상속"을 달성할 수 없다는 점에 유의해야 합니다.

2. Object() 메서드

json 형식의 창시자인 Douglas Crockford는 이를 수행할 수 있는 object() 함수를 제안했습니다.

function object(o) {

　　　　function F() {}

　　　　F.prototype = o;

　　　　return new F();

　　}

이 object() 함수는 실제로 한 가지 작업만 수행합니다. 즉, 하위 개체의 프로토타입 속성을 상위 개체로 지정하여 하위 개체와 상위 개체를 함께 연결하는 것입니다.

사용 시 첫 번째 단계는 상위 개체를 기반으로 하위 개체를 생성하는 것입니다.

var Doctor = object(Chinese);

그런 다음 하위 개체 자체의 속성을 추가합니다.

Doctor.career = '医生';

이때 하위 개체는 다음의 속성을 상속합니다. 상위 객체. 　

alert(Doctor.nation); //中国

3. 얕은 복사

"프로토타입 체인"을 사용하는 것 외에도 부모 개체의 모든 속성을 자식 개체에 복사하는 방식도 있습니다.

다음 기능은 복사를 하고 있습니다:

　　function extendCopy(p) {

　　　　var c = {};

　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　 }

　　　　c.uber = p;

　return c; }

사용시에는 다음과 같이 작성하세요: 　

var Doctor = extendCopy(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国

그러나 이러한 복사에는 문제가 있습니다. 즉, 부모 객체의 속성이 배열이나 다른 객체와 같다면 실제로 자식 객체가 얻는 것은 실제 복사본이 아닌 메모리 주소뿐이므로 부모 객체가 조작되었습니다.

이제 중국어에 "출생지" 속성을 추가하세요. 그 값은 배열입니다. 　

Chinese.birthPlaces = ['北京','上海','香港'];

extendCopy() 함수를 통해 닥터는 중국어를 상속받습니다.

var Doctor = extendCopy(Chinese);

그런 다음 의사의 "출생지"에 대한 도시를 추가합니다.

Doctor.birthPlaces.push('厦门');

무슨 일이 일어났나요? 중국인의 '출생지'도 변경되었습니다!

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港, 厦门

그래서, extendCopy()는 기본 유형의 데이터만 복사합니다. 우리는 이 복사본을 "shallow copy"라고 부릅니다. 이것이 초기 jQuery에서 상속이 구현된 방식입니다.

4. 딥 카피

소위 "딥 카피"는 진정한 의미에서 배열과 객체를 복사하는 기능입니다. 구현은 어렵지 않습니다. 그냥 "shallow copy"를 재귀적으로 호출하면 됩니다.

　　function deepCopy(p, c) {

　　　　var c = c || {};

　　　　for (var i in p) {

　　　　　　if (typeof p[i] === 'object') {

　　　　　　　　c[i] = (p[i].constructor === Array) ? [] : {};

　　　　　　　　deepCopy(p[i], c[i]);

　　　　　　} else {

　　　　　　　　　c[i] = p[i];

　　　　　　}
}

　　　　return c; }

사용시 이렇게 작성하세요.

var Doctor = deepCopy(Chinese);

이제 값을 배열로 사용하여 상위 객체에 속성을 추가합니다. 그런 다음 하위 개체에서 이 속성을 수정합니다. 　

Chinese.birthPlaces = ['北京','上海','香港'];
Doctor.birthPlaces.push('厦门');

이때 상위 개체는 영향을 받지 않습니다.

alert(Doctor.birthPlaces); //北京, 上海, 香港, 厦门
alert(Chinese.birthPlaces); //北京, 上海, 香港

현재 jQuery 라이브러리는 이 상속 방법을 사용합니다.

위 내용은 Javascript 비생성자 상속 예제에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!