JavaScript 상속 방법에 대한 자세한 설명(3)

零到壹度
풀어 주다: 2018-03-22 14:29:55
원래의
1412명이 탐색했습니다.

이 글은 계속해서 자바스크립트 상속 방식을 자세히 설명하고, 주로 코드 형태로 공유해드리니 도움이 되셨으면 좋겠습니다.

1. 프로토타입 모드로 작성된 도구 기능 3

/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls,superCls) {
subCls.prototype = new superCls();
}
로그인 후 복사

상위 클래스 상속, 즉 속성과 메서드가 프로토타입에 매달려 있습니다.

/**
 *  父类Person
 */
function Person(){}
Person.prototype.nationality = 'China';
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}
로그인 후 복사

하위 클래스 상속 및 상위 클래스

function Man() {}
extend(Man,Person);
로그인 후 복사

상위 클래스의 속성과 메소드를 상속받은 후 하위 클래스의 자체 속성을 추가합니다.

Man.prototype.name = 'jack';
Man.prototype.getName = function() { return this.name;}
Man.prototype.setName = function(n) { this.name=n;}
로그인 후 복사

메소드는 다음과 같이 테스트됩니다. 프로토타입 메커니즘을 완전히 채택했습니다.

2, 도구 기능 4 상속


이 방법이 현재 더 많이 사용되고 있으며, 51ditu 웹사이트의 개발도 이 모델을 기반으로 하고 있습니다.

var m = new Man();
console.log(m);
console.log(m instanceof Person);
로그인 후 복사

생성자 + 프로토타입 메소드에 따라 클래스를 작성합니다. 즉, 여기에 속성이 걸리고 프로토타입에 메소드가 걸립니다.

/**
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 */
function extend(subCls,superCls) {
//暂存子类原型
var sbp = subCls.prototype;
//重写子类原型--原型继承
subCls.prototype = new superCls();
//重写后一定要将constructor指回subCls
subCls.prototype.constructor = subCls;
//还原子类原型
for(var atr in sbp) {
subCls.prototype[atr] = sbp[atr];
}
//暂存父类
subCls.supr = superCls;
}
로그인 후 복사

Man 하위 클래스에 표시될 상위 클래스 생성자가 상위 클래스의 속성/필드 복사를 완료했습니다.

Man

/**
 *  父类Person
 */
function Person(nationality){
this.nationality = nationality;
}
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}
/**
 *  子类Man
 */
function Man(nationality,name) {
Man.supr.call(this,nationality); //很重要的一句,调用父类构造器
this.name = name;
}
Man.prototype.getName = function() {return this.name;}
Man.prototype.setName = function(n) {this.name=n;}
로그인 후 복사
인스턴스 생성을 위한 호출 연장

위 내용은 JavaScript 상속 방법에 대한 자세한 설명(3)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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