JavaScript에서 상속은 기존 클래스를 기반으로 새 클래스를 생성할 수 있는 메커니즘입니다. 상속은 하위 클래스에 유연성을 제공하고 상위 클래스의 메서드와 변수를 재사용할 수 있습니다. 상속 프로세스는 프로토타입을 사용하여 수행할 수 있습니다. 체인과 생성자.
이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
JavaScript 상속은 기존 클래스를 기반으로 새 클래스를 생성할 수 있는 메커니즘으로, 하위 클래스에서 상위 클래스의 메서드와 변수를 재사용할 수 있는 유연성을 제공합니다. 상속과정은 일반에서 특수로 넘어가는 과정이다.
IS-A 관계를 유지합니다.
extends 키워드는 클래스 표현식이나 클래스 선언에 사용됩니다.
확장 키워드를 사용하면 내장 객체는 물론 사용자 정의 클래스의 모든 속성과 동작을 얻을 수 있습니다.
프로토타입 기반 접근 방식을 사용하여 상속을 구현할 수도 있습니다.
JavaScript는 상속을 어떻게 구현합니까?
1. 프로토타입 체인
기본 아이디어: 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 합니다.
생성자, 프로토타입 및 인스턴스 간의 관계: 각 생성자에는 프로토타입 개체가 있고, 프로토타입 개체에는 생성자에 대한 포인터가 포함되어 있으며, 인스턴스에는 프로토타입 개체에 대한 내부 포인터가 포함되어 있습니다.
프로토타입 체인 구현 상속의 예:
function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//Inherited SuperTypeSubType.prototype = new SuperType( );SubType.prototype.getSubValue = function (){return this.property;}var 인스턴스 = new SubType();console.log(instance.getSuperValue());//true2. 생성자 차용
기본 개념: 하위 유형 생성자 내에서 슈퍼클래스 생성자를 호출하고, call() 및 apply() 메서드를 사용하여 새로 생성된 객체에서 생성자를 실행할 수 있습니다.
예:
function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//Inherits SuperType}var 인스턴스1 = new SubType(); .colors.push("검은색");console.log(instance1.colors);//"빨간색","파란색","녹색","검은색"var 인스턴스2 = new SubType();console.log(instance2 . 색상);//"빨간색","파란색","녹색"3. 조합 상속
기본 아이디어: 프로토타입 체인 기술과 생성자 차용 기술을 결합하여 두 가지 장점을 모두 활용하는 상속 패턴입니다.
예:
function SuperType(name) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name); }function SubType(이름, 나이) {SuperType.call(this,name);//상속된 속성 this.age = age;}//상속된 메서드 SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var 인스턴스1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. colors);//"빨간색","파란색","녹색","검은색"instance1.sayName();//"EvanChen"instance1.sayAge();//18var 인스턴스2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"red","blue","green"instance2.sayName();//"EvanChen666"instance2.sayAge();//204. 프로토타입 상속
기본 아이디어: 프로토타입을 사용하면 사용자 정의 유형을 만들지 않고도 기존 개체를 기반으로 새 개체를 만들 수 있습니다.
프로토타입 상속의 아이디어는 다음 함수로 설명할 수 있습니다.
function object(o) {function F(){}F.prototype = o;return new F();}예:
var person = {이름:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push( "Rob");var YetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Court" ,"밴","롭","바비"ECMAScript 5는 두 개의 매개변수(새 객체의 프로토타입으로 사용되는 객체와 추가 속성을 정의하기 위한 새 객체로 사용되는 객체)를 허용하는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다.
var person = {이름:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends. push("Rob");var YetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby" ,"법원","밴","롭","바비"5. 기생 상속
기본 아이디어: 단순히 상속 프로세스를 캡슐화하고, 내부적으로 어떤 방식으로든 객체를 향상시키고, 실제로 모든 작업을 수행한 것처럼 객체를 반환하는 함수를 만듭니다.
예:
function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("hi");};return clone;}var person = {name:"EvanChen",friends:["Shelby ","법원","밴"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"안녕"6. 기생 조합 상속
기본 아이디어: 함수를 빌려 속성을 상속하고, 프로토타입 체인의 하이브리드 형태를 통해 메서드를 상속합니다.
그 기본 모델은 다음과 같습니다.
function 상속Property(subType, superType) {var 프로토타입 = object(superType.prototype);//객체 생성 프로토타입.constructor = subType;//객체 강화 subType.prototype = 프로토타입;//객체 지정}예:
function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function(){alert(this.name);}; function SubType(name,age){SuperType.call(this,name);this.age = age;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}