JavaScript는 원래 값, 기준 값 및 속성을 감지합니다

JavaScript에서 우리는 종종 이와 같은 코드를 본다 : 변수와 ​​NULL과 비교하는 것은 변수에 합리적인 값이 주어 지는지 여부를 결정하는 데 사용됩니다. 예를 들어:

 var controller = {process : function (items) {if (items! == null) {// 잘못 쓰기 메소드 items.sort (); items.foreach (item (item) {// 일부 logic});}}}

이 코드에서, 프로세스 () 메소드는 항목에 SORT () 및 foreach ()가있는 것을 볼 수 있기 때문에 항목이 배열이 될 것으로 예상합니다. 이 코드의 의도는 매우 분명합니다. 매개 변수 항목이 그룹 번호가 아닌 경우 다음 작업이 중지됩니다. 이 글쓰기 방법의 문제점은 NULL과의 비교가 실제로 오류를 방지 할 수 없다는 것입니다. 항목의 값은 1, 문자열 또는 객체 일 수 있습니다. 이 값은 NULL과 같지 않으므로 Process () 메소드가 Sort ()로 실행될 때 오류가 발생합니다.

NULL과 비교해도 후속 코드 실행이 실제로 안전한지 여부를 결정하기에 충분한 정보를 제공하지 않습니다. 다행히 JavaScript는 변수의 실제 값을 감지하는 여러 가지 방법을 제공합니다.

원래 값을 감지하십시오

JavaScript에는 5 가지 원시 유형 (간단한 데이터 유형이라고도 함)이 있습니다 : 문자열, 번호, 부울, 정의 및 null. 값이 문자열, 번호, 부울 또는 정의되지 않은 경우 가장 좋은 옵션은 유형을 나타내는 문자열을 반환하는 연산자를 사용하는 것입니다.

문자열의 경우 유형은 "문자열"을 반환합니다.

숫자의 경우 "번호"를 반환합니다.

부울의 경우, 유형은 "부울"을 반환합니다.

정의되지 않은 경우 유형은 "정의되지 않은"반환을 반환합니다.

Typeof의 기본 구문은 : typeof arible, typeof (변수)를 사용할 수도 있지만 합법적 인 JavaScript 구문이지만 Typeof가 연산자가 아닌 함수처럼 보이게합니다. 이를 고려하여 괄호없이 쓰기를 권장합니다.

이러한 4 가지 원시 유형을 감지하기 위해 Typeof를 사용하는 것은 매우 안전합니다. 다음 예를 살펴 보겠습니다.

 // "string"if (typeof name === "string") {OtherName = name.substring (3);} // "숫자"if (typeof count === "number") {updateCount (count);} // "boolean"을 탐지하는 경우 (found == "boolean"&& found ") (myApp 타입 === "undefined") {myapp = {// 다른 코드};}

연산자 유형은 선언되지 않은 변수와 함께 사용될 때 오류를보고하지 않는다는 점에서 고유합니다. 정의되지 않은 변수와 값이 정의되지 않은 변수는 모두 typeof를 통해 "정의되지 않은"을 반환합니다.

Typeof를 통해 마지막 원시 유형 NULL은 "Object"를 반환합니다. "Object"는 이상하게 보이고 표준 사양에서 심각한 버그로 간주되므로 프로그래밍시 유형의 사용을 방지하여 NULL 유형을 감지해야합니다.

 Console.log (널 타입); // "물체"

단순히 NULL과 비교하면 일반적으로 값 유형이 합법적인지 여부를 결정하기에 충분한 정보가 포함되어 있지 않으므로 NULL은 일반적으로 탐지 문에 사용되지 않습니다.

그러나 예상 값이 실제로 무인이라면 예외가 있습니다. NULL과 직접 비교할 수 있습니다. 예를 들어:

 // NULL을 감지 해야하는 경우이 메소드를 사용하여 var element = document.getElementById ( "my-div"); if (element! == null) {element.className = "found";}

DOM 요소가 존재하지 않으면 Document.GetElementById ()에 의해 얻은 값은 NULL입니다. 이 메소드는 노드를 반환하거나 NULL을 반환합니다. NULL은 현재 예측 가능한 출력이므로 ID 연산자 === 또는 비 식별력 연산자를 사용하여 반환 결과를 감지 할 수 있습니다! ==.

위에서 언급 한 문자열, 숫자, 부울, 정의되지 않은 및 객체 외에도 연산자의 유형의 반환 값도 기능이 있습니다. 기술적 인 관점에서 기능은 데이터 유형이 아닌 JavaScript의 객체이기도합니다. 그러나 함수에는 몇 가지 특수 속성이 있으므로 기능을 다른 객체와 유형으로 구별해야합니다. 이 기능은 나중에 탐지 기능에 사용됩니다.

참조 값을 감지하십시오

원래 값을 제외한 JavaScript에서 모든 참조 값 (객체라고도 함). 일반적으로 사용되는 참조 유형은 객체, 배열, 날짜 및 Regexp입니다. 이 참조 유형은 JavaScript의 내장 객체입니다. 연산자 유형은 이러한 참조 유형을 판단 할 때 "오브젝트"를 반환합니다.

 console.log (typeof {}); // "Object"Console.log (typeof []); // "Object"Console.log (새 날짜 타입 ()); // "Object"Console.log (새로운 regexp () 타입); // "Object"Console.log (새로운 regexp () 타입); // "물체"

참조 된 값 유형을 감지하는 가장 좋은 방법은 인스턴스 연산자를 사용하는 것입니다. 인스턴스의 기본 구문은 다음과 같습니다.

 value instructor // 날짜를 감지 if (value instanceof date) {console.log (value.getlyear);} // errorif (value instanceof error) {trash value;} // 정규 표현식을 감지 if (value.test (exervalue)) {console.log ( "match");}}

인스턴스의 흥미로운 특징은이 객체를 구성하는 생성자를 감지 할뿐만 아니라 프로토 타입 체인을 감지한다는 것입니다. 프로토 타입 체인에는 객체를 정의하는 데 사용되는 상속 패턴을 포함하여 많은 정보가 포함되어 있습니다. 예를 들어, 기본적으로 각 객체는 객체에서 상속되므로 각 객체의 객체의 값 인스턴스는 ture를 반환합니다. 예를 들어:

 var now = new date (); console.log (지금 인스턴스 객체); // natureconsole.log (이제 인스턴스 날짜); // altertinStanceof 연산자는 다음과 같은 사용자 정의 유형을 감지 할 수 있습니다. 함수 person (name) {this.name = name;} var me = new Person ( "Nicholas"); console.log (Me instanceof object); // natureconsole.log (me instanceof person); // 자연

이 샘플 코드에서 사람 유형이 생성됩니다. 변수 Me는 사람의 사례이므로 사람의 사례는 사실입니다. 위에서 언급했듯이 모든 객체는 객체의 인스턴스로 간주되므로 객체의 인스턴스도 terture입니다.

JavaScript에서 내장 및 사용자 정의 유형을 감지 할 때 가장 좋은 방법은 연산자 인스턴스를 사용하는 것입니다. 이것이 유일한 방법입니다.

그러나 심각한 제한이 있습니다. 두 브라우저 프레임 (프레임)이 생성자 사람이 있고 프레임 A의 인스턴스 인스턴스가 프레임 B로 전달된다고 가정하면 다음 결과는 다음과 같습니다.

Console.log (FrameapersonInstance 인스턴스 FrameAperson) // ture

console.log (frameapersonInstance instanceof framebperson) // false

두 사람의 정의는 정확히 동일하지만 프레임에서 다른 유형으로 간주됩니다. 이 문제가있는 두 가지 중요한 내장 유형이 있습니다. 배열 및 기능,이를 감지하면 일반적으로 인스턴스를 사용하지 않습니다.

탐지 기능

기술적으로 말하면, JavaScript의 함수는 참조 유형이며 기능 생성자도 있습니다. 각 함수는 예를 들어 예입니다.

 함수 myfunc () {} // 잘못된 쓰기 메소드 console.log (myfunc instanceof function); // 진실

그러나 각 프레임에는 자체 기능 생성자가 있으므로이 방법은 프레임에서 사용할 수 없습니다. 다행스럽게도 연산자 유형은 기능에 사용하여 "기능"을 반환 할 수 있습니다.

 function myfunc () {} // 양호한 쓰기 메소드 console.log (typeof myfunc === "function"); // 진실

함수를 감지하는 가장 좋은 방법은 프레임에 걸쳐 사용할 수 있으므로 Typeof를 사용하는 것입니다.

기능을 감지하기 위해 Typeof를 사용하는 것은 제한이 있습니다. IE 8 이상에서 IE 브라우저에서 Typeof는 DOM 노드에서 해당 함수를 "함수"대신 "객체"의 모든 반환을 감지하는 데 사용됩니다. 예를 들어:

 // IECONSOLE.LOG (typeof document.createElement); // "Object"Console.log (typeof document.getElementById); // "Object"Console.log (typeof document.getElementByTagName); // "Object"Console.log (typeof document.getElementByTagName); // "물체"

이 이상한 현상은 브라우저가 DOM의 구현에 차이가 있기 때문에 발생합니다. 요컨대, 이러한 이전 버전의 IE는 DOM을 내장 JavaScript 메소드로 구현하지 않았으므로 이러한 기능을 객체로 식별하는 내장 유형의 유형이 발생했습니다. DOM은 명확하게 정의되기 때문에 객체 멤버가 존재한다는 것을 알면 방법이 메소드라는 것을 의미합니다. 개발자는 종종 운영자를 사용하여 다음과 같은 DOM 메소드를 감지합니다.

 // dom detect detect if (document에서 "querySelectorALL") {var images = document.querySelectorall ( "IMG");}

이 코드는 QuerySelectorall이 문서에 정의되어 있는지 확인하고 그렇다면이 메소드를 사용하십시오. 이상적인 방법은 아니지만 DOM 방법이 IE 8 및 이전 브라우저에 존재하는지 여부를 감지하는 가장 안전한 방법입니다. 다른 모든 경우에, 타입 연산자는 JavaScript 함수를 감지하기위한 최선의 선택입니다.

배열을 감지하십시오

JavaScript에서 가장 오래된 크로스 도메인 문제 중 하나는 프레임 사이에서 배열을 앞뒤로 통과하는 것입니다. 개발자는 곧 배열 인스턴스 가이 시나리오에서 올바른 결과를 반환 할 수 없다는 것을 발견했습니다. 위에서 언급했듯이 각 프레임에는 자체 배열 생성자가 있으므로 한 프레임의 인스턴스는 다른 프레임에서 인식되지 않습니다.

JavaScript에서 배열 유형을 감지하는 방법에 대한 많은 연구가 있었고 마지막으로 Kangax는 우아한 해결책을 제시했습니다.

 함수 isarray (value) {return object.prototype.tostring.call (value) === "[객체 배열]";}

Kangax는 값의 내장 Tostring () 메소드를 호출하면 모든 브라우저에서 표준 문자열 결과를 반환한다는 것을 발견했습니다. 배열의 경우 반환 된 문자열은 "[객체 배열]이며, 배열 인스턴스가 구성되는 프레임을 고려할 필요가 없습니다. 이 방법은 내장 객체를 식별 할 때 종종 매우 유용하지만 사용자 정의 객체에는이 방법을 사용하지 마십시오.

ECMAScript5는 공식적으로 Array.isArray ()를 JavaScript에 소개합니다. 유일한 목적은 값이 배열인지 정확하게 감지하는 것입니다. Kangax의 함수와 마찬가지로 Array.isarray ()는 프레임에 걸쳐 전달 된 값을 감지 할 수 있으므로 많은 JavaScript 클래스 라이브러리가 현재이 방법을 비슷하게 구현합니다.

 function isArray (value) {if (typeof array.isArray === "function") {return array.isArray (value);} else {return object.prototype.call (value) === "[객체 배열]";}}

IE 9+, Firefox 4+, Safari 5+, Opera 10.5+ 및 Chrome은 모두 Array.isArray () 메소드를 구현합니다.

속성을 감지하십시오

NULL (및 정의되지 않은)이있는 또 다른 시나리오는 다음과 같은 객체에 속성이 존재하는지 여부를 감지 할 때입니다.

 // 나쁜 쓰기 : 거짓 값 감지 if (object [propertyname]) {// 일부 코드} // 나쁜 쓰기 : null if (object [propertyname]! = null) {// 일부 코드} // 잘못 쓰기 : (Object [propertyname]! = undfined) {// 일부 코드}와 비교합니다.

위의 코드의 각 판단은 주어진 이름으로 언급 된 속성이 존재하는지 여부를 판단하기보다는 실제로 주어진 이름으로 속성 값을 확인합니다. 첫 번째 판단에서, 속성 값이 0, ""(빈 문자열), false, null 및 undefined와 같은 잘못된 값 인 경우 결과는 오류가 오류됩니다. 결국 이들은 재산의 법적 값입니다.

속성이 존재하는지 확인하는 가장 좋은 방법은 IN 연산자를 사용하는 것입니다. IN 운영자는 단순히 재산의 가치를 읽지 않고 부동산이 존재하는지 판단합니다. 인스턴스 객체의 속성이 객체의 프로토 타입에서 존재하거나 상속되면 IN 연산자가 true를 반환합니다. 예를 들어:

 var object = {count : 0, relation : null}; // 좋은 글쓰기 if (객체에서 "count") {// 여기 코드가 실행됩니다} // 잘못된 쓰기 : (object [ "count"]) {// 여기에 코드가 실행되지 않습니다} // 여기에 "관련"} // object가 실행됩니다. {// 여기의 코드는 실행되지 않습니다}

인스턴스 객체의 특정 속성이 존재하는지 확인하려면 hasownProperty () 메소드를 사용하십시오. 객체에서 상속 된 모든 JavaScript 객체는이 방법을 가지고 있습니다. 이 속성이 인스턴스에 존재하는 경우 true를 반환합니다 (이 속성이 프로토 타입에만 존재하는 경우 False를 반환합니다). IE 8 및 이전 버전의 IE에서 DOM 객체는 객체에서 상속되지 않으므로이 방법에는 포함되지 않습니다. 즉, DOM Object의 HasownProperty () 메소드가 호출하기 전에 존재하는지 확인해야합니다.

 // 이것은 if (object.hasownproperty ( "reseour")) {// 여기에서 코드 실행} // dom object인지 확실하지 않은 경우 객체 && object.hasownProperty ( "resect") {// execute the code}에 if ( "hasownproperty"를 작성한 다음 if}를 작성하는 좋은 방법입니다.

IE 8 및 이전 버전의 IE가 있으므로 인스턴스 객체의 속성이 존재하는지 판단 할 때 IN 연산자를 사용하는 것이 좋습니다. HasownProperty ()는 인스턴스 속성을 판단 할 때만 사용됩니다.

속성의 존재를 감지 해야하는 경우에 관계없이 IN OPERATOR 또는 HASOWNProperty ()를 사용하십시오. 이렇게하면 많은 버그를 피할 수 있습니다.

위의 것은 원래 값, 기준 값 및 편집기가 소개 한 속성의 JavaScript 감지입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!