이번에는 JS 상속에 대해 자세히 설명드리겠습니다. JS 상속 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.
ECMAScript는 여러 가지 방법으로 상속을 구현합니다. 이는 JavaScript의 상속 메커니즘이 명시적으로 지정되지 않고 모방을 통해 구현되기 때문입니다. 이는 모든 상속 세부 사항이 인터프리터에 의해 완전히 처리되지는 않음을 의미합니다. 필요에 따라 적절한 상속 방법을 결정할 수 있습니다.
객체는
constructor를 가장합니다. 이 키워드를 사용하여 모든 속성 및 메서드에 값을 할당합니다(즉, 클래스 선언의 생성자 메서드 사용). 생성자는 단지 함수이기 때문에 ClassA 생성자를 ClassB의 메서드로 만든 다음 호출할 수 있습니다. ClassB는 ClassA의 생성자에 정의된 속성과 메서드를 받습니다.
function ClassA(name) { this.name = name; this.sayName = function () { console.log(this.name);
};
}function ClassB(name,age) { this.classA = ClassA; this.classA(name); delete this.classA; this.age = age; this.sayAge = function(){ console.log(this.age);
}
}var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);
tom.sayName(); //'Tom'jerry.sayName(); //'Jerry'jerry.sayAge(); //25console.log(tom instanceof ClassA); //trueconsole.log(jerry instanceof ClassA); //falseconsole.log(jerry instanceof ClassB); //true모든 새로운 속성과 새로운 메소드는 새로운 메소드의 코드 라인을 삭제한 후 정의해야 합니다. 왜냐하면 슈퍼 클래스의 관련 속성과 메소드가 덮어쓰기될 수 있기 때문입니다.
객체 가장은 다중 상속을 달성할 수 있습니다
ClassA와 ClassB가 존재하는 경우, ClassC는 다음과 같이 이 두 클래스를 상속하려고 합니다.
function ClassA(name){ this.name = name; this.sayName = function (){ console.log(this.name);
}
}function ClassB(age){ this.age = age; this.sayAge = function(){ console.log(this.age);
}
}function ClassC(name,age){ this.method = ClassA; this.method(name);
this.method = ClassB; this.method(age); delete this.method;
}var tom = new ClassC('Tom',25);
tom.sayName(); //'Tom';tom.sayAge(); //25console.log(tom instanceof ClassA); //falseconsole.log(tom instanceof ClassB); //falseconsole.log(tom instanceof ClassC); //true이 구현의 결함은 ClassA와 ClassB 두 클래스에 동일한 이름의 속성이나 메서드가 있는 경우 ClassB가 나중 클래스에서 상속하기 때문에 우선순위가 높다는 것입니다.
이 상속 메서드의 인기로 인해 ECMAScript의 세 번째 버전에서는 Function 개체에 call() 및 apply()라는 두 가지 메서드를 추가했습니다.
호출 방법은 고전적인 객체 가장 방법과 가장 유사합니다. 첫 번째 매개변수는 this의 객체로 사용되며, 다른 매개변수는 함수 자체에 직접 전달됩니다
function sayName(prefix) { console.log(prefix + this.name);
};var tom = {};
tom.name = "Tom";
sayName.call(tom, 'This is '); //'This is Tom'sayName 함수는 객체 외부에 정의되어 있지만 this를 참조할 수도 있습니다.
호출 메서드는 개체 가장을 다시 작성합니다.
function ClassA(name){ this.name = name; this.sayName = function(){ console.log(this.name); }}function ClassB(name,age){ //this.method = ClassA; //this.method(name); //delete this.method; ClassA.call(this,name); this.age = age; this.sayAge = function (){ console.log(this.age); }}var tom = new ClassB('Tom',25);tom.sayName(); //'Tom'tom.sayAge(); //25console.log(tom instanceof ClassA); //falseconsole.log(tom instanceof ClassB); //true호출 메서드는 ClassA를 참조하기 위해 속성을 사용하는 방식을 대체합니다.
apply
apply 메소드에는 두 개의 매개변수가 있습니다. 객체는 이것으로 사용되며 매개변수는 함수 array
function sayName(prefex,mark) { console.log(prefex+ this.name+ mark);
};var tom = {};
tom.name = 'Tom';
sayName.apply(tom, ['This is ','!']); //'This is Tom!'에 전달됩니다. Apply를 사용하여 객체를 가장하여
function ClassA(name){ this.name = name; this.sayName = function(){ console.log(this.name); }}function ClassB(name,age){ ClassA.apply(this,arguments); this.age = age; this.sayAge = function (){ console.log(this.age); }}var tom = new ClassB('Tom',25);tom.sayName(); //'Tom'tom.sayAge(); //25 console.log(tom instanceof ClassA); //falseconsole.log(tom instanceof ClassB); //true주문만 다시 작성할 수도 있습니다. 슈퍼 클래스와 하위 클래스의 매개변수 매개변수 배열은 매개변수가 완전히 일치하는 경우에만 전달될 수 있습니다.
프로토타입 체인
프로토타입 객체는 템플릿입니다. 프로토타입 객체의 메서드는 이 클래스의 모든 객체에 전달됩니다. 예를 들어 프로토타입 체인은 이 함수를 사용하여 상속 메커니즘을 구현합니다.
function ClassA() {}ClassA.prototype.name = 'Tom';ClassA.prototype.sayName = function () { console.log(this.name);};function ClassB() {}ClassB.prototype = new ClassA();var tom = new ClassB();tom.sayName(); //'Tom'console.log(tom instanceof ClassA); //trueconsole.log(tom instanceof ClassB); //true여기서는 prototpye 속성을 하나씩 할당하는 것을 피하기 위해 ClassB의 프로토타입 속성을 ClassA의 인스턴스로 설정합니다.
생성자는 프로토타입 체인에서 매개변수가 없어야 하므로 ClassA를 호출할 때 매개변수가 설정되지 않습니다.
프로토타입 체인에서 인스턴스 오브의 결과도 변경되어 ClassA와 ClassB 모두에 대해 true를 반환했습니다.
프로토타입 속성 재할당으로 인해 프로토타입이 할당된 후에 서브클래스의 새 속성이 나타나야 합니다.
function ClassA() {}ClassA.prototype.name = 'Tom';ClassA.prototype.sayName = function () { console.log(this.name);};function ClassB() {}ClassB.prototype = new ClassA();ClassB.prototype.age = 25;ClassB.prototype.sayAge = function () { console.log(this.age);};var tom = new ClassA();var jerry = new ClassB();tom.sayName(); //'Tom'jerry.sayName(); //'Tom'jerry.name = 'Jerry';tom.sayName(); //'Tom'jerry.sayName(); //'Jerry'jerry.sayAge(); //25console.log(tom instanceof ClassA); //trueconsole.log(jerry instanceof ClassA); //trueconsole.log(jerry instanceof ClassB); //true프로토타입 체인의 단점은 클래스의 프로토타입이 다시 작성되기 때문에 다중 상속을 달성할 수 없다는 것입니다.
혼합 방법
객체 가장의 문제점은 생성자 메서드를 사용해야 한다는 점이며, 프로토타입 체인을 사용하면 매개변수가 있는 생성자를 사용할 수 없습니다. 그러나 이 둘을 결합해 볼 수는 있습니다.
객체를 사용하여 생성자의 속성을 상속받는 척하고, 프로토타입 체인을 사용하여 프로토타입의 메서드를 상속합니다.
function ClassA(name) { this.name = name;
}
ClassA.prototype.sayName = function () { console.log(this.name);
};function ClassB(name, age) {
ClassA.call(this, name); this.age = age;
}
ClassB.prototype = new ClassA();
ClassB.prototype.sayAge = function () { console.log(this.age);
};var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);console.log(tom instanceof ClassA); //trueconsole.log(jerry instanceof ClassA); //trueconsole.log(jerry instanceof ClassB); //trueconsole.log(jerry.constructor === ClassA); //trueconsole.log(ClassB.prototype.constructor === ClassA); //trueClassB 생성자에서는 객체를 사용하여 ClassA의 name 속성을 상속하는 척하고 프로토타입 체인을 사용하여 ClassA의 sayName 메서드를 상속합니다. 프로토타입 체인 상속 방식으로 인해 인스턴스of가 정상적으로 실행됩니다. .
그러나 생성자 속성은 문제를 노출합니다. 각 프로토타입 객체에는 생성자를 가리키는 생성자 속성이 있지만 ClassB 인스턴스의 생성자는 ClassA를 가리키므로 상속 체인에 혼란이 발생합니다. 생성자의 포인터를 수동으로 수정할 수 있습니다.
function ClassA(name) { this.name = name;
}
ClassA.prototype.sayName = function () { console.log(this.name);
};function ClassB(name, age) {
ClassA.call(this, name); this.age = age;
}
ClassB.prototype = new ClassA();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () { console.log(this.age);
};var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);console.log(tom instanceof ClassA); //trueconsole.log(jerry instanceof ClassA); //trueconsole.log(jerry instanceof ClassB); //trueconsole.log(ClassA.constructor === ClassB); //falseconsole.log(jerry.constructor === ClassA); //falseconsole.log(ClassB.prototype.constructor === ClassA); //false프로토타입 체인을 직접 상속
메모리를 절약하기 위해 ClassA 인스턴스를 생성할 수 없으며 ClassB의 프로토타입이 ClassA의 프로토타입을 직접 가리키도록 할 수 없습니다.
function ClassA(name) { this.name = name;
}
ClassA.prototype.sayName = function () { console.log(this.name);
};function ClassB(name, age) {
ClassA.call(this, name); this.age = age;
}
ClassB.prototype = ClassA.prototype;
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () { console.log(this.age);
};var tom = new ClassA('Tom');var jerry = new ClassB('Jerry',25);console.log(ClassA.prototype.hasOwnProperty('sayAge')); //trueconsole.log(ClassA.prototype.constructor === ClassB); //true이러한 결함은 프로토타입 체인을 직접 수정하기 때문에 발생합니다. ClassB 프로토타입 체인의 속성에 대해 가리키는 이는 ClassA에도 영향을 미치므로 ClassA에는 sayAge 메서드가 있고 ClassA의 생성자 속성은 ClassB인 것으로 보입니다.
중개자로서의 빈 객체
프로토타입 체인의 직접 상속의 단점을 해결하기 위해 빈 객체를 중개자로 사용할 수 있습니다.
function ClassA(name) { this.name = name;
}
ClassA.prototype.sayName = function () { console.log(this.name);
};function ClassB(name, age) {
ClassA.call(this, name); this.age = age;
}var fn = function(){};
fn.prototype = ClassA.prototype;
ClassB.prototype = new fn();
ClassB.prototype.constructor = ClassB;
ClassB.prototype.sayAge = function () { console.log(this.age);
};console.log(ClassA.prototype.hasOwnProperty('sayAge')); //falseconsole.log(ClassA.prototype.constructor === ClassB); //false객체 인스턴스는 계속 생성되지만 빈 객체는 메모리를 거의 차지하지 않기 때문에 ClassB의 프로토타입을 수정해도 ClassA에는 영향을 미치지 않습니다.
확장 메서드로 캡슐화
function extends(child,parent){ var fn = function (){};
fn.prototype = parent.prototype;
child.prototype = new fn();
child.prototype.constructor = child;
child.super = parent.prototype;
}JS의 유연성을 통해 다양한 방식으로 상속을 구현할 수 있습니다. 원리와 구현을 이해하면 다양한 시나리오에서 적절한 메서드를 선택하는 데 도움이 됩니다.
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 JS 상속에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
