javascript 상속_javascript 기술의 6가지 주요 패턴 요약
1. 프로토타입 체인
function SuperType(){ this.property = true; } SuperType.prototype.getSuperValue = function(){ return this.property; }; function SubType(){ this.subproperty = false; } //继承了SuperType SubType.prototype = new SuperType(); SubType.prototype.getSubValue = function (){ return this.subproperty; }; var instance = new SubType(); alert(instance.getSuperValue()); //true
구현의 핵심은 프로토타입 객체를 재정의하고 이를 새 유형의 인스턴스로 바꾸는 것입니다.
2. 생성자 차용
function SuperType(){ this.colors = ["red", "blue", "green"]; } function SubType(){ //继承了SuperType SuperType.call(this); } var instance1 = new SubType(); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" var instance2 = new SubType(); alert(instance2.colors); //"red,blue,green"
만약 생성자를 빌리면 생성자 패턴의 문제를 피할 수 없습니다. 메소드는 모두 생성자에 정의되어 있으므로 함수 재사용은 불가능합니다. 게다가 상위 유형의 프로토타입에 정의된 메서드는 하위 유형에 표시되지 않으므로 모든 유형은 생성자 패턴만 사용할 수 있습니다. 이러한 문제점을 고려하여 생성자를 빌리는 기법은 단독으로 사용되는 경우가 거의 없다.
3. 조합 상속
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; } //继承方法 SubType.prototype = new SuperType(); SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); }; var instance1 = new SubType("Nicholas", 29); instance1.colors.push("black"); alert(instance1.colors); //"red,blue,green,black" instance1.sayName(); //"Nicholas"; instance1.sayAge(); //29 var instance2 = new SubType("Greg", 27); alert(instance2.colors); //"red,blue,green" instance2.sayName(); //"Greg"; instance2.sayAge(); //27
이 예에서 SuperType 생성자는 이름과 색상이라는 두 가지 속성을 정의합니다. SuperType의 프로토타입은 sayName() 메서드를 정의합니다. SubType 생성자는 SuperType 생성자를 호출할 때 name 매개 변수를 전달한 다음 자체 속성 age를 정의합니다. 그런 다음 SuperType의 인스턴스가 SubType의 프로토타입에 할당되고 새 프로토타입에 sayAge() 메서드가 정의됩니다. 이러한 방식으로 두 개의 서로 다른 SubType 인스턴스는 색상 속성을 포함하여 자체 속성을 가질 수 있으며 동일한 방법을 사용할 수 있습니다.
결합 상속은 프로토타입 체인과 차용 생성자의 단점을 피하고 장점을 결합하며 JavaScript에서 가장 일반적으로 사용되는 상속 패턴이 됩니다. 또한, 결합된 상속을 기반으로 생성된 객체를 식별하는 데에도 instanceof 및 isPrototypeOf()를 사용할 수 있습니다.
4. 프로토타입 상속
function object(o){ function F(){} F.prototype = o; return new F(); }
object() 함수 내에서 임시 생성자가 먼저 생성된 다음 전달된 객체가 이 생성자의 프로토타입으로 사용되고 마지막으로 이 임시 유형의 새 인스턴스가 반환됩니다. 기본적으로 object()는 전달된 객체의 얕은 복사본을 수행합니다. 다음 예를 고려하십시오.
var person = { name: "Nicholas", 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"); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
Crockford가 주장하는 프로토타입 상속에서는 다른 객체의 기반이 될 수 있는 객체가 있어야 합니다. 그러한 객체가 있는 경우 이를 object() 함수에 전달한 다음 특정 필요에 따라 얻은 객체를 수정할 수 있습니다. 이 예에서는 person 개체를 다른 개체의 기초로 사용할 수 있으므로 이를 object() 함수에 전달하면 새 개체가 반환됩니다. 이 새 객체는 person을 프로토타입으로 사용하므로 해당 프로토타입에는 기본 유형 값 속성과 참조 유형 값 속성이 포함됩니다. 이는 person.friends가 개인이 소유할 뿐만 아니라 anotherPerson 및 YetAnotherPerson이 공유한다는 것을 의미합니다. 실제로 이는 사람 개체의 복사본을 두 개 더 만드는 것과 같습니다.
ECMAScript 5는 새로운 Object.create() 메서드를 통해 프로토타입 상속을 표준화합니다. 이 메서드는 두 가지 매개 변수, 즉 새 개체의 프로토타입으로 사용할 개체와 (선택적으로) 새 개체에 대한 추가 속성을 정의하는 개체를 허용합니다. Object.create() 메서드는 하나의 매개 변수가 전달될 때 object() 메서드와 동일하게 동작합니다.
var person = { name: "Nicholas", 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"); alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
Object.create() 메서드의 두 번째 매개 변수는 Object.defineProperties() 메서드의 두 번째 매개 변수와 형식이 동일합니다. 각 속성은 자체 설명자를 통해 정의됩니다. 이런 방식으로 지정된 모든 속성은 프로토타입 객체에 있는 동일한 이름의 속성을 재정의합니다. 예:
var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = Object.create(person, { name: { value: "Greg" } }); alert(anotherPerson.name); //"Greg"
Object.create() 메소드를 지원하는 브라우저에는 IE9, Firefox 4, Safari 5, Opera 12 및 Chrome이 있습니다.
프로토타입 상속은 생성자를 생성하기 위해 많은 노력을 기울일 필요가 없지만 단지 하나의 객체를 다른 객체와 유사하게 유지하려는 경우에 완벽하게 적합합니다. 하지만 참조 유형 값을 포함하는 속성은 프로토타입 패턴을 사용하는 것처럼 항상 해당 값을 공유한다는 점을 잊지 마세요.
5. 기생 상속
기생 상속은 프로토타입 상속과 밀접한 관련이 있는 아이디어로 Crockford에 의해 대중화되었습니다. 기생 상속의 개념은 기생 생성자 및 팩토리 패턴과 유사합니다. 즉, 상속 프로세스를 캡슐화하기 위한 함수를 생성하여 내부적으로 어떤 방식으로든 객체를 향상시키고 마침내 모든 작업을 실제로 수행한 것처럼 작동합니다. 객체를 반환합니다. 다음 코드는 기생 상속 패턴을 보여줍니다.
function createAnother(original){ var clone = object(original); //通过调用函数创建一个新对象 clone.sayHi = function(){ //以某种方式来增强这个对象 alert("hi"); }; return clone; //返回这个对象 }
이 예에서 createAnother() 함수는 새 객체의 기초로 사용될 객체인 하나의 매개변수를 받습니다. 그런 다음 이 객체(원본)를 object() 함수에 전달하고 반환된 결과를 복제에 할당합니다. 그런 다음 새로운 메소드 sayHi()를 복제 객체에 추가하고 마지막으로 복제 객체를 반환합니다. 다음과 같이 createAnother() 함수를 사용할 수 있습니다.
var person = { name: "Nicholas", friends: ["Shelby", "Court", "Van"] }; var anotherPerson = createAnother(person); anotherPerson.sayHi(); //"hi"
这个例子中的代码基于person 返回了一个新对象——anotherPerson。新对象不仅具有person的所有属性和方法,而且还有自己的sayHi()方法。
在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。前面示范继承模式时使用的object()函数不是必需的;任何能够返回新对象的函数都适用于此模式。
使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一
点与构造函数模式类似。
6.寄生组合式继承
前面说过,组合继承是JavaScript 最常用的继承模式;不过,它也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。没错,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性。再来看一看下面组合继承的例子。
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); //第二次调用SuperType() this.age = age; } SubType.prototype = new SuperType(); //第一次调用SuperType() SubType.prototype.constructor = SubType; SubType.prototype.sayAge = function(){ alert(this.age); };
加粗字体的行中是调用SuperType 构造函数的代码。在第一次调用SuperType 构造函数时,SubType.prototype 会得到两个属性:name 和colors;它们都是SuperType 的实例属性,只不过现在位于SubType 的原型中。当调用SubType 构造函数时,又会调用一次SuperType 构造函数,这一次又在新对象上创建了实例属性name 和colors。于是,这两个属性就屏蔽了原型中的两个同名属性。图6-6 展示了上述过程。
如图6-6 所示,有两组name 和colors 属性:一组在实例上,一组在SubType 原型中。这就是调用两次SuperType 构造函数的结果。好在我们已经找到了解决这个问题方法——寄生组合式继承。
所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了指定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下所示。
function inheritPrototype(subType, superType){ var prototype = object(superType.prototype); //创建对象 prototype.constructor = subType; //增强对象 subType.prototype = prototype; //指定对象 }
这个示例中的inheritPrototype()函数实现了寄生组合式继承的最简单形式。这个函数接收两个参数:子类型构造函数和超类型构造函数。在函数内部,第一步是创建超类型原型的一个副本。第二步是为创建的副本添加constructor 属性,从而弥补因重写原型而失去的默认的constructor 属性。最后一步,将新创建的对象(即副本)赋值给子类型的原型。这样,我们就可以用调用inherit-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; } inheritPrototype(SubType, SuperType); SubType.prototype.sayAge = function(){ alert(this.age); };
这个例子的高效率体现在它只调用了一次SuperType 构造函数,并且因此避免了在SubType.prototype 上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用instanceof 和isPrototypeOf()。开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
YUI 的YAHOO.lang.extend()方法采用了寄生组合继承,从而让这种模式首次出现在了一个应用非常广泛的JavaScript 库中。要了解有关YUI 的更多信息,请访问http://developer. yahoo.com/yui/。
以上所述就是本文的全部内容了,希望对大家学习javascript继承有所帮助。

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











함수 상속에서는 "기본 클래스 포인터" 및 "파생 클래스 포인터"를 사용하여 상속 메커니즘을 이해합니다. 기본 클래스 포인터가 파생 클래스 개체를 가리키는 경우 상향 변환이 수행되고 기본 클래스 멤버에만 액세스됩니다. 파생 클래스 포인터가 기본 클래스 개체를 가리키는 경우 하향 캐스팅이 수행되므로(안전하지 않음) 주의해서 사용해야 합니다.

JavaScript 튜토리얼: HTTP 상태 코드를 얻는 방법, 특정 코드 예제가 필요합니다. 서문: 웹 개발에서는 서버와의 데이터 상호 작용이 종종 포함됩니다. 서버와 통신할 때 반환된 HTTP 상태 코드를 가져와서 작업의 성공 여부를 확인하고 다양한 상태 코드에 따라 해당 처리를 수행해야 하는 경우가 많습니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법과 몇 가지 실용적인 코드 예제를 제공합니다. XMLHttpRequest 사용

상속 오류 디버깅 팁: 올바른 상속 관계를 확인하세요. 디버거를 사용하여 코드를 단계별로 실행하고 변수 값을 검사합니다. 가상 수정자를 올바르게 사용했는지 확인하세요. 숨겨진 상속으로 인해 발생하는 상속 다이아몬드 문제를 살펴봅니다. 추상 클래스에서 구현되지 않은 순수 가상 함수를 확인하세요.

C++ 함수 상속에 대한 자세한 설명: "is-a"와 "has-a" 사이의 관계를 마스터하세요. 함수 상속이란 무엇인가요? 함수 상속은 파생 클래스에 정의된 메서드를 기본 클래스에 정의된 메서드와 연결하는 C++의 기술입니다. 파생 클래스가 기본 클래스의 메서드에 액세스하고 재정의할 수 있도록 하여 기본 클래스의 기능을 확장합니다. "is-a" 및 "has-a" 관계 함수 상속에서 "is-a" 관계는 파생 클래스가 기본 클래스의 하위 유형, 즉 파생 클래스가 기본 클래스의 특성과 동작을 "상속"함을 의미합니다. 기본 클래스. "has-a" 관계는 파생 클래스에 기본 클래스 개체에 대한 참조 또는 포인터가 포함되어 있음을 의미합니다. 즉, 파생 클래스가 기본 클래스 개체를 "소유"합니다. 구문다음은 함수 상속을 구현하는 방법에 대한 구문입니다. classDerivedClass:pu

상속과 다형성은 클래스 결합에 영향을 줍니다. 상속은 파생 클래스가 기본 클래스에 종속되기 때문에 결합을 증가시킵니다. 다형성은 객체가 가상 함수와 기본 클래스 포인터를 통해 일관된 방식으로 메시지에 응답할 수 있기 때문에 결합을 줄입니다. 모범 사례에는 상속을 적게 사용하고, 공용 인터페이스를 정의하고, 기본 클래스에 데이터 멤버를 추가하지 않고, 종속성 주입을 통해 클래스를 분리하는 것이 포함됩니다. 다형성과 종속성 주입을 사용하여 은행 계좌 애플리케이션에서 결합을 줄이는 방법을 보여주는 실제 예입니다.

JavaScript에서 HTTP 상태 코드를 얻는 방법 소개: 프런트 엔드 개발에서 우리는 종종 백엔드 인터페이스와의 상호 작용을 처리해야 하며 HTTP 상태 코드는 매우 중요한 부분입니다. HTTP 상태 코드를 이해하고 얻는 것은 인터페이스에서 반환된 데이터를 더 잘 처리하는 데 도움이 됩니다. 이 기사에서는 JavaScript를 사용하여 HTTP 상태 코드를 얻는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. HTTP 상태 코드란 무엇입니까? HTTP 상태 코드는 브라우저가 서버에 요청을 시작할 때 서비스가

객체 지향 프로그래밍이란 무엇입니까? 객체 지향 프로그래밍(OOP)은 실제 엔터티를 클래스로 추상화하고 객체를 사용하여 이러한 엔터티를 나타내는 프로그래밍 패러다임입니다. 클래스는 객체의 속성과 동작을 정의하고, 객체는 클래스를 인스턴스화합니다. OOP의 가장 큰 장점은 코드를 더 쉽게 이해하고 유지 관리하며 재사용할 수 있다는 것입니다. OOP의 기본 개념 OOP의 주요 개념에는 클래스, 개체, 속성 및 메서드가 포함됩니다. 클래스는 객체의 속성과 동작을 정의하는 객체의 청사진입니다. 객체는 클래스의 인스턴스이며 클래스의 모든 속성과 동작을 갖습니다. 속성은 데이터를 저장할 수 있는 개체의 특성입니다. 메소드는 객체의 데이터에 대해 작동할 수 있는 객체의 함수입니다. OOP의 장점 OOP의 주요 장점은 다음과 같습니다. 재사용성: OOP는 코드를 더 많이 만들 수 있습니다.

인터페이스: 구현이 없는 계약 인터페이스는 Java에서 일련의 메소드 서명을 정의하지만 구체적인 구현을 제공하지는 않습니다. 이는 인터페이스를 구현하는 클래스가 지정된 메서드를 구현하도록 강제하는 계약 역할을 합니다. 인터페이스의 메서드는 추상 메서드이며 메서드 본문이 없습니다. 코드 예: publicinterfaceAnimal{voideat();voidsleep();} 추상 클래스: 부분적으로 구현된 블루프린트 추상 클래스는 하위 클래스에서 상속할 수 있는 부분 구현을 제공하는 상위 클래스입니다. 인터페이스와 달리 추상 클래스에는 구체적인 구현과 추상 메서드가 포함될 수 있습니다. 추상 메소드는 abstract 키워드로 선언되며 서브클래스에 의해 재정의되어야 합니다. 코드 예: publicabstractcla
