js 프로토타입 상속의 두 가지 방법 비교 소개_기본 지식

실제 프로젝트에서는 일반적으로 생성자를 사용하여 객체를 만든 다음 프로토타입 객체에 몇 가지 일반적인 메서드를 추가합니다. 마지막으로 객체를 직접 인스턴스화하거나 이를 부모 클래스로 사용하고 객체를 선언한 후 부모 클래스를 상속합니다.

상속할 때 일반적으로 사용되는 두 가지 방법이 있습니다. 오늘은

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

//부모 클래스
function Person(name){
this.name = name;
};

// 하위 클래스
function Student(sex){
Person.apply(this,arguments); //부모 클래스의 생성자를 상속합니다.
this.sex=sex;
};

1, 프로토타입 상속:

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

학생 .prototype = Person.prototype; //이 문장이 실행되면 Student.prototype.constructor는 Person을 가리킵니다. Person.prototype.constructor는 Person을 가리키기 때문에 객체 할당은 본질적으로 참조 할당이므로 Student.prototype.constructor도 Person
Student.prototype.constructor = Student를 가리킵니다. // Student.prototype.constructor가 Person

Person의 프로토타입 객체를 사용하여 Student의 프로토타입 객체를 덮어씁니다. 앞서 언급했듯이 객체 할당은 본질적으로 참조 할당이므로 Student.prototype에 대한 수정 사항이 Person.prototype에 반영되면 하위 클래스가 상위 클래스에 영향을 미칩니다. 수업.
아래를 보세요:

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

Student.prototype.add=function() {alert( "add")};
Person.prototype.add();//팝업 추가

2. 상속된 인스턴스:

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

학생 .prototype = new Person(); //여기에 매개변수가 전달되지 않으면 ()를 작성할 필요가 없습니다. 즉, new Person;
2 Student.prototype.constructor = Student;

Person 인스턴스를 사용하여 Student의 프로토타입 개체를 덮어씁니다. 인스턴스를 만드는 것은 이전 방법에 비해 메모리 낭비이지만, 이는 위 방법의 단점, 즉 Student에 대한 수정 사항도 해결합니다. 프로토타입은 현재 Person.prototype에 반영되지 않습니다. 즉, 하위 클래스가 상위 클래스에 영향을 주지 않습니다.
3. 컨트롤 개체를 사용하여 1과 2의 장점을 결합하고 단점을 제거합니다

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

var F = function(){};
F.prototype = Person.prototype;
Student.prototype = new F();
Student.prototype.constructor = Student;

F는 빈 객체입니다. 일부 프로토타입 메서드만 인스턴스화하는 동안 메모리를 덜 차지하고 하위 클래스가 상위 클래스에 미치는 영향을 격리합니다.