웹 진급 의 24: Js 내장 대상 및 대상 지향

8317 단어
내장 대상
  • document - document. referrer / / 이전 페이지 의 주 소 를 가 져 옵 니 다 (서버 환경 이 필요 합 니 다)
  • location - window. location. href / url 주소 - window. location. search / 주소 매개 변수 부분 - window. location. hash / / 페이지 닻 점 또는 해시 값 가 져 오기
  • Math - Matth. random 0 - 1 의 난수 - math. floor 아래로 추출 - math. ceil 위로 추출
  • document
        위의 첫 번 째 document 은 우리 가 비교적 잘 알 고 있 습 니 다. document. write () 는 전체 페이지 에 내용 을 쓰 고 있 습 니 다. 여기 있 는 document. referrer 는 이전 페이지 의 주 소 를 가 져 오 는 데 사 용 됩 니 다.예 를 들 어 우리 가 전자상거래 사이트 에 로그 인 할 때 로그 인 하지 않 으 면 상품 을 선택 하고 구 매 하려 면 로그 인 을 하고 로그 인 이 완 료 된 후에 이전 페이지 로 넘 어가 야 한다.바로 이런 조작 입 니 다.
    
    
    
        
              
        
            //                
            var backUrl = document.referrer;
            //      
            //              
            window.location.href = backUrl;
        
    
    
        baidu
    
    
    

    location
    위 에서 우 리 는 이미 window. location. href 를 사용 했다.
    url 주 소 를 가 져 오 거나 다시 지정 합 니 다.
    두 번 째 는 매개 변수 부분 을 가 져 오 는 데 사 용 됩 니 다. 우리 가 이전에 폼 에 대해 말 했 을 때 우리 가 입력 해 야 할 값 을 알 고 주소 로 전송 하면 그 사이트 에서 사용자 의 정보 나 다른 것 을 받 아들 일 수 있 습 니 다. 우 리 는 window. location. search 를 통 해 얻 을 수 있 습 니 다.
    
    
    
        
               
        
    
            window.onload = function(){
                //      ?      
                //url?aa=tom#12 (  )
                var data = window.location.search;//?aa=tom
                var hash = window.location.hash;//#12
                alert(hash);//#12
    
                var oSpan = document.getElementById('span01');
                // alert(data);//?aa=tom
    
                var arr = data.split('=');
                // alert(arr);//?aa,tom
                //         
                var name = arr[1];
                oSpan.innerHTML = name;//      
            }
        
    
    
        

    위의 코드 에 도 페이지 의 닻 점 을 얻 거나 해시 값 이 라 고 적 혀 있다. 예 를 들 어 우리 가 온라인 으로 책 갈 피 를 읽 을 때 웹 페이지 를 클릭 하여 닻 점 을 얻 으 면 다음 에 우 리 는 이 닻 점 을 통 해 우리 가 본 부분 을 다시 찾 을 수 있다.
    Math
    내 장 된 수학 방법 으로 약간의 조작 을 실현 할 수 있다.
    
    
    
        
        Math
        
            // var num = Math.random();
            // alert(num);//  0-1      
            var a = 10;
            var b = 20;
            // var num = Math.random()*(b-a)+a;
            // alert(num);//  10-20      
            var arr = [];
            for(var i=0; i<20; i++){
                // var num = Math.floor(Math.random()*(b-a)+a);//    ,10-19
                var num = Math.floor(Math.random()*(b-a + 1)+a);//    ,10-20
                
                arr.push(num);//          
            }
            alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19
        
    
    
        
    
    
    

    대상 을 향 하 다
    몇 가지 개념 을 이해 하 다.
    프로 세 스 및 대상 프로 그래 밍
    서로
    1. 프로 세 스 지향: 모든 작업 은 현재 사용 하 는 것 입 니 다.
    2. 대상 지향: 일종 의 프로 그래 밍 사상 으로 많은 기능 이 사전에 작성 되 었 습 니 다. 사용 할 때 기능 의 활용 에 만 관심 을 가 져 야 합 니 다. 이 기능 의 구체 적 인 실현 과정 이 필요 하지 않 습 니 다.
    javascript 대상 은 관련 변수 와 함 수 를 하나의 전체 로 조합 합 니 다. 이 전 체 를 대상 이 라 고 합 니 다. 대상 의 변 수 는 속성 이 고 변수 중의 함 수 는 방법 이 라 고 합 니 다.javascript 의 대상 은 사전 과 유사 합 니 다.
    대상 만 드 는 방법
    단일
    
    
    
        
              
        
            var Tom = {
                //   
                name:'tom',
                age:18,
    
                //   
                showName:function(){
                    alert(this.name);
                },
                showAge:function(){
                    alert(this.age);
                }
            }
    
            //    
            alert(Tom.name);
            alert(Tom.age);
            
            //    
            Tom.showName();
        
    
    
        
    
    
    

    공장 모드
    
    
    
        
                
        
            function Person(name,age,job){
                //       
                // var o = new Object();//   
                var o = {};//   、  
    
                o.name = name;
                o.age = age;
                o.job = job;
    
                o.showName = function(){
                    alert(this.name);
                }
                o.showAge = function(){
                    alert(this.age);
                }
                o.showJob = function(){
                    alert(this.job);
                }
    
                return o;
            }
    
            var Tom = Person('tom',18,'   ');
            Tom.showJob();
    
            var Jack = Person('jack',19,'   ');
            Jack.showJob();
        
    
    
        
    
    
    

    구조 함수
    
    
    
        
            
        
            function Person(name,age,job){
                this.name = name;
                this.age = age;
                this.job = job;
    
                this.showName = function(){
                    alert(this.name);
                }
                this.showAge = function(){
                    alert(this.age);
                }
                this.showJob = function(){
                    alert(this.job);
                }
            }
    
            //new                       ,       
            var Bob = new Person('bob',18,'   ');
            Bob.showJob();
    
            var Alex = new Person('alex',19,'   ');
            Alex.showJob();
    
            alert(Bob.showName == Alex.showName);//false              。
        
    
    
        
    
    
    

    원형 모드
    
    
    
        
            
        
            function Person(name,age,job){
                this.name = name;
                this.age = age;
                this.job = job;
    
                Person.prototype.showName = function(){
                    alert(this.name);
                }
                Person.prototype.showAge = function(){
                    alert(this.age);
                }
                Person.prototype.showJob = function(){
                    alert(this.job);
                }
            }
    
            //         showName  ,          
            var Lucy = new Person('lucy',18,'   ');
            //          ,        
            Lucy.showName = function(){
                alert('     ' + this.name);
            }
            Lucy.showName();//     lucy。           ,         。
    
            var Lily = new Person('lily',19,'   ');
            Lily.showName();//lily
    
            alert(Lucy.showName == Lily.showName);//false
        
    
    
        
    
    
    

    위 에서 주로 이해 해 야 할 것 은 대상 을 호출 하 는 방법 이 있 을 때 먼저 대상 자체 내부 에 있 는 지, 있 으 면 자신의 것 으로, 없 으 면 원형 으로 돌아 가 찾 는 것 이다.
    이어받다
    call 과 apply 의 차이
    
    
    
        
        call apply
        
            /*
            call apply   
    
                      this,    apply              
            */
            function aa(a,b){
                alert('  this ' + this + ',  a ' + a + ',  b ' + b);
            }
    
            //  this [object Window],  a 2,  b 3
            // aa(2,3);
    
            //  this abc,  a 2,  b 3
            // aa.call('abc',2,3);
    
            //  this abc,  a 2,  b 3
            aa.apply('abc', [2,3]);
        
    
    
        
    
    
    

    이어받다
    
    
    
        
             
        
            //  
            function Fclass(name, age){
                this.name = name;
                this.age = age;
            }
            Fclass.prototype.showName = function(){
                alert(this.name);
            }
            Fclass.prototype.showAge = function(){
                alert(this.age);
            }
    
            //  
            function Sclass(name, age, job){
                //   call  apply      
                Fclass.call(this, name, age);
                this.job = job;//     job  ,        
            }
            //    :                  
            Sclass.prototype = new Fclass();
            Sclass.prototype.showJob = function(){
                alert(this.job);
            }//         ,         。
    
            //               ,        
            var Driver = new Sclass('tom',18,'   ');
            Driver.showName();
            Driver.showAge();
            Driver.showJob();
        
    
    
        
    
    
    

    위 계승 에서 주의해 야 할 것 은 부계 의 속성 을 계승 할 때 부계 의 call 방법 으로 원래 부계 류 를 가리 키 는 this 를 하위 클래스 로 하 는 것 이다.이렇게 속성 이 계승 되 었 습 니 다.

    좋은 웹페이지 즐겨찾기