자바스크립트에서 상속이란 무엇인가-프런트엔드 Q&A-php.cn

JavaScript에서 상속은 기존 클래스를 기반으로 새 클래스를 생성할 수 있는 메커니즘입니다. 상속은 하위 클래스에 유연성을 제공하고 상위 클래스의 메서드와 변수를 재사용할 수 있습니다. 프로세스는 프로토타입을 사용할 수 있습니다. 상속을 구현하기 위한 체인과 생성자.

자바스크립트에서 상속이란 무엇인가

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서 상속이란 무엇입니까?

JavaScript 상속은 기존 클래스를 기반으로 새 클래스를 만들 수 있는 메커니즘으로, 하위 클래스에서 상위 클래스의 메서드와 변수를 재사용할 수 있는 유연성을 제공합니다. 상속과정은 일반에서 특수로 넘어가는 과정이다.

IS-A 관계를 유지하고 있습니다.

extends 키워드는 클래스 표현식이나 클래스 선언에 사용됩니다.

extends 키워드를 사용하면 내장 객체와 사용자 정의 클래스의 모든 속성과 동작을 얻을 수 있습니다.

프로토타입 기반 메서드를 사용하여 상속을 구현할 수도 있습니다.

JavaScript에서 상속을 구현하는 방법은 무엇입니까?

1. 프로토타입 체인

기본 아이디어: 프로토타입을 사용하여 하나의 참조 유형이 다른 참조 유형의 속성과 메서드를 상속하도록 합니다.

생성자, 프로토타입 및 인스턴스 간의 관계: 각 생성자에는 프로토타입 개체가 있고, 프로토타입 개체에는 생성자에 대한 포인터가 포함되어 있으며, 인스턴스에는 프로토타입 개체에 대한 내부 포인터가 포함되어 있습니다.

프로토타입 체인 구현 상속 예:

function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function subType() { this.property = false; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this.property; } var instance = new SubType(); console.log(instance.getSuperValue());//true

로그인 후 복사

2. 생성자 차용

기본 아이디어: 하위 유형 생성자 내에서 슈퍼클래스 생성자를 호출하고 call() 및 apply() 메서드를 사용하여 새 생성자를 실행합니다. 개체.

예:

function SuperType() { this.colors = ["red","blue","green"]; } function SubType() { SuperType.call(this);//继承了SuperType } var instance1 = new SubType(); instance1.colors.push("black"); console.log(instance1.colors);//"red","blue","green","black" var instance2 = new SubType(); console.log(instance2.colors);//"red","blue","green"

로그인 후 복사

3. 조합 상속

기본 아이디어: 프로토타입 연결 기술과 생성자 차용 기술을 결합하여 두 기술의 장점을 모두 활용하는 상속 패턴입니다.

예:

function SuperType(name) { this.name = name; this.colors = ["red","blue","green"]; } SuperType.prototype.sayName = function() { console.log(this.name); } function SubType(name, age) { SuperType.call(this,name);//继承属性 this.age = age; } //继承方法 SubType.prototype = new SuperType(); Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() { console.log(this.age); } var instance1 = new SubType("EvanChen",18); instance1.colors.push("black"); consol.log(instance1.colors);//"red","blue","green","black" instance1.sayName();//"EvanChen" instance1.sayAge();//18 var instance2 = new SubType("EvanChen666",20); console.log(instance2.colors);//"red","blue","green" instance2.sayName();//"EvanChen666" instance2.sayAge();//20

로그인 후 복사

4. 프로토타입 상속

기본 아이디어: 프로토타입의 도움으로 기존 개체를 기반으로 새 개체를 만들 수 있으며 사용자 정의 유형을 만들 필요가 없습니다.

프로토타입 상속 개념은 다음 함수로 설명할 수 있습니다.

function object(o) { function F(){} F.prototype = o; return new F(); }

로그인 후 복사

예:

var person = { name:"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","Van","Rob","Barbie"

로그인 후 복사

ECMAScript5는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다. 이 메서드는 두 개의 매개변수를 받습니다. 하나는 매개변수로 사용됩니다. 새 객체의 프로토타입 객체와 추가 속성을 새 객체로 정의하는 객체입니다.

var person = { name:"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","Court","Van","Rob","Barbie"

로그인 후 복사

5. 기생 상속

기본 아이디어: 내부적으로 객체를 향상시키는 상속 프로세스를 캡슐화하는 함수를 만들고, 마침내 모든 작업 객체를 수행한 것처럼 반환합니다.

예:

function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert("hi"); }; return clone; } var person = { name:"EvanChen", friends:["Shelby","Court","Van"]; }; var anotherPerson = createAnother(person); anotherPerson.sayHi();///"hi"

로그인 후 복사

6. 기생 결합 상속

기본 아이디어: 함수를 빌려 속성을 상속하고 프로토타입 체인의 혼합 형태를 통해 메서드를 상속합니다.

기본 모델은 다음과 같습니다.

function inheritProperty(subType, superType) { var prototype = object(superType.prototype);//创建对象 prototype.constructor = subType;//增强对象 subType.prototype = 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); }

로그인 후 복사

【관련 추천:javascript 비디오 튜토리얼,web front-end】

위 내용은 자바스크립트에서 상속이란 무엇인가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!