먼저 질문을 깊이 연구합시다. JavaScript 객체 상속이란 무엇입니까?
예를 들어, "동물"객체의 생성자가 있습니다.
기능 동물 () {this.type = '동물'; }"고양이"객체에 대한 생성자도 있습니다.
기능 고양이 (이름, 색) {this.name = 이름; this.color = 색상; }우리는 고양이도 동물에 속한다는 것을 알고 있습니다. 이 고양이 물체가 동물 대상의 특성을 물려 받으려면 어떻게해야합니까?
생성자 결합
생성자 바인딩을 사용하는 것이 가장 쉬운 방법입니다. 전화를 사용하거나 적용하여 부모 객체를 자체 객체에 바인딩하십시오.
함수 고양이 (이름, 색) {동물성 (니라 apply) (this, arguments); this.name = 이름; this.color = 색상; } var cat1 = 새로운 고양이 ( "haha", 'red'); Console.log (cat1.type); // 동물그러나이 방법은 비교적 드 rare니다.
상속을 복사하십시오
부모 객체의 모든 속성과 방법이 Child Object에 복사되면 상속도 달성 할 수 있습니다.
함수 확장 (child, parent) {var p = parent.prototype; var c = child.prototype; for (p in p) {c [i] = p [i]; } c.uber = p; // 브리지 기능}사용 방법 :
확장 (고양이, 동물); var cat1 = 새로운 고양이 ( "하하", "빨간색"); 경고 (cat1.type); // 동물
프로토 타입 상속 (프로토 타입)
위의 직접 결합과 비교하여, 프로토 타입 상속 방법이 더 일반적이다. 나는 프로토 타입을 간단히 요약했다.
각 함수에는 프로토 타입 속성이 있으며 이는 객체에 대한 참조입니다. 새 키워드를 사용하여 새 인스턴스를 만들 때이 인스턴스 객체는 프로토 타입 객체에서 속성 및 메소드를 상속합니다.
즉, "고양이"생성자의 프로토 타입 속성이 "동물"인스턴스를 가리키면 "Cat"객체 인스턴스가 만들어지면 "동물"객체의 특성과 방법이 상속됩니다.
상속 예
cat.prototype = new Animal (); cat.prototype.constructor = cat; var cat1 = 새로운 고양이 ( "하하", "빨간색"); console.log (cat1.constructor == cat); // true console.log (cat1.type); //동물
1. 코드의 첫 번째 줄에서, 우리는 고양이 함수의 프로토 타입 객체를 동물 물체의 인스턴스 (동물의 유형 속성을 포함 함)에 지적합니다.
2. 코드의 두 번째 줄은 무엇을 의미합니까?
1) 먼저,이 코드 라인을 추가하지 않으면 실행하십시오.
cat.prototype = new Animal ();
Console.log (cat.prototype.constructor == 동물); //진실
다시 말해, 실제로, 각 프로토 타입 객체에는 생성자 속성이 생성자 함수를 가리키는 생성자 속성이 있습니다.
2) 다음 코드를 살펴 보겠습니다
cat.prototype = new Animal (); var cat1 = 새로운 고양이 ( "하하", '빨간색'); console.log (cat1.constructor == 동물); //진실
위에서 우리는 인스턴스 CAT1의 생성자가 동물임을 알 수 있으므로 분명히 잘못된 것입니다. . . CAT1은 New Cat ()에 의해 명확하게 생성되므로 수동으로 수정해야합니다. Cat.prototype 물체의 생성자 값은 CAT로 변경됩니다.
3) 그래서 이것은 또한 우리가주의를 기울여야 할 요점입니다. 프로토 타입 객체를 교체하면 프로토 타입 객체의 생성자 속성을 수동으로 수정해야합니다.
O. prototype = {};
O.Prototype.constructor = O;
프로토 타입을 직접 상속합니다
동물 대상에서 변하지 않은 특성은 Animal.prototype에 직접 쓸 수 있습니다. 그런 다음 Cat.Prototype가 Animal.prototype을 가리키며 상속을 실현하십시오.
이제 Animal Object를 먼저 다시 작성해 봅시다.
기능 동물 () {} 동물성 .prototype.type = '동물';그런 다음 상속을 구현하십시오.
cat.prototype = Animal.Prototype; cat.prototype.constructor = cat; var cat1 = 새로운 고양이 ( "하하", "빨간색"); Console.log (cat1.type); // 동물
이전 방법과 비교할 때이 방법은 더 효율적 인 것으로 보입니다 (동물 사례는 생성되지 않음) 공간을 절약합니다. 그러나 이것이 맞습니까? 대답이 잘못되었습니다. 계속 읽자.
cat.prototype = Animal.Prototype;
이 코드 라인은 Cat.Prototype 및 Animal.prototype가 동일한 물체를 가리킬 수있게하므로 Cat.Prototype의 특정 속성이 변경되면 Animal.Prototype에 반영됩니다.
예를 들어, 우리는 다음을 실행합니다.
Console.log (Animal.prototype.constructor == 동물) // false
거짓으로 판명되었습니다. 왜? cat.prototype.constructor = cat; 이 라인은 또한 Animal.prototype의 생성자 특성을 변경합니다.
빈 개체를 중개자로 사용하십시오
var f = function () {}; f. prototype = Animal.prototype; cat.prototype = new f (); cat.prototype.constructor = cat;F는 빈 객체이기 때문에 위의 두 가지 방법을 결합하여 거의 메모리를 차지하지 않습니다. 현재 고양이의 프로토 타입 객체를 수정하면 동물의 프로토 타입 객체에 영향을 미치지 않습니다.
Console.log (Animal.prototype.constructor == 동물); // 진실
그런 다음 위의 방법을 캡슐화합니다.
함수 확장 (child, parent) {var f = function () {}; f. prototype = parent.prototype; child.prototype = new f (); child.prototype.constructor = child; child.uber = parent.prototype; }그것을 사용할 때 방법은 다음과 같습니다.
확장 (고양이, 동물); var cat1 = 새로운 고양이 ( "하하", "빨간색"); Console.log (cat1.type); // 동물
child.uber = parent.prototype; 이 코드 라인은 브리지 함수로, 자식 개체의 Uber 속성이 부모 객체의 프로토 타입 속성을 직접 가리 키게하는데, 이는 자체 객체에서 Uber라는 채널을 여는 것과 같습니다.
위는 JavaScript 객체를 상속하는 것에 대한 나의 이해입니다. 나는 그것이 당신을 어느 정도 도움이되기를 바랍니다. 읽어 주셔서 감사합니다.