js' 대상 지향 '과' 계승 '에 대한 깨 진 생각
1. prototype 에서 정의 하 는 방법 은 '인 스 턴 스 방법' 입 니 다. 가능 하고 new 에서 나 온 인 스 턴 스 여야 prototype 에서 의 방법 을 호출 할 수 있 습 니 다. 같은 방법 은 서로 다른 인 스 턴 스 에 의 해 호출 되 고 서로 간섭 하지 않 습 니 다.
function Human (name) {
this.name = name;
}
Human.prototype = {
sayHi:function () {
console.log('Hi! I\'m '+this.name+'.');
}
}
var tom = new Human('Tom');
tom.sayHi();// Hi! I'm Tom.
var perter = new Human('Perter');
perter.sayHi();// Hi! I'm Perter.
인사 하 는 방법 sayHi 를 구조 함수 로 옮 겨 서 실례 화하 면 실행 합 니 다. 따로 호출 할 필요 가 없습니다.
function Human (name) {
this.name = name;
this.sayHi()
}
Human.prototype = {
sayHi:function () {
console.log('Hi! I\'m '+this.name+'.');
}
}
var tom = new Human('Tom');// Hi! I'm Tom.
var perter = new Human('Perter');// Hi! I'm Perter.
이렇게 하면 window 전역 역할 영역 에 say Hi 방법 을 쓰 는 것 과 다른 값 호출 은 어떤 차이 가 있 습 니까?:
function sayHi (name) {
console.log("Hi! I'm "+name+'.');
}
sayHi('Tom');// Hi! I'm Tom.
sayHi('Perter');// Hi! I'm Perter.
전역 적 인 function 대상 은 간단 한 작은 블록 논리 에 적합 합 니 다. 비교적 복잡 한 논리 라면 하나의 function 대상 에 쓰 면 더욱 복잡 해 지고 유지 하기 어렵 습 니 다. 관리 와 유지 에 편리 하도록 분리 해 야 합 니 다.
function Human (name) {
this.name = name;
this.sayHi()
}
Human.prototype = {
sayHi:function () {
console.log('Hi! I\'m '+this.name+'.');
},
work:function () {
console.log("To live,I must work.");
},
eat:function () {
console.log("To live,I must eat.");
}
set:function () {
console.log("Sex is an instinct");
}
}
여기 서 Human 클래스 는 시작 보다 3 가지 방법 을 더 정 의 했 습 니 다. prototype 실현 은 분 리 된 논리 모듈 에 대한 재 패 키 징 후의 재 활용 입 니 다. 이것 은 간단 한 function 대상 이 하기 어 려 운 것 입 니 다.
2. 독립 된 제 이 슨 대상 도 패 키 징 논리 에 좋 은 용기 이지 만 인용 유형 이기 때문에 같은 문서 컨 텍스트 에서 재 활용 하면 후자 가 전 자 를 덮어 쓰 는 상황 이 발생 할 수 있 습 니 다.
3. 다른 속성 을 정의 하 는 방법 은 모두 '정적 방법' 이 고 변 하지 않 는 '클래스' 의 등급 에서 만 호출 할 수 있 습 니 다.
prototype 사용 시 주의사항:
1. xx. prototype = {} 방식 으로 논 리 를 밀봉 하면 'constructor' 값 에 영향 을 줄 수 있 으 므 로 사용 후 'constructor' 를 현재 클래스 로 초기 화 하 는 것 에 주의 하 십시오.나중에 실례 적 인 구조 류 가 누구 인지 판단 하 는 데 편리 하 다.
2. 계승 사례 에서 하위 클래스 를 구축 할 때 부모 클래스 의 구조 함 수 를 호출 합 니 다. 즉, 하위 클래스 가 아직 호출 되 지 않 았 고 하위 클래스 가 부모 클래스 의 구조 방법 을 계승 하 는 것 이 실 행 됩 니 다.
따라서 우 리 는 하위 클래스 의 prototype 만 부모 클래스 로 할당 하 는 인 스 턴 스 가 아 닌 계승 을 실현 하 는 방법 을 따로 패키지 해 야 합 니 다.
이 포장 방법 에서 우 리 는 필요 하 다.
2.1. 새로운 클래스 를 구성 합 니 다. 이 클래스 는 빈 구조 함 수 를 가지 고 있 습 니 다. 이 클래스 의 prototype 을 부모 클래스 의 prototype 으로 할당 한 다음 에 이 클래스 의 인 스 턴 스 를 하위 클래스 의 prototype 에 할당 합 니 다.
2.2. 복구 하위 클래스 의 constructor 초기 화
2.3. 하위 클래스 사용자 정의 속성 (baseConstructor) 은 부모 클래스 의 구조 함수 에 대한 인용 을 저장 합 니 다.
2.4. 부모 클래스 사용자 정의 속성 ( 슈퍼) 이 할아버지 클래스 에 대한 인용 을 포함한다 면 이 속성 은 부모 클래스 prototype 의 동명 속성 에 값 을 부여 해 야 합 니 다.
2.5. 하위 클래스 사용자 정의 속성 ( 슈퍼) 은 부모 클래스 의 prototype 에 대한 인용 을 저장 합 니 다.
이 방법 은:
//
function extend (subClass,superClass) {
// , ,
function inheritance(){};
inheritance.prototype = superClass.prototype;
// prototype
subClass.prototype = new inheritance();
subClass.prototype.constructor = subClass;// constructor
subClass.baseConstructor = superClass;//
//
if(superClass.__super__){
superClass.prototype.__super__ = superClass.__super__;
}
subClass.__super__ = superClass.prototype;// ,
}
,
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.