디자인 모드 (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>

좋은 웹페이지 즐겨찾기