자바스크립트 객체지향 프로그래밍 (2) constructor_js 객체지향 상속

오늘 소개하고 싶은 것은 여러 객체를 "상속"하는 인스턴스를 생성하는 방법입니다.
예를 들어 이제 "animal" 개체에 대한 생성자가 있습니다.

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

　function Animal(){
　this.species = "Animal";
　}

"cat" 개체에 대한 생성자도 있습니다. ,

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

함수 Cat(이름,색상){
this.name = name;
　this.color = color;
　}

"고양이"가 "동물"을 상속받게 하려면 어떻게 해야 하나요?
1. 생성자 바인딩
가장 간단한 방법은 아마도 call 또는 apply 메소드를 사용하여 상위 개체의 생성자를 하위 개체, 즉 하위 개체 생성자에 바인딩하는 것입니다. 함수에 대한 한 줄:

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

Function Cat( name,color) {
　Animal.apply(this, 인수);
this.name = name;
this.color = color;
}
var cat1 = new Cat("大毛","黄");
　alert(cat1.species); // 동물

2. 프로토타입 모드
더 일반적인 접근 방식은 프로토타입 속성.
"cat"의 프로토타입 객체가 Animal의 인스턴스를 가리키는 경우 "cat"의 모든 인스턴스는 Animal을 상속할 수 있습니다.

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

Cat.prototype = new Animal();
Cat.prototype.constructor = 고양이;
var cat1 = new Cat("큰 머리", "노란색")
Alert(cat1.species); // 동물

🎜> code 첫 번째 줄에서는 Cat의 프로토타입 객체가 Animal 인스턴스를 가리킵니다.
　Cat.prototype = new Animal();
프로토타입 객체의 원래 값을 완전히 삭제한 후 새 값을 할당하는 것과 같습니다. 그런데 두 번째 줄은 무슨 뜻인가요?
Cat.prototype.constructor = Cat;
모든 프로토타입 객체에는 생성자를 가리키는 생성자 속성이 있는 것으로 나타났습니다. 즉, Cat.prototype 객체의 constructor 속성은 Cat을 가리킵니다.
이전 단계에서 이 프로토타입 객체의 원래 값을 삭제했기 때문에 새 프로토타입 객체에는 생성자 속성이 없으므로 수동으로 추가해야 합니다. 그렇지 않으면 나중에 "상속 체인"에 문제가 발생합니다. 이것이 두 번째 줄의 의미입니다.
간단히 말하면 이는 매우 중요한 사항이며 프로그래밍 시 반드시 따라야 하는 사항입니다. 다음은 이 점을 따릅니다. 즉, 프로토타입 객체가 교체되면
　o.prototype = {}
그러면 다음 단계는 새 프로토타입 객체에 생성자 속성을 추가하고 이 속성을 다시 가리키는 것입니다. 원래 생성자에게.
　o.prototype.constructor = o;

3. 프로토타입 직접 상속
Animal 객체에서는 변경되지 않은 속성을 Animal.prototype에 직접 작성할 수 있습니다. 따라서 Cat()이 Animal()을 건너뛰고 Animal.prototype을 직접 상속받도록 할 수도 있습니다. 이제 먼저 Animal 객체를 다시 작성해 보겠습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

function Animal(){ }
　Animal.prototype.species = "Animal";

그런 다음 Cat의 프로토타입 객체를 Animal의 프로토타입 객체에 지정하여 다음을 완성합니다. 계승.

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

Cat.prototype = Animal.prototype
고양이 .prototype.constructor = 고양이;
var cat1 = new Cat("큰 머리","노란색")
Alert(cat1.species); // 동물


이전 방법에 비해 이 방법의 장점은 더 효율적이고(Animal 인스턴스를 실행하고 생성할 필요가 없음) 메모리를 절약한다는 것입니다. 단점은 Cat.prototype과 Animal.prototype이 이제 동일한 개체를 가리키므로 Cat.prototype에 대한 모든 수정 사항이 Animal.prototype에 반영된다는 점입니다.
그래서 위의 코드는 실제로 문제가 있습니다. 두 번째 줄을 봐주세요
Cat.prototype.constructor = Cat;
이 문장은 실제로 Animal.prototype 객체의 생성자 속성을 변경합니다!
　alert(Animal.prototype.constructor); // Cat
4. 빈 객체를 중개자로 사용
'프로토타입 직접 상속'에는 위와 같은 단점이 있으므로 빈 객체를 사용할 수 있습니다. 객체 객체는 중개자 역할을 합니다.

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

　var F = function(){};
F.prototype = Animal.prototype;
Cat.prototype = new F();
Cat.prototype.constructor = Cat

F는 빈 객체입니다. 메모리를 거의 차지하지 않습니다. 이때 Cat의 프로토타입 객체를 수정해도 Animal의 프로토타입 객체에는 영향을 미치지 않습니다.
　alert(Animal.prototype.constructor); // Animal
5. 프로토타입 모드의 캡슐화 기능
위의 방법을 사용하기 쉽게 함수로 캡슐화합니다.

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

함수 확장(자식, 부모) {
var F = function(){};
F.prototype = Parent.prototype;
Child.prototype = new F()
Child.prototype.constructor =
자식. uber = Parent .prototype;
　}

사용시 방법은 다음과 같습니다

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

Extension(Cat,Animal)
var cat1 = new Cat("Big Hair","Yellow"); cat1.species); // Animal

이 확장 함수는 YUI 라이브러리가 상속을 구현하는 방법입니다.
그리고 설명도 좀 할게요. 함수 본문
Child.uber = Parent.prototype;
의 마지막 줄은 상위 객체의 프로토타입 속성을 직접 가리키는 하위 객체에 대한 uber 속성을 설정한다는 의미입니다. 이는 자식 개체에서 채널을 여는 것과 동일하며, 부모 개체의 메서드를 직접 호출할 수 있습니다. 이 줄은 상속의 완전성을 달성하기 위해 여기에 배치되었으며 순전히 백업 목적으로 사용됩니다.

6. 상속 복사
위에서는 프로토타입 객체를 사용하여 상속을 구현합니다. 또한 우리의 생각을 바꿔 순전히 "복사" 방법을 사용하여 상속을 구현할 수도 있습니다. 쉽게 말하면 부모 객체의 모든 속성과 메소드를 자식 객체에 복사하면 상속도 이루어지지 않을까요? 우선 Animal의 모든 불변 속성을 해당 프로토타입 객체에 배치합니다.

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

function Animal(){}
Animal.prototype .species = "Animal";

그런 다음 속성 복사 목적을 달성하는 함수를 작성합니다.

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

함수 확장2(자식, 부모) {
　 var p = Parent.prototype;
var c = Child.prototype;
for (var i in p) {
c[i] = p[i]
c.uber = p;
　}


이 함수의 기능은 상위 객체의 프로토타입 객체에 있는 속성을 하위 객체의 프로토타입 객체에 하나씩 복사하는 것입니다.

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

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

extend2( 고양이, 동물);

var cat1 = new Cat("큰 머리", "노란색"); 아직 끝나지 않았으니 계속해서 파트 3 "비생성자 상속"을 읽어보세요.
(끝)