> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 상속 패턴_javascript 기술에 대한 간략한 탐색

JavaScript 상속 패턴_javascript 기술에 대한 간략한 탐색

WBOY
풀어 주다: 2016-05-16 15:20:24
원래의
1080명이 탐색했습니다.

진정한 의미에서 Javascript는 객체지향 언어가 아니며 전통적인 상속 방법을 제공하지 않습니다. 그러나 자체적으로 제공하는 프로토타입 속성을 사용하여 상속을 달성하는 프로토타입 상속 방법을 제공합니다. 자바스크립트 프로토타입 상속은 썩었다고 하는 주제인데, 저는 이 문제를 완전히 이해한 적이 없습니다. 오늘은 "자바스크립트 패턴"에서 프로토타입 상속의 여러 방법을 다시 읽어보는 시간을 가졌습니다. JS의 간단한 상속 방법에 대해 다른 의견이 있으면 제안해 주세요.

가장 기본적인 프로토타입 체인 상속은 여기서 반복되지 않습니다. 주로 다른 상속 모드에 대해 이야기하겠습니다.

1. 생성자 상속 상속

function Father (name) {
this.name=name;
}
function Son (name) {
Father.call(this,name); //在子类型中调用超类型的构造函数
this.age=15;
}
var me=new Son("Su"); 
로그인 후 복사

이점: 그림의 name 속성과 같은 하위 유형에 대한 매개변수를 전달할 수 있습니다.

단점: 1. 메소드가 생성자에 정의되어 재사용할 수 없습니다. 2. 상위 유형 프로토타입에 정의된 메소드는 하위 유형에 표시되지 않습니다.

2. 결합 상속(포괄적인 프로토타입 체인 및 생성자)

//超类型构造函数function Father (name) {
this.name=name;
this.famMember=[];
}//超类型构造函数原型方法
Father.prototype.sayName=function () {
alert(this.name);
}//子类型构造函数
function Son (name,age) {
Father.call(this,name); //构造函数方法
this.age=age;
}
Son.prototype=new Father(); //重写子类型原型对象
Son.prototype.constructor=Son; //重写构造函数属性指向子类型
Son.prototype.sayAge=function () {
alert(this.age);
} //重写原型对象后再加入方法
var me=new Son("Su",15);
me.famMember.push("dad","mom"); //子类型可以调用超类型构造函数内的方法var he=new Son("Li",14);alert(he.famMember); // [] 
로그인 후 복사

이점: 서로 다른 하위 클래스는 고유한 속성을 갖거나 동일한 메서드를 사용할 수 있습니다.

단점: 이 방법을 사용하려면 상위 유형 생성자를 두 번 호출해야 하며, 동일한 이름을 가진 속성 메서드가 한 번 재정의됩니다.

3. 프로토타입 상속(Object.create()과 유사)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}var obj={}; //将obj对象传入作为新对象的原型。var me=object(obj); 
로그인 후 복사

이 상속 방법을 사용하려면 객체가 프로토타입 객체로 필요하므로 이를 상속하는 모든 하위 유형의 속성 메소드가 공통됩니다.

ES5는 새로운 Object.creatr() 메서드를 통해 프로토타입 상속을 표준화합니다.

4. 기생 상속(프라이빗 메서드를 설정할 수 있는 프로토타입 상속)

function object (o) {
function F () {}
F.prototype=o;
return new F();
}
var obj={}; //将obj对象传入作为新对象的原型。到这里都与原型式继承相同function creObj(o) {  var clone=object(obj);  clone.sayHi=function () {    alert("Hi");  };return clone; }
var me=creObj(obj); 
로그인 후 복사

이점: 이 방법은 공용 속성 메서드만 사용하는 프로토타입 상속의 단점을 보완하여 하위 유형이 개인 속성 메서드를 가질 수 있도록 합니다.

5. 기생 결합 상속

function inherit (father,son) {
var pro=Object(father.prototype); //创建超类型原型对象的副本
pro.constructor=son;
son.prototype=pro;           //将副本作为子类型的原型对象
} 
로그인 후 복사

이 방법은 결합 상속의 속성 메서드 적용 범위 문제를 보완하는 데 사용됩니다.

결합 상속에서 Son.prototype=new Father(); 코드를 대체하려면 위 코드를 사용하세요. 이런 방식으로 부모 유형의 생성자는 한 번만 호출하면 되며 중복되고 불필요한 속성 메서드 생성을 피하고 프로토타입 체인을 변경하지 않고 유지하는 것이 이상적인 참조 유형 상속 방법입니다.

JS 상속 모드에 대해 대략적으로 소개하겠습니다. 자세한 내용은 계속해서 Script House 웹사이트를 참조하시기 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿