디자인 모드 (3) [JS 버 전] - JavaScript 의 구조 함수 모드 는 무엇 입 니까?
1 구조 함수 모드 가 무엇 입 니까?
2 구조 함수 모델 의 역할 과 주의사항
2.1 모델 역할
2.2 주의사항
3 코드 구현
4 구조 함수 모드 와 단일 모드 결합
이전 글 의 단일 예 모드:https://blog.csdn.net/qq_23853743/article/details/107451561
1 구조 함수 모드 가 무엇 입 니까?
구조 함 수 는 특정 유형의 대상 을 만 드 는 데 사 용 됩 니 다. 사용 대상 을 설명 할 뿐만 아니 라 구조 함 수 는 처음으로 대상 을 만 들 때 대상 의 구성원 값 을 설정 할 수 있 도록 인 자 를 받 아들 일 수 있 습 니 다.구조 함 수 를 사용자 정의 한 다음 유형 대상 의 속성 이나 방법 을 설명 할 수 있 습 니 다.JavaScript 에서 구조 함 수 는 보통 인 스 턴 스 를 실현 하 는 데 사용 된다 고 생각 합 니 다. JavaScript 는 클래스 의 개요 가 없 지만 특수 한 구조 함수 가 있 습 니 다.new 키 워드 를 통 해 사용자 정의 구조 함 수 를 호출 합 니 다. 구조 함수 내부 에서 this 키 워드 는 새로 만 든 대상 을 참조 합 니 다.
2 구조 함수 모델 의 역할 과 주의사항
2.1 모델 역할
1. 특정 유형의 대상 을 만 드 는 데 사용 합 니 다.
2. 첫 번 째 성명 을 할 때 대상 에 게 값 을 부여 합 니 다.
3. 구조 함 수 를 스스로 설명 하고 속성 과 방법 을 부여 한다.
2.2 주의사항
1. 함 수 를 설명 할 때 업무 논 리 를 처리한다.
2. 구분 과 단 례 는 다 르 고 단 례 에 맞 춰 초기 화 합 니 다.
3. 구조 함 수 는 대문자 로 시작 하 는 것 을 권장 합 니 다.
4. new 의 원가 에 주의 하 세 요.(계승)
3 코드 구현
//Person , new ,
//Person , Java
function Person(name,age){
// , new
if(!(this instanceof Person)){
return new Person(name,age);
}
this.name = name;
this.age = age;
this.sayName = function(){
// js
return ' :'+this.name+' :'+this.age;
}
}
//
var xiaoMing = new Person(' ',20);
alert(xiaoMing.sayName());
//
var xiaoZhang= new Person(' ',30,);
alert(xiaoZhang.sayName());
Person 의 인 스 턴 스 를 만 들 려 면 new 연산 자, new 를 사용 해 야 합 니 다. 키 워드 는 다음 과 같은 동작 을 수행 합 니 다:
1. 간단 한 자 바스 크 립 트 대상 (즉 {}) 을 만 듭 니 다. / /var o = new Object();
2 이 구조 함수 의 역할 영역 을 새 대상 에 게 부여 합 니 다 (따라서 this 는 이 새로운 대상 을 가리 키 고 있 습 니 다). / o. proto = Person. prototype;
3. 단계 1 에서 새로 만 든 대상 을 this 의 컨 텍스트 로 합 니 다. / person. call (o);
3 구조 함수 의 코드 를 실행 합 니 다 (이 새 대상 에 속성 추가).
4 이 함수 가 대상 을 되 돌려 주지 않 으 면 this (새 대상) 를 되 돌려 줍 니 다.
앞의 예 에서 xiaoMing 과 xiaoZhang 은 Person 의 서로 다른 인 스 턴 스 를 저장 하고 있 습 니 다. 이 두 대상 은 모두 하나의 constructor (구조 함수) 속성 이 있 습 니 다. 이 속성 은 Person (구조 함수) 을 가리 키 고 있 습 니 다.
console.log(xiaoMing.constructor === Person);//true
console.log(xiaoZhang.constructor === Person);//true
그리고 이 두 개의 인 스 턴 스 는 구조 함수 의 원형 에 연결 할 수 있 습 니 다.
console.log(xiaoMing.__proto__ === Person.prototype);//true
console.log(xiaoMing.__proto__ === Person.prototype);//true
인 스 턴 스 of 검사 대상 의 유형 을 통 해 (모든 대상 이 Object 에 계승):
console.log(xiaoZhang instanceof Person);//true
console.log(xiaoZhang instanceof Object);//true
console.log(xiaoMing instanceof Person);//true
console.log(xiaoMing instanceof Object);//true
4 구조 함수 모드 와 단일 모드 결합
<script>
var Student = {
Person: function(name, age) {
if (!(this instanceof Student.Person)) {
return new Student.Person(name, age);
}
this.name = name;
this.age = age;
this.sayName = function() {
return ' :' + this.name + ', :' + this.age;
}
}
}
var Employee = {
Person: function(name, age) {
if (!(this instanceof Employee.Person)) {
return new Employee.Person(name, age);
}
this.name = name;
this.age = age;
this.sayName = function() {
return ' :' + this.name + ', :' + this.age;
}
}
}
var xiaoMing = new Student.Person(' ', 20);
alert(xiaoMing.sayName());
var xiaoZhang = new Employee.Person(' ', 30, );
alert(xiaoZhang.sayName());
</script>
</code></pre>
</div>
</div>
</div>
</div>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JS 판단 수조 네 가지 실현 방법 상세그러면 본고는 주로 몇 가지 판단 방식과 방식 판단의 원리를 바탕으로 문제가 있는지 토론하고자 한다. 예를 들어 html에 여러 개의 iframe 대상이 있으면 instanceof의 검증 결과가 기대에 부합되지 않을...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.