javascript 고급 기술

안전 한 유형 검사
JavaScript 에 내 장 된 형식 검사 메커니즘 은 완전히 신뢰 할 수 있 는 것 이 아 닙 니 다.사실 잘못된 부정 과 잘못된 긍정 이 발생 하 는 경우 도 적지 않다.예 를 들 어 type of 연산 자 는 예측 할 수 없 는 행동 이 있 기 때문에 데이터 형식 을 검사 할 때 믿 을 수 없 는 결 과 를 얻 을 수 있 습 니 다.Safari (4 판 까지) 는 정규 표현 식 에 type: of 연산 자 를 적용 할 때 'function' 으로 돌아 가기 때문에 함수 인지 아 닌 지 확인 하기 어렵다.예 를 들 어 인 스 턴 트 오 브 연산 자 는 여러 개의 전역 역할 영역 (한 페이지 에 여러 개의 frame 포함) 이 존재 하 는 상황 에서 도 문제 가 많다.하나의 전형 적 인 예 (제5 장 에서 도 언급 한 적 이 있다) 는 바로 아래 와 같이 대상 을 배열 로 표시 하 는 것 이다.var isArray = value instanceof Array;
이 코드 는 true 로 돌아 가 려 면 value 는 하나의 배열 이 어야 하 며, Array 구조 함수 와 같은 전역 역할 영역 에 있어 야 합 니 다.(Array 는 window 의 속성 이라는 것 을 잊 지 마 세 요.) value 가 다른 frame 에서 정 의 된 배열 이 라면 상기 코드 는 false 로 돌아 갑 니 다.어떤 대상 이 원생 대상 인지 개발 자가 정의 한 대상 인지 검사 할 때 도 문제 가 있다.이 문제 가 발생 한 이 유 는 브 라 우 저가 JSON 대상 을 원생 지원 하기 시 작 했 기 때문이다.많은 사람들 이 Douglas Crockford 의 JSON 라 이브 러 리 를 사용 하고 있 기 때문에 이 라 이브 러 리 는 전체 JSON 대상 을 정의 합 니 다.그래서 개발 자 들 은 페이지 에 있 는 JSON 대상 이 원생 인지 확인 하기 어렵다.
원리: 모든 값 에서 Object 원생 의 toString () 방법 을 호출 하면 [object Native Constructor Name] 형식의 문자열 을 되 돌려 줍 니 다.

//      
function type(val){
   return Object.prototype.toString.call（val）
}

2. 역할 영역 안전 한 구조 함수
역할 영역 안전 한 구조 함수 가 변경 되 기 전에 먼저 this 대상 이 정확 한 유형의 인 스 턴 스 임 을 확인 합 니 다.그렇지 않 으 면 새로운 인 스 턴 스 를 만 들 고 돌아 갑 니 다.

function Person(name, age, job){ 
    if (this instanceof Person){ 
        this.name = name; 
        this.age = age; 
        this.job = job; 
    } else { 
        return new Person(name, age, job); 
    } 
} 
 
var person1 = Person("Nicholas", 29, "Software Engineer"); 
alert(window.name);      //"" 
alert(person1.name);     //"Nicholas" 
 
var person2 = new Person("Shelby", 34, "Ergonomist"); 
alert(person2.name);     //"Shelby" 

역할 영역 안전 에 대한 구조 함수 에 대한 팁 입 니 다.이 모드 를 실현 한 후에 구조 함 수 를 호출 할 수 있 는 환경 을 잠 갔다.만약 구조 함수 로 모델 의 계승 을 훔 치고 원형 체인 을 사용 하지 않 는 다 면 이 계승 은 파 괴 될 가능성 이 높다.여기에 예 가 하나 있다.

function Polygon(sides){ 
    if (this instanceof Polygon) { 
        this.sides = sides; 
        this.getArea = function(){ 
            return 0; 
        }; 
    } else { 
        return new Polygon(sides); 
    } 
} 
 
function Rectangle(width, height){ 
    Polygon.call(this, 2); 
    this.width = width; 
    this.height = height; 
    this.getArea = function(){ 
        return this.width * this.height; 
    }; 
} 
 
var rect = new Rectangle(5, 10); 
alert(rect.sides);        //undefined 
 

이 코드 에서 Polygon 구조 함 수 는 역할 영역 이 안전 하지만 Rectangle 구조 함 수 는 그렇지 않 습 니 다.Rectangle 인 스 턴 스 를 새로 만 든 후 이 인 스 턴 스 는 Polygon. call () 을 통 해 Polygon 의 sides 속성 을 계승 해 야 합 니 다.그러나 Polygon 구조 함 수 는 역할 영역 이 안전 하기 때문에 this 대상 은 Polygon 의 인 스 턴 스 가 아니 기 때문에 새로운 Polygon 대상 을 만 들 고 되 돌려 줍 니 다.Rectangle 구조 함수 의 this 대상 이 증가 하지 않 았 고 Polygon. call () 이 되 돌아 오 는 값 도 사용 되 지 않 았 기 때문에 Rectangle 인 스 턴 스 에는 sides 속성 이 없습니다.구조 함수 가 원형 체인 이나 기생 조합 을 훔 쳐 결합 하면 이 문 제 를 해결 할 수 있다.다음 예 를 고려 해 보 자.

function Polygon(sides){ 
    if (this instanceof Polygon) { 
        this.sides = sides; 
        this.getArea = function(){ 
            return 0; 
        }; 
    } else { 
        return new Polygon(sides); 
    } 
} 
 
function Rectangle(width, height){ 
    Polygon.call(this, 2); 
    this.width = width; 
    this.height = height; 
    this.getArea = function(){ 
        return this.width * this.height; 
    }; 
} 
 
Rectangle.prototype = new Polygon(); 
 
var rect = new Rectangle(5, 10); 
alert(rect.sides);        //2 
 

위 에 재 작성 한 코드 중 하나의 Rectangle 인 스 턴 스 도 하나의 Polygon 인 스 턴 스 이기 때문에 Polygon. call () 은 원래 의 뜻 대로 실 행 됩 니 다. 마지막 으로 Rectangle 인 스 턴 스 에 sides 속성 을 추가 합 니 다.여러 프로그래머 가 같은 페이지 에 자 바스 크 립 트 코드 를 쓰 는 환경 에서 역할 영역 보안 구조 함수 가 유용 합 니 다.전체 대상 에 대한 의외 의 변경 은 추적 하기 어 려 운 오 류 를 초래 할 수 있다.단순히 구조 함수 훔 쳐 서 계승 을 실현 하지 않 는 한 역할 영역 안전 한 구조 함 수 를 최고의 실천 으로 추천 합 니 다.